UI Library
Visual reference for all components, patterns, and design tokens used in the Obelisk app.
Breadcrumb
.breadcrumb — page-level navigation trail. Use on a <div> (not <nav>, which picks up global padding). Built-in bottom margin — no manual mb* needed.
Content below the breadcrumb.
Section Label
.section-label — uppercase monospace label for card/box section headers, stat labels, and panel headings. Add mb3 for card headers, mb1 for stat labels, fg1 in flex rows.
Card section heading
General
Form fields and content go here.
Stat label
Work Spans
42
Panel header (flex row)
Tasks
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body text — Inter sans-serif. The quick brown fox jumps over the lazy dog. Bold text. Italic text. Link text.
Muted body text at 60% opacity for secondary information.
Small text (f6) for metadata, timestamps, and labels.
Monospace text — used for code, IDs, metadata labels, and buttons.
Buttons
Tags
Boxes (Containers)
.box — Standard padded container with border.
.box.is-narrow — Reduced padding.
.box.is-super-narrow — Minimal padding.
.box.is-notice — Notice/info state.
.box.is-warning — Warning/hold state.
.box.is-success — Success/active state.
.box.is-danger — Error/danger state.
Forms
Tables
| Name | Status | Created | Cost |
|---|---|---|---|
| Research Scribe | Active | Mar 4, 2026 | $4.17 |
| Content Writer | Waiting | Mar 3, 2026 | $2.50 |
| Data Analyst | Open | Mar 1, 2026 | $0.00 |
Stat Grid
.stat-grid — auto-fit tile layout for summary metrics. Inner cells use .box.is-narrow.ma0. Add .cols-3 for a fixed 3-column layout.
Work Spans
42
3 categories
Billed Minutes
1,284
rounded up to 2-min blocks
Estimated Cost
$21.40
at $1.00/hr
Tokens
84,921
all-time
Status Dot
.status-dot — animated pulse indicator for live/active states. Use .status-dot--warning or .status-dot--danger for other states.
Prose
.prose — pre-wrap text with word-break and line-height for displaying multi-line user content or AI output.
Flex Truncation (.min-w-0 / .flex-shrink-0)
In a flex row, add .min-w-0 to the growing column to allow text truncation. Add .flex-shrink-0 to the fixed-size column to prevent shrinking.
Very long scribe name that would overflow without min-w-0 applied to this container
Empty States
.scribe-empty-view with named .empty-image--* variants. No inline style= needed.
Nothing here yet.
Content will appear here once activity begins.
Hero variant with hat illustration:
No Scribes yet.
Deploy your first Scribe to get started.
Documentation Components
curl https://obelisk.li/api/v1/scribes \
-H "Authorization: Bearer sk_live_..." \
-d '{ "name": "Research agent" }'Accordion (Details)
Collapsed section title
Expanded content goes here. Uses native HTML <details> element with custom CSS arrow marker.
Open section title
This section starts open.
Design Tokens
| Variable | Description |
|---|---|
--font-size-base | Base font size (16px) |
--base-spacing | Base spacing unit (14px) |
--color-bg | Page background |
--color-text | Primary text |
--color-text-muted | Secondary/muted text |
--color-border | Border color |
--color-primary | Primary accent (#0a0a0a) |
--color-danger | Error/danger red |
--color-success | Success green |
--color-warning | Warning/hold amber |
--surface-subtle | Neutral background for cards/composers |
--button-radius | Button border radius (0px — hard edges) |
--box-radius | Box border radius (0px — hard edges) |
--font-stack-sans-serif | system-ui / SF Pro / Segoe UI — body text, Inter as fallback |
--font-stack-monospace | Roboto Mono — buttons, labels, metadata |
--font-stack-serif | Serif stack — used sparingly for editorial |
--shadow-sm / --shadow-md | Elevations for cards, dropdowns |
--tooltip-bg / --tooltip-text | Tooltip background + text |
--ss-primary-color | SlimSelect accent (matches primary) |
Progress Bars
CSS-only animated bars driven by the --duration custom property. No JavaScript required.