LMS/des/technical_obsidian/DESIGN.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
Technical Obsidian	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 canvas-base surface-subtle surface-panel surface-raised border-hairline border-active text-primary text-secondary text-faint accent-blue-vibrant status-emerald status-amber status-rose #11131b #11131b #373942 #0c0e16 #191b23 #1d1f27 #282a32 #32343d #e1e2ed #c3c6d7 #e1e2ed #2e3039 #8d90a0 #434655 #b4c5ff #b4c5ff #002a78 #2563eb #eeefff #0053db #6bd8cb #003732 #29a195 #00302b #ffb596 #581e00 #bc4800 #ffede6 #ffb4ab #690005 #93000a #ffdad6 #dbe1ff #b4c5ff #00174b #003ea8 #89f5e7 #6bd8cb #00201d #005049 #ffdbcd #ffb596 #360f00 #7d2d00 #11131b #e1e2ed #32343d #0B0F17 #111827 #182234 #1E293B #1E293B #334155 #F1F5F9 #94A3B8 #64748B #3B82F6 #10B981 #F59E0B #F43F5E	display-hero display-hero-mobile headline-lg headline-md headline-sm body-lead body-default body-compact label-ui code-base meta-tag eyebrow-caps fontFamily fontSize fontWeight lineHeight letterSpacing Space Grotesk 44px 600 52px -0.03em fontFamily fontSize fontWeight lineHeight letterSpacing Space Grotesk 32px 600 40px -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Space Grotesk 26px 600 34px -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Space Grotesk 20px 600 28px -0.01em fontFamily fontSize fontWeight lineHeight letterSpacing Space Grotesk 16px 600 24px 0em fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 16px 400 26px fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 14px 400 22px fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 13px 400 20px fontFamily fontSize fontWeight lineHeight Plus Jakarta Sans 13px 500 18px fontFamily fontSize fontWeight lineHeight JetBrains Mono 13px 400 20px fontFamily fontSize fontWeight lineHeight letterSpacing JetBrains Mono 11px 500 16px 0.04em fontFamily fontSize fontWeight lineHeight letterSpacing JetBrains Mono 10px 600 14px 0.15em	sm DEFAULT md lg xl full 0.125rem 0.25rem 0.375rem 0.5rem 0.75rem 9999px	gutter gutter-desktop margin margin-tablet margin-desktop space-xs space-sm space-md space-lg space-xl 1rem 1.5rem 1rem 1.5rem 2rem 0.25rem 0.5rem 1rem 1.5rem 2rem

Brand & Style

This design system is engineered for high-density, analytical technical environments, LMS interfaces, and administrative data planes. Built with rigorous restraint, it treats software as precision tooling rather than decorative theater.

Core Tenets

