Spaces:
Sleeping
Sleeping
| { | |
| "design_system": { | |
| "name": "Cortex Luminance System", | |
| "description": "A physics-based design system combining soft aesthetic minimalism with strict luminance layering. It relies on lighting simulation (top highlights, bottom shadows) rather than diverse hues to create depth hierarchy.", | |
| "version": "1.0.0", | |
| "mode": "light", | |
| "philosophy": { | |
| "core_principle": "Depth through Luminance", | |
| "lighting_source": "Top-down (90 degrees)", | |
| "surface_material": "Matte white & Soft Glass", | |
| "accent_strategy": "Functional Purple (oklch 0.65 0.22 290)", | |
| "layering_logic": "Higher elevation = Higher lightness (or pure white) + Stronger Shadow. Lower elevation = Lower lightness + Inset Shadow." | |
| } | |
| }, | |
| "tokens": { | |
| "colors": { | |
| "primitives": { | |
| "base_hue": "270 (Purple/Violet)", | |
| "neutral_hue": "265 (Cool Gray)" | |
| }, | |
| "layers": { | |
| "bg_root": { | |
| "value": "linear-gradient(135deg, oklch(0.95 0.02 270) 0%, oklch(0.92 0.03 290) 100%)", | |
| "description": "Level 0: The ambient canvas. Corresponds to the blurry cloud/gradient background." | |
| }, | |
| "bg_layer_1": { | |
| "value": "oklch(0.99 0.005 265)", | |
| "description": "Level 1: The main application window/sidebar surface. Almost white." | |
| }, | |
| "bg_layer_2": { | |
| "value": "oklch(1.0 0 0)", | |
| "description": "Level 2: Cards, Floating Inputs, Modals. Pure White." | |
| }, | |
| "bg_sunken": { | |
| "value": "oklch(0.96 0.01 265)", | |
| "description": "For inset elements (search bars, progress tracks). Slightly darker than layer 1 to simulate depth." | |
| } | |
| }, | |
| "text": { | |
| "primary": "oklch(0.20 0.02 265)", | |
| "secondary": "oklch(0.55 0.03 265)", | |
| "accent": "oklch(0.65 0.22 290)" | |
| }, | |
| "borders": { | |
| "subtle": "rgba(0, 0, 0, 0.06)", | |
| "highlight": "rgba(255, 255, 255, 0.8)" | |
| } | |
| }, | |
| "typography": { | |
| "font_family": "Inter, SF Pro Display, system-ui, sans-serif", | |
| "weights": { | |
| "regular": 400, | |
| "medium": 500, | |
| "semibold": 600 | |
| }, | |
| "scale": { | |
| "h1": { | |
| "size": "32px", | |
| "weight": 600, | |
| "letter_spacing": "-0.02em" | |
| }, | |
| "h2": { | |
| "size": "24px", | |
| "weight": 500, | |
| "letter_spacing": "-0.01em" | |
| }, | |
| "body_lg": { | |
| "size": "16px", | |
| "weight": 400 | |
| }, | |
| "body_sm": { | |
| "size": "14px", | |
| "weight": 400 | |
| }, | |
| "caption": { | |
| "size": "12px", | |
| "weight": 500, | |
| "uppercase": false | |
| } | |
| } | |
| }, | |
| "spacing": { | |
| "xs": "4px", | |
| "sm": "8px", | |
| "md": "16px", | |
| "lg": "24px", | |
| "xl": "32px", | |
| "container_padding": "20px" | |
| }, | |
| "radii": { | |
| "sm": "8px", | |
| "md": "12px", | |
| "lg": "16px", | |
| "full": "9999px (Pill)" | |
| }, | |
| "shadows": { | |
| "note": "Shadows must imply a top-down light source. Always pair drop-shadows with top-edge inset highlights.", | |
| "elevation_low": { | |
| "css_value": "box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 1), 0 1px 2px 0 rgba(0, 0, 0, 0.05)", | |
| "use_case": "Interactive buttons, list items." | |
| }, | |
| "elevation_medium": { | |
| "css_value": "box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 1), 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)", | |
| "use_case": "Standard Cards (Saved Prompts, Suggestions)." | |
| }, | |
| "elevation_high": { | |
| "css_value": "box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 1), 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04)", | |
| "use_case": "Floating Input Area, Modals." | |
| }, | |
| "inset_sunken": { | |
| "css_value": "box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), inset 0 -1px 0 0 rgba(255, 255, 255, 0.5)", | |
| "use_case": "Search bars, tracks, unselected states." | |
| } | |
| } | |
| }, | |
| "components": { | |
| "layout_structure": { | |
| "sidebar": { | |
| "width": "260px", | |
| "background": "bg_layer_1", | |
| "border_right": "1px solid borders.subtle", | |
| "padding": "md", | |
| "style": "Flat surface, low contrast." | |
| }, | |
| "main_area": { | |
| "background": "bg_layer_2 (with large rounded corners) OR transparent over bg_root", | |
| "layout": "Flex-col, centered content, maximum width 900px." | |
| } | |
| }, | |
| "buttons": { | |
| "primary": { | |
| "bg": "black (or dark purple)", | |
| "text": "white", | |
| "radius": "md", | |
| "shadow": "elevation_low", | |
| "lighting": "Subtle top gradient (lighter top) to show curvature." | |
| }, | |
| "ghost": { | |
| "bg": "transparent", | |
| "hover_bg": "rgba(0,0,0,0.04)", | |
| "text": "text.secondary" | |
| }, | |
| "new_chat": { | |
| "style": "Pill shape / Full radius", | |
| "bg": "#1A1A1A", | |
| "text": "white", | |
| "icon": "plus" | |
| } | |
| }, | |
| "cards": { | |
| "prompt_card": { | |
| "bg": "bg_layer_2", | |
| "radius": "lg", | |
| "shadow": "elevation_medium", | |
| "border": "1px solid borders.subtle", | |
| "hover": "Transform Y -2px, increase shadow to elevation_high." | |
| } | |
| }, | |
| "inputs": { | |
| "search_bar": { | |
| "style": "Sunken / Inset", | |
| "bg": "bg_sunken", | |
| "shadow": "inset_sunken", | |
| "radius": "md", | |
| "icon_color": "text.secondary" | |
| }, | |
| "main_prompt_area": { | |
| "style": "Elevated Container", | |
| "bg": "white", | |
| "shadow": "elevation_high", | |
| "radius": "lg", | |
| "border": "1px solid rgba(0,0,0,0.04)" | |
| } | |
| }, | |
| "navigation_items": { | |
| "base_style": "text.secondary, font-medium, md padding", | |
| "active_state": { | |
| "bg": "bg_layer_2", | |
| "text": "text.primary", | |
| "shadow": "elevation_low", | |
| "radius": "sm" | |
| } | |
| } | |
| } | |
| } |