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