cronixui 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cronixui",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "CronixUI - A dark-themed UI toolkit with crimson accents and Outfit typography. Available for JavaScript, TypeScript, Python, Go, and Rust.",
   "keywords": [
     "ui",
@@ -30,6 +30,10 @@
       "import": "./packages/react/src/index.js",
       "types": "./packages/react/src/index.d.ts"
     },
+    "./tokens": {
+      "import": "./packages/web/src/tokens.ts",
+      "types": "./packages/web/src/tokens.ts"
+    },
     "./css": "./packages/web/dist/cronixui.css",
     "./css/min": "./packages/web/dist/cronixui.min.css",
     "./js": "./packages/web/dist/cronixui.js",

package/packages/go/cronixui/go.mod

@@ -1,10 +1,3 @@
-[package]
-name = "cronixui"
-version = "1.0.2"
-description = "CronixUI - A dark-themed UI toolkit with crimson accents and Outfit typography"
-license = "GPL-3.0"
-authors = ["CazyUndee"]
-keywords = ["ui", "dark-mode", "design-system", "components"]
+module github.com/CazyUndee/CronixUI/packages/go/cronixui
 
-[lib]
-path = "cronixui.go"
+go 1.21

package/packages/go/cronixui/tokens.go

@@ -0,0 +1,129 @@
+package cronixui
+
+// Color represents a color token
+type Color struct {
+	Hex string
+	R   int
+	G   int
+	B   int
+}
+
+// Background colors
+var (
+	BG       = Color{Hex: "#0a0a0a", R: 10, G: 10, B: 10}
+	Surface  = Color{Hex: "#111111", R: 17, G: 17, B: 17}
+	Surface2 = Color{Hex: "#1a1a1a", R: 26, G: 26, B: 26}
+	Surface3 = Color{Hex: "#222222", R: 34, G: 34, B: 34}
+	Surface4 = Color{Hex: "#2a2a2a", R: 42, G: 42, B: 42}
+)
+
+// Text colors
+var (
+	Text      = Color{Hex: "#f0ede8", R: 240, G: 237, B: 232}
+	TextMuted = "rgba(240, 237, 232, 0.5)"
+	TextDim   = "rgba(240, 237, 232, 0.25)"
+)
+
+// Accent colors (Crimson)
+var (
+	Accent      = Color{Hex: "#6b2323", R: 107, G: 35, B: 35}
+	AccentHover = Color{Hex: "#7d2a2a", R: 125, G: 42, B: 42}
+	AccentLight = Color{Hex: "#8a3535", R: 138, G: 53, B: 53}
+	AccentGlow  = "rgba(107, 35, 35, 0.3)"
+	AccentText  = Color{Hex: "#c97a7a", R: 201, G: 122, B: 122}
+)
+
+// Semantic colors
+var (
+	Success       = Color{Hex: "#1e5028", R: 30, G: 80, B: 40}
+	SuccessBorder = "rgba(60, 140, 70, 0.4)"
+	SuccessText   = Color{Hex: "#6bc47a", R: 107, G: 196, B: 122}
+
+	Warning       = Color{Hex: "#503c14", R: 80, G: 60, B: 20}
+	WarningBorder = "rgba(150, 110, 30, 0.4)"
+	WarningText   = Color{Hex: "#c4a43a", R: 196, G: 164, B: 58}
+
+	Error_      = Color{Hex: "#501414", R: 80, G: 20, B: 20}
+	ErrorBorder = "rgba(180, 60, 60, 0.4)"
+	ErrorText   = Color{Hex: "#c46b6b", R: 196, G: 107, B: 107}
+
+	Info       = Color{Hex: "#143550", R: 20, G: 53, B: 80}
+	InfoBorder = "rgba(60, 140, 200, 0.4)"
+	InfoText   = Color{Hex: "#6ba8c4", R: 107, G: 168, B: 196}
+)
+
+// Border colors
+var (
+	Border      = "rgba(255, 255, 255, 0.08)"
+	BorderHover = "rgba(255, 255, 255, 0.15)"
+	BorderFocus = "rgba(255, 255, 255, 0.25)"
+)
+
+// Typography tokens
+var (
+	FontFamily   = "'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+	FontMono     = "'JetBrains Mono', 'Fira Code', 'Consolas', monospace"
+	FontSizeXs   = 11
+	FontSizeSm   = 12
+	FontSizeBase = 13
+	FontSizeMd   = 14
+	FontSizeLg   = 16
+	FontSizeXl   = 20
+	FontSize2xl  = 28
+	FontSize3xl  = 36
+)
+
+// Spacing tokens
+var (
+	Space1  = 4
+	Space2  = 8
+	Space3  = 12
+	Space4  = 16
+	Space5  = 20
+	Space6  = 24
+	Space8  = 32
+	Space10 = 40
+	Space12 = 48
+)
+
+// Border radius tokens
+var (
+	RadiusSm   = 6
+	Radius     = 10
+	RadiusLg   = 14
+	RadiusXl   = 20
+	RadiusFull = 9999
+)
+
+// Shadow tokens
+var (
+	ShadowSm   = "0 1px 2px rgba(0, 0, 0, 0.3)"
+	Shadow     = "0 4px 12px rgba(0, 0, 0, 0.4)"
+	ShadowLg   = "0 8px 24px rgba(0, 0, 0, 0.5)"
+	ShadowGlow = "0 0 20px rgba(107, 35, 35, 0.3)"
+)
+
+// Transition tokens
+var (
+	TransitionFast    = "0.1s ease"
+	TransitionDefault = "0.15s ease"
+	TransitionSlow    = "0.25s ease"
+)
+
+// Z-index tokens
+var (
+	ZIndexDropdown      = 100
+	ZIndexSticky        = 200
+	ZIndexFixed         = 300
+	ZIndexModalBackdrop = 400
+	ZIndexModal         = 500
+	ZIndexPopover       = 600
+	ZIndexTooltip       = 700
+	ZIndexToast         = 800
+)
+
+// Layout tokens
+var (
+	ContainerMax = 1200
+	SidebarWidth = 260
+)

