LMS/des/obsidian_scholar/DESIGN.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
Obsidian Scholar	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant #0c1322 #0c1322 #323949 #070e1d #141b2b #191f2f #232a3a #2e3545 #dce2f7 #c7c4d7 #dce2f7 #293040 #908fa0 #464554 #c0c1ff #c0c1ff #1000a9 #8083ff #0d0096 #494bd6 #4cd7f6 #003640 #03b5d3 #00424e #4edea3 #003824 #00885d #000703 #ffb4ab #690005 #93000a #ffdad6 #e1e0ff #c0c1ff #07006c #2f2ebe #acedff #4cd7f6 #001f26 #004e5c #6ffbbe #4edea3 #002113 #005236 #0c1322 #dce2f7 #2e3545	display-lg display-lg-mobile headline-lg headline-md headline-sm body-lg body-md body-sm label-lg label-md label-sm fontFamily fontSize fontWeight lineHeight letterSpacing Inter 40px 700 48px -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Inter 30px 700 38px -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Inter 28px 600 36px -0.015em fontFamily fontSize fontWeight lineHeight letterSpacing Inter 22px 600 30px -0.01em fontFamily fontSize fontWeight lineHeight Inter 18px 600 26px fontFamily fontSize fontWeight lineHeight Inter 16px 400 26px fontFamily fontSize fontWeight lineHeight Inter 14px 400 22px fontFamily fontSize fontWeight lineHeight Inter 12px 400 18px fontFamily fontSize fontWeight lineHeight Inter 14px 500 20px fontFamily fontSize fontWeight lineHeight Inter 12px 500 16px fontFamily fontSize fontWeight lineHeight letterSpacing Inter 11px 600 14px 0.04em	sm DEFAULT md lg xl full 0.25rem 0.5rem 0.75rem 1rem 1.5rem 9999px	gutter gutter-sm margin margin-sm space-xs space-sm space-md space-lg space-xl 1.5rem 1rem 2rem 1rem 0.25rem 0.5rem 1rem 1.5rem 2rem

Brand & Style

The design system is crafted for high-focus, continuous digital learning environments. The brand personality is intellectually rigorous, calm, and technically refined. It targets lifelong learners, software engineers, researchers, and university cohorts who spend sustained hours inside complex course structures, code terminals, and instructional video workflows.

The visual style unites modern high-contrast ergonomics with subtle depth:

• Obsidian Dark Architecture: Minimal cognitive fatigue through deep slate backgrounds that eliminate glare during late-night study sessions.
• Electric Precision: High-chroma indigo, violet, and cybernetic cyan used strictly as functional beacons for completion states, active curricula, and milestones.
• Editorial Cleanliness: Utilitarian UI structure inspired by contemporary developer environments and elite knowledge bases, balancing data density with breathable information hierarchies.

Colors

The palette is engineered specifically for contrast compliance and reduced ocular fatigue in dark environments.

Role Assignments

