Scarf Design System

A native macOS & iOS companion for the Hermes AI agent — calm, confident, and rust-warm. This site documents the palette, type, components, and screens.

UI Kit

Interactive macOS app

Click through every screen — Dashboard, Sessions, Insights, Projects, Chat, Settings, Tools, MCP servers, Cron, Logs, Memory, Activity, Health and more. Faithful to the real Scarf macOS app, with a working sidebar and the rust palette throughout.

Open the kit
Tokens & components

Foundations

Each tile opens a single design-system card. They're sized for ~700px wide and render one concept at a time.

Color

Brand — amber → rust

The 9-step rust ramp. Primary accent is #C25A2A.

Color

Warm neutrals

Slight amber undertone — never cool grey. 11 steps for surfaces and text.

Color

Semantic palette

Success, danger, warning, info — preserved from system conventions.

Color

Tool-kind palette

Bash, edit, search, web, think — the per-tool decorations in chat.

Type

Display scale

Large titles & headlines — SF Pro Display, tight tracking.

Type

Body scale

14px base, the working text of the app.

Type

Mono

SF Mono — for transcripts, paths, command output.

Layout

Spacing scale

4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 — that's the whole grid.

Layout

Radii

4 / 6 / 8 / 12 / 14 / pill — tuned for native macOS controls.

Layout

Shadows

Four elevation tiers, all on a warm-black tint.

Brand

Iconography

Lucide icons at 16/18/20/24, 1.6px stroke, currentColor.

Brand

App mark

The flowing-silk icon — preferred backgrounds & minimum sizes.

Components

Composable pieces lifted directly from the macOS app's surfaces.

Component

Buttons

Primary / secondary / ghost / destructive — three sizes each.

Component

Forms

Text fields, toggles, selects — with focus & error states.

Component

Sidebar

Section headers, items, active state, count pills.

Component

Stat cards

Number-forward dashboard tiles.

Component

Status cards

Connection / health / run cards with semantic dots.

Component

Chat bubbles

User & agent rich messages, avatars, timestamps.

Component

Composer

Multiline input with attachments & tool toggles.

Component

Tool-call card

Inline transcript card showing what the agent did.