package/packages/python/cronixui/__init__.py

@@ -13,8 +13,45 @@ from .command_palette import CommandPalette, CommandPaletteItem
 from .search import Search, SearchItem
 from .nav import Nav
 from .core import init, query, query_all, create_el
+from .tokens import (
+    BG,
+    SURFACE,
+    SURFACE_2,
+    SURFACE_3,
+    SURFACE_4,
+    TEXT,
+    TEXT_MUTED,
+    TEXT_DIM,
+    ACCENT,
+    ACCENT_HOVER,
+    ACCENT_LIGHT,
+    ACCENT_GLOW,
+    ACCENT_TEXT,
+    SUCCESS,
+    SUCCESS_BORDER,
+    SUCCESS_TEXT,
+    WARNING,
+    WARNING_BORDER,
+    WARNING_TEXT,
+    ERROR,
+    ERROR_BORDER,
+    ERROR_TEXT,
+    INFO,
+    INFO_BORDER,
+    INFO_TEXT,
+    BORDER,
+    BORDER_HOVER,
+    BORDER_FOCUS,
+    typography,
+    spacing,
+    radius,
+    shadow,
+    transition,
+    z_index,
+    layout,
+)
 
-__version__ = "1.0.4"
+__version__ = "1.0.5"
 __all__ = [
     "Toast",
     "Toggle",
@@ -32,4 +69,41 @@ __all__ = [
     "query",
     "query_all",
     "create_el",
+    # Colors
+    "BG",
+    "SURFACE",
+    "SURFACE_2",
+    "SURFACE_3",
+    "SURFACE_4",
+    "TEXT",
+    "TEXT_MUTED",
+    "TEXT_DIM",
+    "ACCENT",
+    "ACCENT_HOVER",
+    "ACCENT_LIGHT",
+    "ACCENT_GLOW",
+    "ACCENT_TEXT",
+    "SUCCESS",
+    "SUCCESS_BORDER",
+    "SUCCESS_TEXT",
+    "WARNING",
+    "WARNING_BORDER",
+    "WARNING_TEXT",
+    "ERROR",
+    "ERROR_BORDER",
+    "ERROR_TEXT",
+    "INFO",
+    "INFO_BORDER",
+    "INFO_TEXT",
+    "BORDER",
+    "BORDER_HOVER",
+    "BORDER_FOCUS",
+    # Token objects
+    "typography",
+    "spacing",
+    "radius",
+    "shadow",
+    "transition",
+    "z_index",
+    "layout",
 ]

package/packages/python/cronixui/tokens.py

@@ -0,0 +1,200 @@
+"""
+CronixUI Design Tokens
+"""
+
+from dataclasses import dataclass
+from typing import Tuple
+
+
+@dataclass(frozen=True)
+class Color:
+    """Color token."""
+
+    hex: str
+    rgb: Tuple[int, int, int]
+
+
+# Background colors
+BG = Color("#0a0a0a", (10, 10, 10))
+SURFACE = Color("#111111", (17, 17, 17))
+SURFACE_2 = Color("#1a1a1a", (26, 26, 26))
+SURFACE_3 = Color("#222222", (34, 34, 34))
+SURFACE_4 = Color("#2a2a2a", (42, 42, 42))
+
+# Text colors
+TEXT = Color("#f0ede8", (240, 237, 232))
+TEXT_MUTED = "rgba(240, 237, 232, 0.5)"
+TEXT_DIM = "rgba(240, 237, 232, 0.25)"
+
+# Accent (Crimson)
+ACCENT = Color("#6b2323", (107, 35, 35))
+ACCENT_HOVER = Color("#7d2a2a", (125, 42, 42))
+ACCENT_LIGHT = Color("#8a3535", (138, 53, 53))
+ACCENT_GLOW = "rgba(107, 35, 35, 0.3)"
+ACCENT_TEXT = Color("#c97a7a", (201, 122, 122))
+
+# Semantic colors
+SUCCESS = Color("#1e5028", (30, 80, 40))
+SUCCESS_BORDER = "rgba(60, 140, 70, 0.4)"
+SUCCESS_TEXT = Color("#6bc47a", (107, 196, 122))
+
+WARNING = Color("#503c14", (80, 60, 20))
+WARNING_BORDER = "rgba(150, 110, 30, 0.4)"
+WARNING_TEXT = Color("#c4a43a", (196, 164, 58))
+
+ERROR = Color("#501414", (80, 20, 20))
+ERROR_BORDER = "rgba(180, 60, 60, 0.4)"
+ERROR_TEXT = Color("#c46b6b", (196, 107, 107))
+
+INFO = Color("#143550", (20, 53, 80))
+INFO_BORDER = "rgba(60, 140, 200, 0.4)"
+INFO_TEXT = Color("#6ba8c4", (107, 168, 196))
+
+# Border
+BORDER = "rgba(255, 255, 255, 0.08)"
+BORDER_HOVER = "rgba(255, 255, 255, 0.15)"
+BORDER_FOCUS = "rgba(255, 255, 255, 0.25)"
+
+
+@dataclass(frozen=True)
+class Typography:
+    """Typography tokens."""
+
+    font_family: str = (
+        "'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+    )
+    font_mono: str = "'JetBrains Mono', 'Fira Code', 'Consolas', monospace"
+
+    # Font sizes
+    xs: int = 11
+    sm: int = 12
+    base: int = 13
+    md: int = 14
+    lg: int = 16
+    xl: int = 20
+    xxl: int = 28
+    xxxl: int = 36
+
+
+@dataclass(frozen=True)
+class Spacing:
+    """Spacing tokens."""
+
+    space_1: int = 4
+    space_2: int = 8
+    space_3: int = 12
+    space_4: int = 16
+    space_5: int = 20
+    space_6: int = 24
+    space_8: int = 32
+    space_10: int = 40
+    space_12: int = 48
+
+
+@dataclass(frozen=True)
+class Radius:
+    """Border radius tokens."""
+
+    sm: int = 6
+    default: int = 10
+    lg: int = 14
+    xl: int = 20
+    full: int = 9999
+
+
+@dataclass(frozen=True)
+class Shadow:
+    """Shadow tokens."""
+
+    sm: str = "0 1px 2px rgba(0, 0, 0, 0.3)"
+    default: str = "0 4px 12px rgba(0, 0, 0, 0.4)"
+    lg: str = "0 8px 24px rgba(0, 0, 0, 0.5)"
+    glow: str = "0 0 20px rgba(107, 35, 35, 0.3)"
+
+
+@dataclass(frozen=True)
+class Transition:
+    """Transition tokens."""
+
+    fast: str = "0.1s ease"
+    default: str = "0.15s ease"
+    slow: str = "0.25s ease"
+
+
+@dataclass(frozen=True)
+class ZIndex:
+    """Z-index tokens."""
+
+    dropdown: int = 100
+    sticky: int = 200
+    fixed: int = 300
+    modal_backdrop: int = 400
+    modal: int = 500
+    popover: int = 600
+    tooltip: int = 700
+    toast: int = 800
+
+
+@dataclass(frozen=True)
+class Layout:
+    """Layout tokens."""
+
+    container_max: int = 1200
+    sidebar_width: int = 260
+
+
+# Token instances
+typography = Typography()
+spacing = Spacing()
+radius = Radius()
+shadow = Shadow()
+transition = Transition()
+z_index = ZIndex()
+layout = Layout()
+
+
+__all__ = [
+    "Color",
+    "BG",
+    "SURFACE",
+    "SURFACE_2",
+    "SURFACE_3",
+    "SURFACE_4",
+    "TEXT",
+    "TEXT_MUTED",
+    "TEXT_DIM",
+    "ACCENT",
+    "ACCENT_HOVER",
+    "ACCENT_LIGHT",
+    "ACCENT_GLOW",
+    "ACCENT_TEXT",
+    "SUCCESS",
+    "SUCCESS_BORDER",
+    "SUCCESS_TEXT",
+    "WARNING",
+    "WARNING_BORDER",
+    "WARNING_TEXT",
+    "ERROR",
+    "ERROR_BORDER",
+    "ERROR_TEXT",
+    "INFO",
+    "INFO_BORDER",
+    "INFO_TEXT",
+    "BORDER",
+    "BORDER_HOVER",
+    "BORDER_FOCUS",
+    "Typography",
+    "typography",
+    "Spacing",
+    "spacing",
+    "Radius",
+    "radius",
+    "Shadow",
+    "shadow",
+    "Transition",
+    "transition",
+    "ZIndex",
+    "z_index",
+    "Layout",
+    "layout",
+]

package/packages/rust/cronixui/src/lib.rs

@@ -25,6 +25,7 @@ mod accordion;
 mod pagination;
 mod command_palette;
 mod search;
+mod tokens;
 
 pub use toast::{Toast, ToastType};
 pub use toggle::Toggle;
@@ -35,6 +36,7 @@ pub use accordion::Accordion;
 pub use pagination::Pagination;
 pub use command_palette::{CommandPalette, CommandPaletteItem};
 pub use search::{Search, SearchItem};
+pub use tokens::*;
 
 /// Initialize CronixUI
 pub fn init() {

package/packages/rust/cronixui/src/tokens.rs

@@ -0,0 +1,137 @@
+//! Design tokens for CronixUI
+
+use std::fmt;
+
+/// Color representation
+#[derive(Debug, Clone, Copy)]
+pub struct Color {
+    pub hex: &'static str,
+    pub r: u8,
+    pub g: u8,
+    pub b: u8,
+}
+
+impl fmt::Display for Color {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        write!(f, "{}", self.hex)
+    }
+}
+
+// Background colors
+pub const BG: Color = Color { hex: "#0a0a0a", r: 10, g: 10, b: 10 };
+pub const SURFACE: Color = Color { hex: "#111111", r: 17, g: 17, b: 17 };
+pub const SURFACE_2: Color = Color { hex: "#1a1a1a", r: 26, g: 26, b: 26 };
+pub const SURFACE_3: Color = Color { hex: "#222222", r: 34, g: 34, b: 34 };
+pub const SURFACE_4: Color = Color { hex: "#2a2a2a", r: 42, g: 42, b: 42 };
+
+// Text colors
+pub const TEXT: Color = Color { hex: "#f0ede8", r: 240, g: 237, b: 232 };
+pub const TEXT_MUTED: &str = "rgba(240, 237, 232, 0.5)";
+pub const TEXT_DIM: &str = "rgba(240, 237, 232, 0.25)";
+
+// Accent colors (Crimson)
+pub const ACCENT: Color = Color { hex: "#6b2323", r: 107, g: 35, b: 35 };
+pub const ACCENT_HOVER: Color = Color { hex: "#7d2a2a", r: 125, g: 42, b: 42 };
+pub const ACCENT_LIGHT: Color = Color { hex: "#8a3535", r: 138, g: 53, b: 53 };
+pub const ACCENT_GLOW: &str = "rgba(107, 35, 35, 0.3)";
+pub const ACCENT_TEXT: Color = Color { hex: "#c97a7a", r: 201, g: 122, b: 122 };
+
+// Semantic colors - Success
+pub const SUCCESS: Color = Color { hex: "#1e5028", r: 30, g: 80, b: 40 };
+pub const SUCCESS_BORDER: &str = "rgba(60, 140, 70, 0.4)";
+pub const SUCCESS_TEXT: Color = Color { hex: "#6bc47a", r: 107, g: 196, b: 122 };
+
+// Semantic colors - Warning
+pub const WARNING: Color = Color { hex: "#503c14", r: 80, g: 60, b: 20 };
+pub const WARNING_BORDER: &str = "rgba(150, 110, 30, 0.4)";
+pub const WARNING_TEXT: Color = Color { hex: "#c4a43a", r: 196, g: 164, b: 58 };
+
+// Semantic colors - Error
+pub const ERROR: Color = Color { hex: "#501414", r: 80, g: 20, b: 20 };
+pub const ERROR_BORDER: &str = "rgba(180, 60, 60, 0.4)";
+pub const ERROR_TEXT: Color = Color { hex: "#c46b6b", r: 196, g: 107, b: 107 };
+
+// Semantic colors - Info
+pub const INFO: Color = Color { hex: "#143550", r: 20, g: 53, b: 80 };
+pub const INFO_BORDER: &str = "rgba(60, 140, 200, 0.4)";
+pub const INFO_TEXT: Color = Color { hex: "#6ba8c4", r: 107, g: 168, b: 196 };
+
+// Border colors
+pub const BORDER: &str = "rgba(255, 255, 255, 0.08)";
+pub const BORDER_HOVER: &str = "rgba(255, 255, 255, 0.15)";
+pub const BORDER_FOCUS: &str = "rgba(255, 255, 255, 0.25)";
+
+// Typography
+pub const FONT_FAMILY: &str = "'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+pub const FONT_MONO: &str = "'JetBrains Mono', 'Fira Code', 'Consolas', monospace";
+
+pub const FONT_SIZE_XS: u8 = 11;
+pub const FONT_SIZE_SM: u8 = 12;
+pub const FONT_SIZE_BASE: u8 = 13;
+pub const FONT_SIZE_MD: u8 = 14;
+pub const FONT_SIZE_LG: u8 = 16;
+pub const FONT_SIZE_XL: u8 = 20;
+pub const FONT_SIZE_2XL: u8 = 28;
+pub const FONT_SIZE_3XL: u8 = 36;
+
+// Spacing
+pub const SPACE_1: u8 = 4;
+pub const SPACE_2: u8 = 8;
+pub const SPACE_3: u8 = 12;
+pub const SPACE_4: u8 = 16;
+pub const SPACE_5: u8 = 20;
+pub const SPACE_6: u8 = 24;
+pub const SPACE_8: u8 = 32;
+pub const SPACE_10: u8 = 40;
+pub const SPACE_12: u8 = 48;
+
+// Border radius
+pub const RADIUS_SM: u8 = 6;
+pub const RADIUS: u8 = 10;
+pub const RADIUS_LG: u8 = 14;
+pub const RADIUS_XL: u8 = 20;
+pub const RADIUS_FULL: u16 = 9999;
+
+// Shadows
+pub const SHADOW_SM: &str = "0 1px 2px rgba(0, 0, 0, 0.3)";
+pub const SHADOW: &str = "0 4px 12px rgba(0, 0, 0, 0.4)";
+pub const SHADOW_LG: &str = "0 8px 24px rgba(0, 0, 0, 0.5)";
+pub const SHADOW_GLOW: &str = "0 0 20px rgba(107, 35, 35, 0.3)";
+
+// Transitions
+pub const TRANSITION_FAST: &str = "0.1s ease";
+pub const TRANSITION_DEFAULT: &str = "0.15s ease";
+pub const TRANSITION_SLOW: &str = "0.25s ease";
+
+// Z-index
+pub const Z_INDEX_DROPDOWN: u16 = 100;
+pub const Z_INDEX_STICKY: u16 = 200;
+pub const Z_INDEX_FIXED: u16 = 300;
+pub const Z_INDEX_MODAL_BACKDROP: u16 = 400;
+pub const Z_INDEX_MODAL: u16 = 500;
+pub const Z_INDEX_POPOVER: u16 = 600;
+pub const Z_INDEX_TOOLTIP: u16 = 700;
+pub const Z_INDEX_TOAST: u16 = 800;
+
+// Layout
+pub const CONTAINER_MAX: u16 = 1200;
+pub const SIDEBAR_WIDTH: u16 = 260;
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_colors() {
+        assert_eq!(BG.hex, "#0a0a0a");
+        assert_eq!(ACCENT.hex, "#6b2323");
+        assert_eq!(TEXT.r, 240);
+    }
+
+    #[test]
+    fn test_spacing() {
+        assert_eq!(SPACE_1, 4);
+        assert_eq!(SPACE_4, 16);
+        assert_eq!(SPACE_12, 48);
+    }
+}

package/packages/web/src/tokens.ts

@@ -0,0 +1,120 @@
+export interface ColorToken {
+  hex: string;
+  r: number;
+  g: number;
+  b: number;
+}
+
+// Background colors
+export const BG: ColorToken = { hex: '#0a0a0a', r: 10, g: 10, b: 10 };
+export const SURFACE: ColorToken = { hex: '#111111', r: 17, g: 17, b: 17 };
+export const SURFACE_2: ColorToken = { hex: '#1a1a1a', r: 26, g: 26, b: 26 };
+export const SURFACE_3: ColorToken = { hex: '#222222', r: 34, g: 34, b: 34 };
+export const SURFACE_4: ColorToken = { hex: '#2a2a2a', r: 42, g: 42, b: 42 };
+
+// Text colors
+export const TEXT: ColorToken = { hex: '#f0ede8', r: 240, g: 237, b: 232 };
+export const TEXT_MUTED = 'rgba(240, 237, 232, 0.5)' as const;
+export const TEXT_DIM = 'rgba(240, 237, 232, 0.25)' as const;
+
+// Accent colors (Crimson)
+export const ACCENT: ColorToken = { hex: '#6b2323', r: 107, g: 35, b: 35 };
+export const ACCENT_HOVER: ColorToken = { hex: '#7d2a2a', r: 125, g: 42, b: 42 };
+export const ACCENT_LIGHT: ColorToken = { hex: '#8a3535', r: 138, g: 53, b: 53 };
+export const ACCENT_GLOW = 'rgba(107, 35, 35, 0.3)' as const;
+export const ACCENT_TEXT: ColorToken = { hex: '#c97a7a', r: 201, g: 122, b: 122 };
+
+// Semantic colors - Success
+export const SUCCESS: ColorToken = { hex: '#1e5028', r: 30, g: 80, b: 40 };
+export const SUCCESS_BORDER = 'rgba(60, 140, 70, 0.4)' as const;
+export const SUCCESS_TEXT: ColorToken = { hex: '#6bc47a', r: 107, g: 196, b: 122 };
+
+// Semantic colors - Warning
+export const WARNING: ColorToken = { hex: '#503c14', r: 80, g: 60, b: 20 };
+export const WARNING_BORDER = 'rgba(150, 110, 30, 0.4)' as const;
+export const WARNING_TEXT: ColorToken = { hex: '#c4a43a', r: 196, g: 164, b: 58 };
+
+// Semantic colors - Error
+export const ERROR: ColorToken = { hex: '#501414', r: 80, g: 20, b: 20 };
+export const ERROR_BORDER = 'rgba(180, 60, 60, 0.4)' as const;
+export const ERROR_TEXT: ColorToken = { hex: '#c46b6b', r: 196, g: 107, b: 107 };
+
+// Semantic colors - Info
+export const INFO: ColorToken = { hex: '#143550', r: 20, g: 53, b: 80 };
+export const INFO_BORDER = 'rgba(60, 140, 200, 0.4)' as const;
+export const INFO_TEXT: ColorToken = { hex: '#6ba8c4', r: 107, g: 168, b: 196 };
+
+// Border colors
+export const BORDER = 'rgba(255, 255, 255, 0.08)' as const;
+export const BORDER_HOVER = 'rgba(255, 255, 255, 0.15)' as const;
+export const BORDER_FOCUS = 'rgba(255, 255, 255, 0.25)' as const;
+
+// Typography
+export const FONT_FAMILY = "'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" as const;
+export const FONT_MONO = "'JetBrains Mono', 'Fira Code', 'Consolas', monospace" as const;
+
+export const FONT_SIZE = {
+  xs: 11,
+  sm: 12,
+  base: 13,
+  md: 14,
+  lg: 16,
+  xl: 20,
+  '2xl': 28,
+  '3xl': 36,
+} as const;
+
+// Spacing
+export const SPACE = {
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  5: 20,
+  6: 24,
+  8: 32,
+  10: 40,
+  12: 48,
+} as const;
+
+// Border radius
+export const RADIUS = {
+  sm: 6,
+  default: 10,
+  lg: 14,
+  xl: 20,
+  full: 9999,
+} as const;
+
+// Shadows
+export const SHADOW = {
+  sm: '0 1px 2px rgba(0, 0, 0, 0.3)',
+  default: '0 4px 12px rgba(0, 0, 0, 0.4)',
+  lg: '0 8px 24px rgba(0, 0, 0, 0.5)',
+  glow: '0 0 20px rgba(107, 35, 35, 0.3)',
+} as const;
+
+// Transitions
+export const TRANSITION = {
+  fast: '0.1s ease',
+  default: '0.15s ease',
+  slow: '0.25s ease',
+} as const;
+
+// Z-index
+export const Z_INDEX = {
+  dropdown: 100,
+  sticky: 200,
+  fixed: 300,
+  modalBackdrop: 400,
+  modal: 500,
+  popover: 600,
+  tooltip: 700,
+  toast: 800,
+} as const;
+
+// Layout
+export const LAYOUT = {
+  containerMax: 1200,
+  sidebarWidth: 260,
+} as const;