Obsidian Protocol — Design SystemLegacy format
Kleros arbitration-protocol interface. Dark-mode only. Data-dense. Every pixel justified.
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Kleros arbitration-protocol interface. Dark-mode only. Data-dense. Every pixel justified.
Components
Buttons
Inputs
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Chips
Elevation & Depth
Do's & Don'ts
Do
Don't
1. Foundations
Aesthetic DNA
• JARVIS HUD — structured overlays, thin geometric lines, layered translucency.
• Bloomberg terminal — data-first, information-dense, zero decorative waste.
• Kleros purple (#4D00B4) threaded through like a nerve — felt, never shouted.
Hard rules
• Dark mode exclusively. No light theme, no toggle.
• Glass (backdrop-blur) is surgical — navigation and elevated overlay panels only. Max 2 blurred layers visible at once.
• No heavy gradients, no neon glow, no colored drop shadows. Depth comes from layered opacity and border luminance.
• Corner radii: 16–20px cards, 12px interactive controls, 8px badges/chips.
• All motion uses spring physics. No linear, no ease-in-out. Every transition < 300ms perceived.
• Mobile-first. Touch targets ≥ 44px.
---
2. Color
A four-tier surface hierarchy creates depth without shadows — each tier adds ~6 lightness points to a near-black base with a faint blue-violet undertone.
### Backgrounds
| Token | Value | Role |
|---|---|---|
| --void | #06060C | App shell, html/body |
| --base | #0C0C14 | Page content area |
| --surface | #12121E | Cards, panels |
| --raised | #1A1A2E | Popovers, dropdowns, tooltips |
### Glass tints
| Token | Value | Role |
|---|---|---|
| --glass-3 | rgba(255,255,255,0.03) | Default glass tint |
| --glass-5 | rgba(255,255,255,0.05) | Hover glass tint |
| --glass-8 | rgba(255,255,255,0.08) | Active / pressed glass |
| --glass-12 | rgba(255,255,255,0.12) | Strong emphasis glass |
### Borders
| Token | Value | Role |
|---|---|---|
| --border-subtle | rgba(255,255,255,0.06) | Default borders |
| --border-medium | rgba(255,255,255,0.10) | Hover, focus-visible |
| --border-strong | rgba(255,255,255,0.16) | Active, selected |
| --border-accent | rgba(77,0,180,0.40) | Accent highlight |
### Accent — Kleros Purple
| Token | Value | Role |
|---|---|---|
| --accent | #4D00B4 | Primary interactive |
| --accent-hover | #5E17C8 | Hover state |
| --accent-light | #7B3FE4 | Light variant |
| --accent-muted | rgba(77,0,180,0.15) | Focus rings, selected-row bg |
| --accent-subtle | rgba(77,0,180,0.08) | Faint accent tint |
### Text
| Token | Value | Role |
|---|---|---|
| --text-primary | rgba(255,255,255,0.92) | Headings, primary content |
| --text-secondary | rgba(255,255,255,0.56) | Labels, secondary content |
| --text-tertiary | rgba(255,255,255,0.32) | Placeholders, disabled |
| --text-accent | #9D6FED | Links, accent text |
| --text-on-accent | #FFFFFF | Text on accent backgrounds |
### Semantic
| Token | Value | Muted background |
|---|---|---|
| --success | #00C48C | rgba(0,196,140,0.12) |
| --warning | #FFB547 | rgba(255,181,71,0.12) |
| --error | #FF4757 | rgba(255,71,87,0.12) |
| --info | #3B82F6 | rgba(59,130,246,0.12) |
---
7. Motion
Spring physics only. Two purposes: hierarchy (what appeared/changed) and feedback (what I interacted with). No decorative or ambient motion except the Skeleton pulse.
### Spring presets (stiffness / damping / mass)
| Preset | Config | Use |
|---|---|---|
| springSnappy | 500 / 30 / 1 | Buttons, toggles, small interactions |
| springDefault | 400 / 28 / 1 | Cards, panels, most elements |
| springGentle | 300 / 30 / 1 | Page transitions, large movements |
| springHeavy | 280 / 26 / 1.2 | Modals, sheets, overlay entrances |
### Behaviors
• Tap: scale 0.97 on press (snappy).
• Hover lift: y: -3px on hoverable cards (default).
• Page enter: opacity 0→1, y 12→0, blur(4px)→0 (gentle).
• Stagger: grid children staggerChildren: 0.06s, each rises y 20→0 + scale 0.98→1.
• Modal: overlay fades; content scale 0.96→1, y 8→0 (heavy).
• Reduced motion: prefers-reduced-motion disables all springs, leaving opacity only; Skeleton pulse stops.
### CSS easing equivalents (when not using a spring engine)
--ease-snappy: cubic-bezier(.25,.46,.45,.94) · --ease-spring: cubic-bezier(.34,1.56,.64,1) · --ease-settle: cubic-bezier(.22,1,.36,1) · --ease-out: cubic-bezier(.16,1,.3,1)
---
9. Principles
Surface hierarchy — void → base → surface → raised → overlay. Never skip a level: a card sits on surface, a popover on raised.
Glass restraint — backdrop-blur only on navbars, sheets, overlay panels, and the glass Card/GlassPanel variants. Max 2 blurred layers visible at once; an overlay above glass goes solid.
Accent discipline — purple appears on primary CTAs, focus rings, active tab indicators, progress fills, checked states, and interactive hover borders. It is never a large background fill, body-text color, non-interactive border, or high-opacity shadow.
Data density — embrace Bloomberg density on data screens: mono numbers, 48px rows, minimal whitespace, text-sm as the default data size, wide scrollable tables over truncation.
Motion budget — every animation < 300ms perceived, spring only, serving hierarchy or feedback. No decorative motion beyond the Skeleton pulse; reduced-motion leaves opacity transitions only.
Touch targets — ≥ 44×44px on mobile even when visually smaller; expand hit area with transparent padding.
Accessibility — focus-visible rings on every interactive element; text-primary on surface ≈ 13:1 contrast; keyboard paths for Modal, Sheet, Select, Tabs.
Use with MCP
Don't have the MCP? Install it here