Dmitry Belan
264 lines
12 KiB
Markdown
264 lines
12 KiB
Markdown
---
|
|
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`). |