--- version: alpha name: Obsidian OS description: Warm-stone institutional fintech — Ivory display serif paired with Inter body, a near-black stone canvas on near-white paper, a single molten-orange accent (#ff5701), and a full base/primary spectrum (blue/green/orange/purple) reserved for data and status, all on soft stone neutrals. colors: # Canvas + ink background: "#fafaf9" surface: "#ffffff" surface-soft: "#f5f5f4" ink: "#0c0a09" ink-display: "#1c1917" ink-pure: "#000000" # Accent — molten orange, the single brand color primary: "#ff5701" primary-strong: "#c1530d" on-primary: "#fafaf9" # Foreground scale (warm stone) foreground: "#0c0a09" foreground-muted: "#78716c" foreground-faint: "#71717a" # Stone neutral scale stone-50: "#fafaf9" stone-100: "#f5f5f4" stone-200: "#e7e5e4" stone-400: "#a8a29e" stone-500: "#78716c" stone-700: "#44403c" stone-800: "#292524" stone-900: "#1c1917" # Borders + inputs border: "#e7e5e4" border-subtle: "#f5f5f4" input: "#f5f5f4" # Card card: "#ffffff" card-foreground: "#0c0a09" # Muted surfaces muted: "#fafaf9" muted-foreground: "#78716c" # Accent surface (subtle) accent: "#f5f5f4" accent-foreground: "#1c1917" # Data / status spectrum (light-theme primaries) data-blue: "#0094cc" data-green: "#2c701b" data-orange: "#ff5701" data-purple: "#8e40dd" data-red: "#f23e8c" data-cyan: "#2dc5c5" data-yellow: "#ffc940" # Base tints (faint status surfaces) base-blue: "#f0faff" base-green: "#effce9" base-orange: "#fff7ec" base-purple: "#faf6fe" base-red: "#fff1f1" # Destructive destructive: "#ef4444" on-destructive: "#fafaf9" typography: display-hero: fontFamily: "IvoryLLWeb-Light, Georgia, serif" fontSize: 56px fontWeight: 300 lineHeight: 1.05 letterSpacing: -1.12px display: fontFamily: "IvoryLLWeb-Light, Georgia, serif" fontSize: 40px fontWeight: 300 lineHeight: 1.10 letterSpacing: -0.8px section-heading: fontFamily: "IvoryLLWeb-Light, Georgia, serif" fontSize: 32px fontWeight: 300 lineHeight: 1.15 letterSpacing: -0.64px card-title: fontFamily: "Inter Variable, Inter, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 1.30 letterSpacing: -0.4px body-large: fontFamily: "Inter Variable, Inter, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.60 letterSpacing: 0px body: fontFamily: "Inter Variable, Inter, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0px body-medium: fontFamily: "Inter Variable, Inter, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.50 letterSpacing: 0px body-small: fontFamily: "Inter Variable, Inter, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0px button-ui: fontFamily: "Inter Variable, Inter, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.20 letterSpacing: 0px label: fontFamily: "Inter Variable, Inter, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.30 letterSpacing: 0px caption: fontFamily: "Inter Variable, Inter, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.35 letterSpacing: 0.2px mono-label: fontFamily: "var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace" fontSize: 12px fontWeight: 500 lineHeight: 1.30 letterSpacing: 0.4px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 40px 3xl: 64px 4xl: 96px rounded: none: 0px micro: 2px xs: 4px sm: 6px md: 8px lg: 12px xl: 20px pill: 9999px components: # Primary CTA — molten orange button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 10px 20px button-primary-hover: backgroundColor: "{colors.primary-strong}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 10px 20px # Dark CTA — stone ink button-dark: backgroundColor: "{colors.ink}" textColor: "{colors.surface}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 10px 20px # Secondary — paper with stone border button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.foreground}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 10px 20px borderColor: "{colors.border}" button-secondary-hover: backgroundColor: "{colors.surface-soft}" textColor: "{colors.foreground}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 10px 20px borderColor: "{colors.border}" # Ghost / nav link button-ghost: backgroundColor: "{colors.surface}" textColor: "{colors.foreground-muted}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 8px 12px # Pill badge — subtle stone badge: backgroundColor: "{colors.surface-soft}" textColor: "{colors.foreground-muted}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 2px 10px # Status badge — orange accent surface badge-accent: backgroundColor: "{colors.base-orange}" textColor: "{colors.primary-strong}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 2px 10px # Standard card — paper on stone card: backgroundColor: "{colors.card}" textColor: "{colors.card-foreground}" rounded: "{rounded.lg}" padding: 24px borderColor: "{colors.border}" # Muted panel card-muted: backgroundColor: "{colors.muted}" textColor: "{colors.foreground}" rounded: "{rounded.lg}" padding: 24px borderColor: "{colors.border-subtle}" # Input input: backgroundColor: "{colors.input}" textColor: "{colors.foreground}" typography: "{typography.body-small}" rounded: "{rounded.md}" padding: 10px 12px borderColor: "{colors.border}" input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.foreground}" rounded: "{rounded.md}" borderColor: "{colors.primary}" # Top nav bar nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.foreground}" typography: "{typography.button-ui}" padding: 16px 24px borderColor: "{colors.border}" # Eyebrow / mono technical label eyebrow: textColor: "{colors.foreground-muted}" typography: "{typography.mono-label}" --- # Obsidian OS Design System ## Overview Obsidian OS dresses institutional wealth infrastructure in a quiet, gallery-grade warmth. The canvas is a soft warm-white stone paper (`{colors.background}`) — never pure white in the body — set against near-black stone ink (`{colors.ink}`). The palette is built entirely on the warm stone family rather than cool grays: every neutral carries a faint earthen undertone, which gives the product the feel of polished concrete and natural materials rather than the cold clinical blue most fintech reaches for. The decorative "stone" motifs flanking the hero make the metaphor literal. The typographic signature is the pairing of **Ivory** (a light-weight display serif, `IvoryLLWeb-Light`) for headlines against **Inter** for everything functional. Ivory at weight 300 gives headings an editorial, almost literary restraint — thin, high-contrast strokes that read as serious and considered, the voice of a private bank rather than a startup. Inter handles body, UI, labels, and data, keeping the working surface crisp and legible. This serif-display / sans-body split is the core move: it lets the brand feel handcrafted at the headline level and engineered at the interface level. Color is functional and rationed. A single molten orange (`{colors.primary}`, #ff5701) is the brand accent — it appears on primary CTAs and key emphasis, never decoratively. Beyond it sits a full data spectrum (blue, green, orange, purple, red, cyan, yellow) reserved strictly for charts, status, and categorical encoding, each with a matching faint "base" tint surface for badges and callouts. Chrome stays achromatic stone; color means something. **Key Characteristics:** - Warm stone neutral scale (not cool gray) — paper-white canvas, earthen undertones throughout - Ivory light serif (weight 300) for display headlines, Inter for all body and UI - Single molten-orange accent (`{colors.primary}`) for primary action, used sparingly - Full data spectrum (blue/green/orange/purple/red/cyan/yellow) reserved for charts and status only - Faint "base" tint surfaces (`{colors.base-orange}`, `{colors.base-blue}`…) for status badges - Soft moderate radii (8–12px on cards/buttons, full pill on badges) - Hairline stone borders (`{colors.border}`) instead of shadows for separation - Dual-mode system (light/dark) — this spec captures the light theme ## Colors ### Primary - **Stone Ink** (`{colors.ink}`): Primary text, headings, dark CTAs. Near-black with a warm undertone. - **Stone Paper** (`{colors.background}`): Page background — warm off-white, never pure white. - **Paper White** (`{colors.surface}`): Card surfaces, input focus, raised panels. - **Molten Orange** (`{colors.primary}`): The single brand accent — primary CTAs and emphasis only. ### Foreground Scale - **Foreground** (`{colors.foreground}`): Body and heading text. - **Foreground Muted** (`{colors.foreground-muted}`): Secondary copy, captions, nav links. - **Foreground Faint** (`{colors.foreground-faint}`): Tertiary / disabled text. ### Stone Neutral Scale - **Stone 50** (`{colors.stone-50}`): Canvas, subtle tint. - **Stone 100** (`{colors.stone-100}`): Soft surface, input fill, accent surface. - **Stone 200** (`{colors.stone-200}`): Borders, dividers. - **Stone 400** (`{colors.stone-400}`): Placeholder, muted icons. - **Stone 500** (`{colors.stone-500}`): Muted text. - **Stone 700** (`{colors.stone-700}`): Strong secondary ink. - **Stone 800** (`{colors.stone-800}`): Near-ink emphasis. - **Stone 900** (`{colors.stone-900}`): Display heading ink. ### Borders & Surfaces - **Border** (`{colors.border}`): Card outlines, hairline dividers. - **Border Subtle** (`{colors.border-subtle}`): Faint internal dividers. - **Card** (`{colors.card}`): Paper-white card surface. - **Muted** (`{colors.muted}`): Recessed panels. ### Data / Status Spectrum - **Data Blue** (`{colors.data-blue}`): Charts, info status. - **Data Green** (`{colors.data-green}`): Positive / gains. - **Data Orange** (`{colors.data-orange}`): Brand-aligned series. - **Data Purple** (`{colors.data-purple}`): Categorical series. - **Data Red** (`{colors.data-red}`): Negative / loss. - **Data Cyan** (`{colors.data-cyan}`): Categorical series. - **Data Yellow** (`{colors.data-yellow}`): Warning / pending. ### Base Tint Surfaces - **Base Orange** (`{colors.base-orange}`): Accent badge / callout background. - **Base Blue** (`{colors.base-blue}`): Info callout background. - **Base Green** (`{colors.base-green}`): Success callout background. - **Base Red** (`{colors.base-red}`): Error callout background. - **Base Purple** (`{colors.base-purple}`): Categorical callout background. ## Typography ### Font Family - **Display**: `IvoryLLWeb-Light` (light serif, weight 300), fallback `Georgia, serif` - **Body / UI**: `Inter Variable`, fallback `Inter, sans-serif` - **Mono**: system mono stack via `var(--font-mono)` for technical labels ### Hierarchy The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.). | Token | Use | |---|---| | `display-hero` | 56px Ivory serif hero — editorial headline impact | | `display` | 40px Ivory serif — major section openers | | `section-heading` | 32px Ivory serif — section titles | | `card-title` | 20px Inter 600 — card and feature headings | | `body-large` | 18px Inter — introductions, lead copy | | `body` | 16px Inter — standard reading text | | `body-medium` | 16px Inter 500 — emphasized body | | `body-small` | 14px Inter — dense UI text | | `button-ui` | 14px Inter 500 — buttons, nav | | `label` | 13px Inter 500 — form labels | | `caption` | 12px Inter 500 — metadata, badges | | `mono-label` | 12px mono — technical eyebrows | ### Principles - **Serif headline, sans interface**: Ivory weight 300 carries all editorial display; Inter carries all functional text. Never mix the roles. - **Light display weight**: headlines run light (300), not bold — restraint signals institutional seriousness. - **Inter for data**: numbers, tables, and UI stay in Inter for legibility and tabular clarity. - **Mono for eyebrows**: small uppercase-feeling mono labels mark technical/section context. ## Layout ### Spacing System The complete scale lives in the `spacing:` token block above. Base unit is 8px with comfortable jumps to 24/40/64/96 for section rhythm. ### Grid & Container - Max content width: ~1200px, centered - Hero: editorial single column with flanking decorative stone elements - Feature sections: 2–3 column card grids - Logo trust bar: BlackRock, Revolut, JPMorgan Chase, Wise, Parmenion in stone grayscale ### Whitespace Philosophy - **Quiet generosity**: large vertical padding (`{spacing.3xl}`–`{spacing.4xl}`) between sections. - **Hairlines over shadows**: separation comes from `{colors.border}` rules, not elevation. - **Material warmth**: stone tints and decorative stone imagery reinforce the polished-material identity. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No border | Page background, text blocks | | Hairline (Level 1) | `1px solid {colors.border}` | Cards, panels, nav bottom | | Subtle (Level 2) | Hairline + soft stone shadow | Raised cards, popovers | | Focus | `2px solid {colors.primary}` ring | Keyboard focus on interactive elements | **Shadow Philosophy**: Obsidian leans on hairline stone borders rather than heavy elevation. Where shadow appears it's whisper-soft and warm-tinted, supporting the polished-material feel without breaking the gallery calm. ## Shapes | Token | Value | Use | |---|---|---| | `none` | 0px | Full-bleed sections | | `micro` | 2px | Inline chips, tiny markers | | `xs` | 4px | Small controls | | `sm` | 6px | Ghost buttons, links | | `md` | 8px | Buttons, inputs | | `lg` | 12px | Cards, panels | | `xl` | 20px | Large feature containers | | `pill` | 9999px | Badges, status pills | ## Components The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`). ### Buttons - **`button-primary`** — Molten orange fill, paper text, `{rounded.md}`. The single brand CTA. - **`button-dark`** — Stone ink fill for high-contrast secondary actions. - **`button-secondary`** — Paper surface with `{colors.border}` hairline. - **`button-ghost`** — Transparent, muted text — nav and tertiary actions. ### Pills & Badges - **`badge`** — Soft stone surface, muted text, full pill. - **`badge-accent`** — Faint orange (`{colors.base-orange}`) surface with strong-orange text. ### Cards - **`card`** — Paper white, hairline stone border, 12px radius. - **`card-muted`** — Recessed stone panel for secondary content. ### Inputs - **`input`** — Stone fill, hairline border. Focus shifts to paper with `{colors.primary}` ring. ### Navigation - **`nav-bar`** — Stone canvas, Inter 14px links, hairline bottom border, orange CTA right. ### Distinctive Components - **Data spectrum**: charts encode categories with the seven-color data palette; each pairs with a faint base tint surface for legends and badges. - **Editorial hero**: Ivory serif headline flanked by decorative stone imagery — the material-warmth signature. - **Trust bar**: institutional client logos (BlackRock, JPMorgan Chase, Wise) in stone grayscale. ## Do's and Don'ts ### Do - Use the warm stone neutral scale — every gray carries an earthen undertone - Pair Ivory light serif for headlines with Inter for all UI and body - Keep display headlines light (weight 300), not bold - Reserve molten orange (`{colors.primary}`) for primary action and key emphasis - Use the data spectrum strictly for charts, status, and categorical encoding - Separate with hairline `{colors.border}` rules, not heavy shadows - Use faint base tint surfaces for status badges and callouts ### Don't - Don't use pure white (`#ffffff`) for the page canvas — use stone paper `{colors.background}` - Don't introduce cool blue-grays — the system is warm stone throughout - Don't bold the Ivory display serif — light weight is the identity - Don't scatter the data colors as decoration — they carry meaning - Don't use molten orange for body text or large fills — it's an accent - Don't lean on heavy drop shadows — hairlines do the separating --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <640px | Single column, dedicated mobile hero asset, stacked layout | | Tablet | 640–1024px | 2-column grids, expanded padding | | Desktop | 1024–1280px | Full multi-column layout | | Large Desktop | >1280px | Centered, generous stone margins | ### Touch Targets - Buttons use 10px vertical padding for comfortable tap targets - Nav links at 14px with adequate spacing - Badges have 10px horizontal padding ### Collapsing Strategy - Hero swaps to a dedicated mobile asset (`home-hero-mobile`) - Navigation collapses to a menu toggle - Feature cards: 3-column → 2-column → single column - Trust bar logos: grid → wrap / horizontal scroll - Section spacing: 96px → ~48px on mobile ### Image Behavior - Decorative stone elements simplify or hide on mobile - Hero art uses responsive sources at consistent treatment - Product imagery maintains hairline border framing at all sizes --- ## Agent Prompt Guide ### Quick Color Reference - Primary CTA: Molten Orange `{colors.primary}` - Background: Stone Paper `{colors.background}` - Card surface: Paper White `{colors.surface}` - Heading text: Stone Ink `{colors.ink}` in Ivory serif - Body text: Foreground Muted `{colors.foreground-muted}` in Inter - Border: `1px solid {colors.border}` - Focus ring: Molten Orange `{colors.primary}` ### Example Component Prompts - "Create an editorial hero on warm stone paper (`{colors.background}`). Headline at 56px Ivory serif weight 300, line-height 1.05, letter-spacing -1.12px, color `{colors.ink}`. Subtitle at 18px Inter weight 400, color `{colors.foreground-muted}`. Molten-orange primary CTA (`{colors.primary}`, 8px radius, 10px 20px padding) and a paper secondary button with `{colors.border}` hairline." - "Design a card: paper-white background (`{colors.surface}`), 1px solid `{colors.border}`, 12px radius, 24px padding. Title at 20px Inter weight 600. Body at 16px Inter, `{colors.foreground-muted}`." - "Build a status badge: `{colors.base-orange}` background, `{colors.primary-strong}` text, full pill radius, 2px 10px padding, 12px Inter weight 500." - "Create a data chart legend using the spectrum: blue `{colors.data-blue}`, green `{colors.data-green}`, purple `{colors.data-purple}`, each with a faint base tint surface behind its label." ### Iteration Guide 1. Canvas is warm stone paper, never pure white — keep the earthen undertone 2. Ivory light serif announces; Inter does all the working text 3. One brand color (molten orange) for action; the data spectrum for meaning only 4. Separate with hairline stone borders, not shadows 5. Headlines stay light weight (300) — restraint is the institutional signal --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Obsidian OS. Brand names and trademarks belong to their respective owners.