{ "$schema": "https://www.designtokens.org/schemas/2025.10/format.json", "$description": "RealBrain Design System v2.0.0 tokens. Canonical source: https://realbrain.cc/design-system/tokens.css — this file is generated from it. Colour $value is the dark (default) theme; $extensions[\"cc.realbrain.theme\"].light carries the light-theme value.", "$extensions": { "cc.realbrain.meta": { "name": "RealBrain Design System", "version": "2.0.0", "source": "https://realbrain.cc/design-system/tokens.css", "guide": "https://realbrain.cc/design-system/", "agents": "https://realbrain.cc/design-system/llms.txt", "themes": [ "dark", "light" ], "themeAttribute": "data-theme=\"light\" on switches to light; remove it for dark", "densities": { "comfortable": "default", "compact": ".density-compact on a container" } }, "cc.realbrain.contrast": { "$description": "WCAG 2.x contrast ratios for the pairs the system relies on. AA thresholds: 4.5:1 body text, 3:1 large text.", "pairs": [ { "foreground": "text-1", "background": "bg", "dark": 18.23, "light": 16.84, "aa": true }, { "foreground": "text-1", "background": "surface", "dark": 17.01, "light": 18.02, "aa": true }, { "foreground": "text-1", "background": "elevated", "dark": 15.77, "light": 18.02, "aa": true }, { "foreground": "text-2", "background": "bg", "dark": 8.6, "light": 7.91, "aa": true }, { "foreground": "text-2", "background": "surface", "dark": 8.03, "light": 8.46, "aa": true }, { "foreground": "text-3", "background": "bg", "dark": 5.35, "light": 4.7, "aa": true }, { "foreground": "text-3", "background": "surface", "dark": 4.99, "light": 5.03, "aa": true }, { "foreground": "accent-fg", "background": "accent", "dark": 8.79, "light": 6.71, "aa": true }, { "foreground": "accent", "background": "surface", "dark": 8.2, "light": 6.71, "aa": true }, { "foreground": "accent", "background": "bg", "dark": 8.79, "light": 6.28, "aa": true }, { "foreground": "success", "background": "surface", "dark": 9.36, "light": 5.34, "aa": true }, { "foreground": "warning", "background": "surface", "dark": 9.67, "light": 5.93, "aa": true }, { "foreground": "error", "background": "surface", "dark": 6.39, "light": 5.38, "aa": true }, { "foreground": "info", "background": "surface", "dark": 8.05, "light": 6.24, "aa": true } ] } }, "color": { "bg": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.0314, 0.0314, 0.0314 ], "hex": "#080808" }, "$description": "Page background", "$extensions": { "cc.realbrain.css": "--bg", "cc.realbrain.theme": { "dark": "#080808", "light": "#F7F7F9" } } }, "surface": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.0706, 0.0706, 0.0863 ], "hex": "#121216" }, "$description": "Cards, inputs, the default component surface", "$extensions": { "cc.realbrain.css": "--surface", "cc.realbrain.theme": { "dark": "#121216", "light": "#FFFFFF" } } }, "elevated": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.102, 0.102, 0.1255 ], "hex": "#1A1A20" }, "$description": "Modals, popovers, toasts — anything popped above surface", "$extensions": { "cc.realbrain.css": "--elevated", "cc.realbrain.theme": { "dark": "#1A1A20", "light": "#FFFFFF" } } }, "text-1": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.9569, 0.9569, 0.9647 ], "hex": "#F4F4F6" }, "$description": "Primary text", "$extensions": { "cc.realbrain.css": "--text-1", "cc.realbrain.theme": { "dark": "#F4F4F6", "light": "#16161C" } } }, "text-2": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.6627, 0.6627, 0.7059 ], "hex": "#A9A9B4" }, "$description": "Secondary text", "$extensions": { "cc.realbrain.css": "--text-2", "cc.realbrain.theme": { "dark": "#A9A9B4", "light": "#4C4C58" } } }, "text-3": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.5137, 0.5137, 0.5608 ], "hex": "#83838F" }, "$description": "Tertiary text: metadata, placeholders, captions", "$extensions": { "cc.realbrain.css": "--text-3", "cc.realbrain.theme": { "dark": "#83838F", "light": "#6E6E7A" } } }, "accent": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.5608, 0.6588, 1 ], "hex": "#8FA8FF" }, "$description": "The one primary-action colour per screen", "$extensions": { "cc.realbrain.css": "--accent", "cc.realbrain.theme": { "dark": "#8FA8FF", "light": "#3450C8" } } }, "accent-fg": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.0314, 0.0314, 0.0314 ], "hex": "#080808" }, "$description": "Text and icons placed ON accent. Dark in the dark theme — never white on periwinkle", "$extensions": { "cc.realbrain.css": "--accent-fg", "cc.realbrain.theme": { "dark": "#080808", "light": "#FFFFFF" } } }, "accent-hover": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.6196, 0.7098, 1 ], "hex": "#9EB5FF" }, "$description": "Derived: color-mix(in oklab, accent, white 14%). Recomputes per theme", "$extensions": { "cc.realbrain.css": "--accent-hover", "cc.realbrain.theme": { "dark": "#9EB5FF", "light": "#4C6BD2" }, "cc.realbrain.formula": "color-mix(in oklab, var(--accent), white 14%)" } }, "accent-pressed": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.3804, 0.451, 0.6941 ], "hex": "#6173B1" }, "$description": "Derived: color-mix(in oklab, accent, black 24%). Recomputes per theme", "$extensions": { "cc.realbrain.css": "--accent-pressed", "cc.realbrain.theme": { "dark": "#6173B1", "light": "#21358A" }, "cc.realbrain.formula": "color-mix(in oklab, var(--accent), black 24%)" } }, "success": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.2431, 0.8118, 0.5569 ], "hex": "#3ECF8E" }, "$description": "Semantic: success. Always paired with a dot/icon and text", "$extensions": { "cc.realbrain.css": "--success", "cc.realbrain.theme": { "dark": "#3ECF8E", "light": "#177A4E" } } }, "warning": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.9098, 0.698, 0.2392 ], "hex": "#E8B23D" }, "$description": "Semantic: warning. Always paired with a dot/icon and text", "$extensions": { "cc.realbrain.css": "--warning", "cc.realbrain.theme": { "dark": "#E8B23D", "light": "#8A5A00" } } }, "error": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.949, 0.4275, 0.4275 ], "hex": "#F26D6D" }, "$description": "Semantic: error / destructive. Always paired with a dot/icon and text", "$extensions": { "cc.realbrain.css": "--error", "cc.realbrain.theme": { "dark": "#F26D6D", "light": "#C2373C" } } }, "info": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.3843, 0.6902, 0.9608 ], "hex": "#62B0F5" }, "$description": "Semantic: informational. Always paired with a dot/icon and text", "$extensions": { "cc.realbrain.css": "--info", "cc.realbrain.theme": { "dark": "#62B0F5", "light": "#1D62A8" } } }, "border": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.149, 0.149, 0.1804 ], "hex": "#26262E" }, "$description": "Default hairline", "$extensions": { "cc.realbrain.css": "--border", "cc.realbrain.theme": { "dark": "#26262E", "light": "#E3E3E9" } } }, "border-strong": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.2275, 0.2275, 0.2745 ], "hex": "#3A3A46" }, "$description": "Input borders and emphasised dividers", "$extensions": { "cc.realbrain.css": "--border-strong", "cc.realbrain.theme": { "dark": "#3A3A46", "light": "#C6C6D0" } } } }, "shadow": { "sm": { "$type": "shadow", "$value": { "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 1, "unit": "px" }, "blur": { "value": 2, "unit": "px" }, "spread": { "value": 0, "unit": "px" }, "color": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.45 } }, "$description": "Structural depth cue for elevated surfaces only — never decorative glow", "$extensions": { "cc.realbrain.css": "--shadow-sm", "cc.realbrain.theme": { "dark": "0 1px 2px rgba(0,0,0,.45)", "light": "0 1px 2px rgba(20,20,30,.08)" } } }, "md": { "$type": "shadow", "$value": { "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 4, "unit": "px" }, "blur": { "value": 14, "unit": "px" }, "spread": { "value": 0, "unit": "px" }, "color": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.5 } }, "$description": "Structural depth cue for elevated surfaces only — never decorative glow", "$extensions": { "cc.realbrain.css": "--shadow-md", "cc.realbrain.theme": { "dark": "0 4px 14px rgba(0,0,0,.5)", "light": "0 4px 14px rgba(20,20,30,.10)" } } }, "lg": { "$type": "shadow", "$value": { "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 16, "unit": "px" }, "blur": { "value": 40, "unit": "px" }, "spread": { "value": 0, "unit": "px" }, "color": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.55 } }, "$description": "Structural depth cue for elevated surfaces only — never decorative glow", "$extensions": { "cc.realbrain.css": "--shadow-lg", "cc.realbrain.theme": { "dark": "0 16px 40px rgba(0,0,0,.55)", "light": "0 16px 40px rgba(20,20,30,.14)" } } } }, "font": { "family": { "ui": { "$type": "fontFamily", "$value": [ "IBM Plex Sans", "system-ui", "sans-serif" ], "$extensions": { "cc.realbrain.css": "--font-ui" } }, "mono": { "$type": "fontFamily", "$value": [ "IBM Plex Mono", "ui-monospace", "monospace" ], "$extensions": { "cc.realbrain.css": "--font-mono" } } }, "weight": { "regular": { "$type": "fontWeight", "$value": 400 }, "medium": { "$type": "fontWeight", "$value": 500 }, "semibold": { "$type": "fontWeight", "$value": 600, "$description": "The maximum. Nothing in the system uses 700." } }, "size": { "1": { "$type": "dimension", "$value": { "value": 12, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--fs-1" } }, "2": { "$type": "dimension", "$value": { "value": 13, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--fs-2" } }, "3": { "$type": "dimension", "$value": { "value": 15, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--fs-3" } }, "4": { "$type": "dimension", "$value": { "value": 17, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--fs-4" } }, "5": { "$type": "dimension", "$value": { "value": 20, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--fs-5" } }, "6": { "$type": "dimension", "$value": { "value": 24, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--fs-6" } }, "7": { "$type": "dimension", "$value": { "value": 30, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--fs-7" } }, "8": { "$type": "dimension", "$value": { "value": 40, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--fs-8" } }, "display": { "$type": "dimension", "$value": { "value": 60, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--fs-display" } } }, "lineHeight": { "1": { "$type": "dimension", "$value": { "value": 16, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--lh-1" } }, "2": { "$type": "dimension", "$value": { "value": 20, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--lh-2" } }, "3": { "$type": "dimension", "$value": { "value": 24, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--lh-3" } }, "4": { "$type": "dimension", "$value": { "value": 26, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--lh-4" } }, "5": { "$type": "dimension", "$value": { "value": 28, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--lh-5" } }, "6": { "$type": "dimension", "$value": { "value": 32, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--lh-6" } }, "7": { "$type": "dimension", "$value": { "value": 38, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--lh-7" } }, "8": { "$type": "dimension", "$value": { "value": 48, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--lh-8" } }, "display": { "$type": "dimension", "$value": { "value": 64, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--lh-display" } } } }, "type": { "1": { "$type": "typography", "$value": { "fontFamily": "{font.family.ui}", "fontSize": "{font.size.1}", "fontWeight": 400, "lineHeight": 1.333, "letterSpacing": { "value": 0, "unit": "px" } }, "$description": "Caption, metadata" }, "2": { "$type": "typography", "$value": { "fontFamily": "{font.family.ui}", "fontSize": "{font.size.2}", "fontWeight": 400, "lineHeight": 1.538, "letterSpacing": { "value": 0, "unit": "px" } }, "$description": "UI text: controls, labels, table cells (controls and labels use 500)" }, "3": { "$type": "typography", "$value": { "fontFamily": "{font.family.ui}", "fontSize": "{font.size.3}", "fontWeight": 400, "lineHeight": 1.6, "letterSpacing": { "value": 0, "unit": "px" } }, "$description": "Body text — the default reading size and the default" }, "4": { "$type": "typography", "$value": { "fontFamily": "{font.family.ui}", "fontSize": "{font.size.4}", "fontWeight": 400, "lineHeight": 1.529, "letterSpacing": { "value": 0, "unit": "px" } }, "$description": "Lead paragraph" }, "5": { "$type": "typography", "$value": { "fontFamily": "{font.family.ui}", "fontSize": "{font.size.5}", "fontWeight": 500, "lineHeight": 1.4, "letterSpacing": { "value": 0, "unit": "px" } }, "$description": "Subheading" }, "6": { "$type": "typography", "$value": { "fontFamily": "{font.family.ui}", "fontSize": "{font.size.6}", "fontWeight": 600, "lineHeight": 1.333, "letterSpacing": { "value": 0, "unit": "px" } }, "$description": "Card heading, stat values" }, "7": { "$type": "typography", "$value": { "fontFamily": "{font.family.ui}", "fontSize": "{font.size.7}", "fontWeight": 600, "lineHeight": 1.267, "letterSpacing": { "value": 0, "unit": "px" } }, "$description": "Section title" }, "8": { "$type": "typography", "$value": { "fontFamily": "{font.family.ui}", "fontSize": "{font.size.8}", "fontWeight": 600, "lineHeight": 1.2, "letterSpacing": { "value": 0, "unit": "px" } }, "$description": "Page title" }, "display": { "$type": "typography", "$value": { "fontFamily": "{font.family.ui}", "fontSize": "{font.size.display}", "fontWeight": 600, "lineHeight": 1.067, "letterSpacing": { "value": 0, "unit": "px" } }, "$description": "Hero display text only" }, "mono": { "$type": "typography", "$value": { "fontFamily": "{font.family.mono}", "fontSize": "{font.size.2}", "fontWeight": 400, "lineHeight": 1.538, "letterSpacing": { "value": 0, "unit": "px" } }, "$description": "Code, data, IDs" } }, "space": { "1": { "$type": "dimension", "$value": { "value": 4, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--space-1" } }, "2": { "$type": "dimension", "$value": { "value": 8, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--space-2" } }, "3": { "$type": "dimension", "$value": { "value": 12, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--space-3" } }, "4": { "$type": "dimension", "$value": { "value": 16, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--space-4" } }, "5": { "$type": "dimension", "$value": { "value": 24, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--space-5" } }, "6": { "$type": "dimension", "$value": { "value": 32, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--space-6" } }, "7": { "$type": "dimension", "$value": { "value": 48, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--space-7" } }, "8": { "$type": "dimension", "$value": { "value": 64, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--space-8" } }, "9": { "$type": "dimension", "$value": { "value": 96, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--space-9" } } }, "radius": { "sm": { "$type": "dimension", "$value": { "value": 6, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--radius-sm" }, "$description": "Buttons, inputs, checkboxes" }, "md": { "$type": "dimension", "$value": { "value": 10, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--radius-md" }, "$description": "Cards, tables" }, "lg": { "$type": "dimension", "$value": { "value": 16, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--radius-lg" }, "$description": "Modals" }, "full": { "$type": "dimension", "$value": { "value": 999, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--radius-full" }, "$description": "Pills, toggles, dots, avatars" } }, "motion": { "duration": { "1": { "$type": "duration", "$value": { "value": 120, "unit": "ms" }, "$description": "Micro-interactions: hover and press colour shifts", "$extensions": { "cc.realbrain.css": "--dur-1" } }, "2": { "$type": "duration", "$value": { "value": 200, "unit": "ms" }, "$description": "Toggles, small state changes", "$extensions": { "cc.realbrain.css": "--dur-2" } }, "3": { "$type": "duration", "$value": { "value": 360, "unit": "ms" }, "$description": "Toast enter, larger transitions", "$extensions": { "cc.realbrain.css": "--dur-3" } } }, "easing": { "default": { "$type": "cubicBezier", "$value": [ 0.22, 0.61, 0.36, 1 ], "$description": "The only curve in the system. No springs, no bounce.", "$extensions": { "cc.realbrain.css": "--ease" } } } }, "layout": { "maxMarketing": { "$type": "dimension", "$value": { "value": 1200, "unit": "px" }, "$description": "Content max-width for marketing pages", "$extensions": { "cc.realbrain.css": "--max-marketing" } }, "maxApp": { "$type": "dimension", "$value": { "value": 1440, "unit": "px" }, "$description": "Content max-width for app consoles", "$extensions": { "cc.realbrain.css": "--max-app" } } }, "density": { "comfortable": { "controlHeight": { "$type": "dimension", "$value": { "value": 44, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--control-h" } }, "controlPadX": { "$type": "dimension", "$value": "{space.4}", "$extensions": { "cc.realbrain.css": "--control-pad-x" } } }, "compact": { "controlHeight": { "$type": "dimension", "$value": { "value": 32, "unit": "px" }, "$extensions": { "cc.realbrain.css": "--control-h" } }, "controlPadX": { "$type": "dimension", "$value": "{space.3}", "$extensions": { "cc.realbrain.css": "--control-pad-x" } } } } }