One system, three surfaces.

Tokens flow downhill

Colors, dimensions, type, and motion live in a single source module. A zero-dependency generator expands the nine brand anchors into tonal ramps, verifies every semantic pairing against a WCAG contrast contract, and emits one artifact per platform. Nothing downstream is hand-edited.

Logo & lockups

The mark is a ristra — four chilies strung together, one per household member pulling the same list. It hangs on one of two brand fields: sand in light contexts, earth in dark ones. Variant names describe the ink, not the background: use the light-ink files on earth, the dark-ink files on sand.

Full-color lockups

logo-color-dark.svg — on sand / light surfaces

logo-color-light.svg — on earth / dark surfaces

Monochrome lockups

For single-color contexts: embossing, watermarks, partner co-branding, or anywhere the full palette would fight the surrounding design.

logo-dark.svg — earth ink on light

logo-light.svg — sand ink on dark

logo-bright.svg — sweet ink, high-energy moments

Icon tiles & bare mark

icon-light.svg — light-mode tile

icon-dark.svg — dark-mode tile

mark-full.svg — transparent, either field

Wordmark & tagline

Two display faces, two jobs, and they never trade. Solitreo sets the wordmark — and only the wordmark. Jua sets the tagline and short display moments on marketing surfaces. Neither ever sets body copy; body and UI text are always the native system stack.

wordmark.svg — Solitreo, outlined, turquoise-500

tagline.svg — Jua, outlined, sand

Live specimens

--font-display: 'Solitreo' · --font-tagline: 'Jua' · webfonts are Latin-subset woff2 (~16–22 KB)

Clearspace & minimum sizes

Give the ristra room to hang. Keep a clearspace of one chili-height (¼ of the mark's height) on all sides of any lockup, and never let other elements cross it.

Don'ts

• Don't recolor the chilies outside the four brand body colors.
• Don't set the wordmark in any face but Solitreo, or the tagline in any face but Jua.
• Don't place the dark-ink lockups on earth, or light-ink lockups on sand.
• Don't rotate, outline, shadow, or add effects to any lockup.
• Don't use the app-icon glass palette in UI or marketing surfaces.

Color

Nine brand anchors — the four chili bodies, the stem, the two fields, and the two wordmark turquoises — expand into seven tonal ramps. Anchors are brand and illustration colors; interface color always comes from the semantic tokens, which are locked to contrast-safe ramp steps by a generator-enforced WCAG contract.

Brand anchors

Values are verbatim from the Figma brand file and the SVG assets. Anchors flagged brand only fail AA as text on their field — use their ramp's deeper steps in UI instead. Click any swatch to copy its hex.

Tonal ramps

Twelve steps per ramp, 50→975, built on an OKLCH lightness ladder. The dot marks the step where the brand anchor survives verbatim. The earth ramp doubles as the warm-neutral ladder: sand sits at 100, earth at 950, and every surface, border, and text tone between them is brand-derived. The 975 near-black exists for dark-mode backgrounds — in dark themes, cards sit at earth-950 (the brand field) on an earth-975 page.

Semantic tokens

The interface vocabulary. Names match the web app's existing custom properties; iOS mirrors them in Theme.swift. Live values below follow the page theme — flip the toggle up top and watch them re-resolve.

Contrast, proven live

Each card renders its actual token pair and computes the WCAG ratio in your browser. The generator enforces these same minimums at build time — a failing pair can't ship.

Light theme

Dark theme

Typography

Body and UI text is always the platform's native stack — SF on Apple platforms, Roboto territory on Android later. Zero font payload in product surfaces; the two brand faces appear only where the brand rules allow.

Spacing & layout

A twelve-step scale. New work uses the tokens; legacy literal paddings map to the nearest step during migration. Content columns wrap at 1080px; the app respects device safe areas via the --safe-* insets.

Radius & elevation

Soft, but not bubbly: 14px on cards, sheets, and containers; 9px on inputs and nested elements; full-round on pills and buttons. Elevation is one gentle earth-tinted shadow — Ristra surfaces are separated by tone and hairline borders more than by depth.

Motion

Quick and settled — checks tick, sheets glide, nothing bounces. Three durations, two curves. Click a chip to play its timing.

Always honor prefers-reduced-motion: replace movement with opacity, or skip the animation entirely.

Iconography

Two icon systems, split by platform on purpose. The web app bundles Font Awesome from a license-gated kit — Jelly Duo duotone for UI chrome, Pro solid for department glyphs (Jelly Duo has no food icons; the mix is deliberate). iOS uses SF Symbols exclusively, per the Liquid Glass rules. Icons are not bundled on this public page.

Departments

The aisle taxonomy is shared verbatim across platforms — the iOS copies are generated from the web source (src/lib/, via gen-data.mjs), so both clients categorize identically. Department headers render muted with a solid glyph; departments never get their own accent colors.

Buttons

Pill-shaped, terra accent, white label. One primary action per view; secondary actions get the outline; tertiary actions go quiet in link turquoise.

.rs-btn · --accent / --on-accent · hover → --accent-strong · Svelte: components with .btn · SwiftUI: .buttonStyle with Color.accent tint

Inputs & forms

Quiet fields on surface with hairline borders; focus rings in title turquoise. 16px minimum font size, always.

.rs-input · --surface / --border · focus → --title · placeholder → --text-faint

Pills & chips

Pills carry passive metadata on the sand tone; status chips speak the three item states in their status colors.

.rs-pill · --pill-bg · .rs-chip--incart/bought/unavailable · --status-*

Toggles

Segmented controls ride the sunken tone with the active segment lifted to surface — the theme picker in app settings is the canonical instance.

.rs-seg · --surface-sunken track, --surface active · iOS: native segmented Picker

List item row

The flagship component — the row a household touches a hundred times a week. Four states: to buy, in cart (turquoise), bought (struck, faint), unavailable (ochre). The check circle is the primary touch target at 26px minimum.

.rs-item · states via --status-incart / --status-bought / --status-unavailable · Svelte: ItemRow.svelte · SwiftUI: ItemRowView

Department section

Items group under muted, small-caps department headers ordered by the active store's aisle walk. Headers are wayfinding, not content — they stay quiet.

.rs-dept · --text-muted on --bg · Svelte: DepartmentSection.svelte · SwiftUI: section headers in ListDetailView

Cards & sheets

Cards sit on surface with the standard radius and shadow. Sheets slide from the bottom edge with a grab handle — the edit-item flow is the canonical instance.

.rs-card / .rs-sheet · --surface, --radius, --shadow · Svelte: EditItemSheet.svelte · SwiftUI: .sheet with detents

Banners

The live-trip banner rides the sage set with a pulsing dot while a household member shops. The offline banner stays neutral on the sunken tone.

.rs-banner--trip · --trip-wash/border/text/dot · Svelte: trip banner in ListView · SwiftUI: TripPulseDot + banner

App shell

Header on surface, scrolling list on bg, composer pinned to the bottom above the safe area. The quick-add composer is always one thumb away.

Pattern: header --surface · list --bg · composer --surface + --safe-bottom

Marketing hero

Marketing surfaces lead dark: the earth field, the light-ink color lockup, sand copy, and a single terra call-to-action. The hero at the top of this page is the live specimen.

Tokens & downloads

Everything on this page is generated from one source module. Regenerate with node scripts/gen-tokens.mjs — the contrast contract runs on every build and refuses to emit failing tokens.

Ristra · a Longbrook Studio project · getristra.com · app.getristra.com