• Canvas Base (#0B0F19): Deep obsidian abyss used exclusively for root canvas backdrops.
• Surface Elevation 1 (#111827): Slate surface for primary panels, module drawers, and main container cards.
• Surface Elevation 2 (#1F2937): Elevated utility surfaces, hover interactions, dropdown menus, and active rows.
• Borders & Dividers (#374151): Structural delineation ensuring distinct separation without harsh luminance.
• Primary Indigo (#6366F1 / #4F46E5): Key interactive focal points, primary action triggers, and primary progress indicators.
• Secondary Cyan (#06B6D4): Live session indicators, active telemetry, code highlights, and granular metric progress.
• Tertiary Emerald (#10B981): Module completion badges, passing test scores, and positive system feedback.
• Text Primary (#F9FAFB): 98% brightness neutral for instant legibility in body copy and core headings.
• Text Muted (#9CA3AF): Subtext, metadata tags, syllabus timestamps, and secondary captions.

Typography

Typography relies entirely on Inter to ensure maximum typographic neutrality, precision, and tall x-height clarity. Numerical tracking is balanced with tabular figures (tnum) across gradebooks, timestamps, and progress percentages.

Hierarchical Usage

• Display & Headings: Tighter negative tracking (-0.02em to -0.01em) provides crisp, structural presence for course titles and dashboard metrics.
• Body: Standard tracking with relaxed leading (1.6 multiplier) prevents visual crowding across technical documentation, code explanations, and reading units.
• Labels & Microcopy: Positive letter-spacing applied exclusively to all-caps indicators (label-sm), such as prerequisites, module categories, and dynamic status tokens.

Layout & Spacing

The layout is built on an adaptive 12-column fluid grid tailored for dashboard analytics, video-to-notes split screens, and modular curriculum sidebars.

Grid & Breakpoints

• Desktop (≥1280px): 12 columns, 24px (1.5rem) gutters, 32px (2rem) margins. Allows fixed 280px navigation rail with flexible multi-pane learning panels.
• Tablet (768px - 1279px): 8 columns, 16px (1rem) gutters, 24px (1.5rem) margins. Navigation shifts to a collapsible off-canvas drawer; video and curriculum switch to stacked flex layout.
• Mobile (<768px): 4 columns, 16px (1rem) gutters, 16px (1rem) margins. Full width card stacking with sticky bottom progress controls.

Density Rhythm

A strict 4px/8px incremental rhythm governs all component interiors:

• Compact data tables and code modules use space-xs (4px) and space-sm (8px).
• General forms and card paddings apply space-md (16px) and space-lg (24px).
• Section breaks between independent curriculum blocks use space-xl (32px).

Elevation & Depth

Visual hierarchy does not rely on intense blur dropshadows, which generate mud on dark backgrounds. Instead, depth is achieved through tonal layering, specular edge highlights, and micro-glow accents.

Elevation Stack

• Level 0 (Canvas Base): Solid #0B0F19. No borders or elevation.
• Level 1 (Card & Module Layer): Solid #111827 framed by a 1px continuous border of #374151.
• Level 2 (Dropdowns, Overlays, Active Panels): Solid #1F2937 with a 1px border of rgba(99, 102, 241, 0.25) and a subtle ambient shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.60), 0 8px 10px -6px rgba(0, 0, 0, 0.50).
• Level 3 (Modals & Command Palettes): Layered above #0B0F19 with a 60% opacity backdrop blur (backdrop-filter: blur(12px)), framed with a prominent border of #4B5563.

Interactive Illumination

Interactive elements receive a subtle, directional glow upon focus and hover:

• Interactive cards elevate on hover using an electric border transition from #374151 to rgba(99, 102, 241, 0.5) alongside an ambient indigo bloom: box-shadow: 0 0 20px -5px rgba(99, 102, 241, 0.15).

Shapes

The design system implements balanced geometric softening. Core cards utilize rounded-xl (1.5rem / 24px) to balance technical precision with high-end digital polish.

Shape Hierarchy

• Standard Controls (Inputs, Buttons, Badges): 8px (0.5rem) radius for sharp, dependable affordance.
• Cards & Data Modules: 16px to 24px (1rem to 1.5rem / rounded-xl) radius to enclose complex information chunks gracefully.
• System Badges & Avatar Containers: Fully pill-shaped (9999px) for quick-scan biometric and enrollment tags.

Components

Buttons

• Primary: Background #6366F1, text #FFFFFF, font label-lg. On hover: #4F46E5 with subtle box-shadow bloom 0 0 16px rgba(99, 102, 241, 0.35).
• Secondary / Ghost: Background transparent, border 1px solid #374151, text #F9FAFB. On hover: background #1F2937, border #4B5563.
• Destructive: Background rgba(239, 68, 68, 0.1), border 1px solid rgba(239, 68, 68, 0.3), text #EF4444.

Cards & Lesson Units

• Container: Background #111827, border 1px solid #374151, border-radius 1.5rem (rounded-xl), interior padding space-lg (24px).
• Interactive State: Hover produces a smooth 150ms transition shifting border to rgba(99, 102, 241, 0.45) and translates Y by -2px.

Progress Trackers & Metric Bars

• Track Base: Height 6px to 8px, background #1F2937, border-radius 9999px.
• Indicator Fill: High-contrast gradient or solid #06B6D4 (Cyan) for in-flight tasks; #10B981 (Emerald) when reached 100%. Optional electric shimmer effect during active background asset compilation.

Badges & Status Chips

• In Progress: Background rgba(6, 182, 212, 0.1), border 1px solid rgba(6, 182, 212, 0.3), text #06B6D4.
• Completed: Background rgba(16, 185, 129, 0.1), border 1px solid rgba(16, 185, 129, 0.3), text #10B981.
• Prerequisite / Locked: Background rgba(55, 65, 81, 0.5), border 1px solid #374151, text #9CA3AF.

Input Fields & Search Bars

• Default: Background #0B0F19, border 1px solid #374151, text #F9FAFB, placeholder #6B7280, radius 8px, padding 10px 14px.
• Focus: Border shifts to #6366F1, outline 2px solid rgba(99, 102, 241, 0.2).

Lists & Syllabus Trees

• Row Architecture: Flex layout with bottom divider #1F2937.
• Active Lesson Item: Background rgba(99, 102, 241, 0.08), border-left 3px solid #6366F1, text #F9FAFB with font label-lg.
• Checkboxes: 18px square, background #0B0F19, border 1.5px solid #4B5563, radius 4px. Checked state transitions to solid #6366F1 background with white checkmark icon.