• Elimination of Synthetic Clichés: Strictly prohibits AI-aesthetic markers: purple-to-blue gradients, electric violet glow rings, floating glassmorphism panes, and arbitrary card-in-card enclosures.
• Deep Slate & Tinted Minerals: Built on graphite and tinted midnight slate tones (#0B0F17, #111827, #1E293B). Pure absolute black (#000000) is banned to eliminate excessive contrast fatigue, while glare is avoided entirely.
• Instrumental Density: UI surfaces echo high-end developer terminals, database explorers, and editorial command decks. Content hierarchy is achieved through alignment, typographic weight, and hairlines rather than heavy drop shadows or rounded padding bubbles.
• Audience: Built for software engineers, operations researchers, curriculum architects, and technical administrators who spend uninterrupted hours parsing code, data structures, and systemic logs.

Colors

The color palette is built on deep slate neutrals, high-contrast text, and single-purpose semantic accents.

Neutral Ramp (Slate & Midnight)

• Canvas Base (#0B0F17): The root page ground. Non-reflective, deeply mineral, preventing glare.
• Surface Subtle (#111827): Inset table wells, terminal panes, and row-level backgrounds.
• Surface Panel (#182234): Primary operational tiles, sidebars, and command panels.
• Surface Raised (#1E293B): Interactive utility rows, dropdown menus, context controls.
• Border Hairline (#1E293B): Structural 1px division rules.
• Border Active (#334155): Focused states, active headers, table bounding edges.

Brand & Functional Roles

• Technical Cobalt (#2563EB / #3B82F6): Primary interactive CTA elements, selected row indicators, and focused inputs. Always exceeds WCAG AAA/AA 4.5:1 against slate backgrounds.
• Verdigris Secondary (#0D9488): Deep secondary state anchor used for telemetry metadata, secondary filters, and operational counters.
• Functional Semantics:
  • status-emerald (#10B981): Verified, passed tests, successfully compiled.
  • status-amber (#F59E0B): Pending manual review, non-blocking warning, build running.
  • status-rose (#F43F5E): Overdue items, syntax error, failed pipeline, critical blocker.

Color is functional: no colored glow shadows or gradient fills are allowed.

Typography

Typography pairs geometric clarity with utilitarian monospace precision, eliminating generic UI type defaults.

Type Pairings

• Space Grotesk (Display & Section Headers): Delivers clean technical architecture to titles, modal headers, and summary statistics. Negative tracking (-0.03em to -0.01em) provides structured anchor points.
• Plus Jakarta Sans (UI Chrome & Prose Content): Optimally balanced geometric humanist sans for high-readability body copy, syllabus manifests, notes, and form controls.
• JetBrains Mono (System Telemetry & Data): Reserved for technical data: model hashes, execution runtimes, commit refs, student IDs, status tokens, and numerical tables.

Rules of Application

1. Numeric Tabular Alignment: All tabular views, grade listings, and metric counts must enforce font-variant-numeric: tabular-nums.
2. Eyebrow Caps: Monospace labels sized at 10px or 11px must be written in uppercase with tracked letterforms (letter-spacing: 0.15em). Never apply this to full sentences.
3. Leading Allowance: Body text on dark slate surfaces must maintain loose leading (minimum 1.55 multiplier) to maintain legibility during sustained reading.

Layout & Spacing

The layout is built on a 12-column grid designed for data-heavy administrative surfaces, documentation sidebars, split-screen code runners, and dashboard tables.

Grid & Density Structure

• No Container Nesting: Avoid wrapping elements in redundant containers (e.g. cards inside cards). Group items using flat 1px hairlines, tabular rows, or alternating background tints.
• Horizontal & Vertical Rhythm:
  • space-xs (4px) and space-sm (8px): Dense data tables, status chip margins, input field inner padding.
  • space-md (16px): Standard gap between data rows, breadcrumbs, and toolbars.
  • space-lg (24px): Boundary padding for major dashboard panels.
  • space-xl (32px): Major vertical section separation.

Screen Adaptations

• Desktop (≥1280px): 12 columns, 24px gutters, max layout container width 1440px. Fixed 240px or 280px sidebar navigation with flexible content space.
• Tablet (768px - 1279px): 8 columns, 16px gutters, 24px margins. Navigation shifts to a compact icon strip or off-canvas drawer.
• Mobile (<768px): 4 columns, 16px gutters, 16px margins. Full-width panel stacking with direct access to primary action bars.

Elevation & Depth

Depth is defined through surface value shifts, hairline borders, and strict planar elevation rather than soft diffused blurs or neon cast lights.

Principles of Depth

• Zero Cast Shadow on Flat Canvas: Elements sitting on the root canvas avoid heavy drop shadows. They delineate via a 1px hairline border (#1E293B) or a value shift (#111827).
• No Electric or Colored Glow: Ambient shadows must never use primary blue or accent tints. Glow effects are excluded entirely.
• Structural Elevation Tiers:
  • Tier 0 (Root Page Base): #0B0F17.
  • Tier 1 (Surface Panel): #182234 with 1px border #1E293B. Used for dashboard widgets, code viewers, and content groups.
  • Tier 2 (Popovers, Dropdowns, Command Menus): #1E293B with 1px border #334155 and a tight neutral shadow: box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.5).
  • Tier 3 (Modals & Focus Dialogs): #111827 surface with a crisp 1px #334155 border, suspended over a #0B0F17 backdrop at 80% opacity (backdrop-filter: blur(4px)).

Shapes

The design system uses a strict, compact corner radius (roundedness: 1). Large circular radii and pill-shaped container cards are replaced with sharp, engineered corners that maximize usable content space.

Radius Architecture

• Buttons, Inputs, Controls: 4px (0.25rem) for a clean, instrument-like feel.
• Panels, Modals, Bounded Frames: 8px (0.5rem) maximum. Sharp boundary containment without soft bulbous edges.
• Code Snippets, Badges, Inline Code: 3px or 4px for tight wrapping around monospace glyphs.
• Avatar & Biometric Status: Standard circle (9999px) allowed exclusively for user portraits and binary live-status indicators.

Components

Buttons

• Primary: Solid #2563EB, text #FFFFFF, font label-ui (weight 500), border 1px solid #3B82F6, border-radius 4px, height 36px (dense: 32px), padding 0 14px. On hover: #1D4ED8. No colored drop-shadow glow.
• Secondary / Ghost: Background transparent, border 1px solid #334155, text #F1F5F9. On hover: background #1E293B, border #475569.
• Destructive: Background transparent, border 1px solid #F43F5E, text #F43F5E. On hover: background rgba(244, 63, 94, 0.1).
• Focused State: 2px offset ring in #3B82F6 (offset background #0B0F17).

Input Fields & Controls

• Text Inputs: Background #0B0F17, border 1px solid #334155, text #F1F5F9, placeholder #64748B, radius 4px, padding 8px 12px, font body-default. On focus: border #3B82F6, outline none.
• Checkboxes & Radios: 16px square/circle, background #0B0F17, border 1px solid #475569, radius 3px. Checked: background #2563EB, border #2563EB with white checkmark icon.

Data Tables & List Views

• Header: Background #111827, border-bottom 1px solid #334155, text #94A3B8, font eyebrow-caps, padding 8px 12px.
• Rows: Background #182234, border-bottom 1px solid #1E293B, text #F1F5F9, font body-compact.
• Hover/Selected State: Hover background #1E293B. Selected row adds a left accent line: border-left: 2px solid #2563EB.

Status Badges & Chips

• Structure: Height 22px, padding 2px 8px, border-radius 4px, font meta-tag.
• Passed / Verified: Background rgba(16, 185, 129, 0.1), border 1px solid rgba(16, 185, 129, 0.3), text #10B981.
• Pending / In Review: Background rgba(245, 158, 11, 0.1), border 1px solid rgba(245, 158, 11, 0.3), text #F59E0B.
• Failed / Action Required: Background rgba(244, 63, 94, 0.1), border 1px solid rgba(244, 63, 94, 0.3), text #F43F5E.
• Neutral / Draft: Background rgba(148, 163, 184, 0.1), border 1px solid #334155, text #94A3B8.

Panels & Containers (Bento Grids)

• Container Structure: Flat #182234 surface, framed by 1px solid #1E293B. No nested sub-cards. Sub-sections within a panel are divided with clean 1px hairline horizontal or vertical dividers (#1E293B).
• Headers: Separated by a 1px line, title in headline-sm with optional monospace index notation (01, 02).