OlonJS
    • Schemas
      • Olon Menu Configuration
      • Olon Page Contract
      • Olon Site Configuration
      • Olon Tenant Manifest
      • design.schema

    design.schema

    {
        "name": "Olon",
        "version": "1.0.0",
        "tokens": {
            "colors": {
                "background": "hsl(215 28% 7%)",
                "card": "hsl(218 44% 9%)",
                "elevated": "#141B24",
                "overlay": "#1C2433",
                "popover": "hsl(218 44% 9%)",
                "popover-foreground": "hsl(214 33% 84%)",
                "foreground": "hsl(214 33% 84%)",
                "card-foreground": "hsl(214 33% 84%)",
                "muted-foreground": "hsl(215 23% 57%)",
                "placeholder": "#4A5C78",
                "primary": "hsl(222 100% 54%)",
                "primary-foreground": "hsl(0 0% 100%)",
                "primary-light": "#84ABFF",
                "primary-dark": "#0F52E0",
                "primary-50": "#EEF3FF",
                "primary-100": "#D6E4FF",
                "primary-200": "#ADC8FF",
                "primary-300": "#84ABFF",
                "primary-400": "#5B8EFF",
                "primary-500": "#1763FF",
                "primary-600": "#0F52E0",
                "primary-700": "#0940B8",
                "primary-800": "#063090",
                "primary-900": "#031E68",
                "accent": "hsl(216 28% 15%)",
                "accent-foreground": "hsl(214 33% 84%)",
                "secondary": "hsl(217 30% 11%)",
                "secondary-foreground": "hsl(214 33% 84%)",
                "muted": "hsl(217 30% 11%)",
                "border": "hsl(216 27% 21%)",
                "border-strong": "#2F3D55",
                "input": "hsl(216 27% 21%)",
                "ring": "hsl(222 100% 54%)",
                "destructive": "hsl(0 40% 46%)",
                "destructive-foreground": "hsl(210 58% 93%)",
                "destructive-border": "#7F2626",
                "destructive-ring": "#E06060",
                "success": "hsl(152 83% 26%)",
                "success-foreground": "hsl(210 58% 93%)",
                "success-border": "#1DB87A",
                "success-indicator": "#1DB87A",
                "warning": "hsl(46 100% 21%)",
                "warning-foreground": "hsl(210 58% 93%)",
                "warning-border": "#C49A00",
                "info": "hsl(214 100% 40%)",
                "info-foreground": "hsl(210 58% 93%)",
                "info-border": "#4D9FE0"
            },
            "modes": {
                "light": {
                    "colors": {
                        "background": "hsl(0 0% 96%)",
                        "card": "hsl(0 0% 100%)",
                        "elevated": "#F4F3EF",
                        "overlay": "#E5E3DC",
                        "popover": "hsl(0 0% 100%)",
                        "popover-foreground": "hsl(0 0% 3%)",
                        "foreground": "hsl(0 0% 3%)",
                        "card-foreground": "hsl(0 0% 3%)",
                        "muted-foreground": "hsl(0 0% 42%)",
                        "placeholder": "#B4B2AD",
                        "primary": "hsl(222 100% 54%)",
                        "primary-foreground": "hsl(0 0% 100%)",
                        "primary-light": "#5B8EFF",
                        "primary-dark": "#0F52E0",
                        "primary-50": "#EEF3FF",
                        "primary-100": "#D6E4FF",
                        "primary-200": "#ADC8FF",
                        "primary-300": "#84ABFF",
                        "primary-400": "#5B8EFF",
                        "primary-500": "#1763FF",
                        "primary-600": "#0F52E0",
                        "primary-700": "#0940B8",
                        "primary-800": "#063090",
                        "primary-900": "#031E68",
                        "accent": "hsl(222 100% 92%)",
                        "accent-foreground": "hsl(222 100% 54%)",
                        "secondary": "hsl(0 0% 92%)",
                        "secondary-foreground": "hsl(0 0% 3%)",
                        "muted": "hsl(0 0% 92%)",
                        "border": "hsl(0 0% 84%)",
                        "border-strong": "#B4B2AD",
                        "input": "hsl(0 0% 84%)",
                        "ring": "hsl(222 100% 54%)",
                        "destructive": "hsl(0 72% 51%)",
                        "destructive-foreground": "hsl(0 0% 100%)",
                        "destructive-border": "#FECACA",
                        "destructive-ring": "#EF4444",
                        "success": "hsl(160 84% 39%)",
                        "success-foreground": "hsl(0 0% 100%)",
                        "success-border": "#D4F0E2",
                        "success-indicator": "#0A7C4E",
                        "warning": "hsl(38 92% 50%)",
                        "warning-foreground": "hsl(0 0% 3%)",
                        "warning-border": "#F5EAD4",
                        "info": "hsl(222 100% 54%)",
                        "info-foreground": "hsl(0 0% 100%)",
                        "info-border": "#D4E5F5"
                    }
                }
            },
            "typography": {
                "fontFamily": {
                    "primary": "\"Instrument Sans\", Helvetica, Arial, sans-serif",
                    "mono": "\"JetBrains Mono\", \"Fira Code\", monospace"
                },
                "wordmark": {
                    "fontFamily": "\"Instrument Sans\", Helvetica, Arial, sans-serif",
                    "weight": "700"
                },
                "scale": {
                    "xs": "0.75rem",
                    "sm": "0.875rem",
                    "base": "1rem",
                    "lg": "1.125rem",
                    "xl": "1.25rem",
                    "2xl": "1.5rem",
                    "3xl": "1.875rem",
                    "4xl": "2.25rem",
                    "5xl": "3rem"
                },
                "tracking": {
                    "tight": "-0.02em",
                    "normal": "0em",
                    "wide": "0.04em",
                    "widest": "0.14em"
                },
                "leading": {
                    "tight": "1.2",
                    "normal": "1.5",
                    "relaxed": "1.7"
                }
            },
            "borderRadius": {
                "xl": "1rem",
                "lg": "0.75rem",
                "md": "0.5rem",
                "sm": "0.25rem",
                "full": "9999px"
            },
            "spacing": {
                "container-max": "72rem",
                "section-y": "4rem",
                "header-h": "4rem"
            },
            "zIndex": {
                "base": "0",
                "elevated": "10",
                "dropdown": "20",
                "sticky": "40",
                "overlay": "50",
                "modal": "60",
                "toast": "100"
            }
        }
    }
    Built with