Open—Shape · Brand & Interface System
Soft.
A calm, tactile design language for a chord-and-tuning tool. One sage material, shaped by a single light. Nothing glows, nothing outlines — surfaces simply rise toward you or press away. Built for focus, craft, and quiet confidence.
Principles
One material, one light
Every element is molded from the same pale sage. Depth comes only from a single downward shade — never a white highlight, border, or ring. Restraint is the aesthetic.
State is physical
Resting elements float. Selected and pressed elements sink into the page — a darker fill with the shadow falling in from the top edge. You feel the choice, not just see it.
Monochrome, with intent
A near-monochromatic palette keeps the interface out of the way of the content — the chord diagrams. Solid black is reserved for the one thing that matters most on a screen: the primary action.
Quiet motion
Transitions are soft and short (~220ms), transform- and shadow-only. Motion confirms; it never performs. All of it yields to prefers-reduced-motion.
Color
A warm sage monochrome. Two surface tones do most of the work; ink handles all interaction. Contrast ratios are measured against the tone each color actually sits on.
All text pairings meet WCAG AA (4.5:1) or better. Because the theme is near-monochromatic, contrast lives in tone and elevation, not hue — so the shadow system below is doing real accessibility work, not just decoration.
Typography
One typeface, top to bottom: Switzer (Indian Type Foundry, via Fontshare). A neutral, contemporary grotesque — geometric enough to feel modern, humanist enough to stay warm. Headings run tight; labels run wide.
Elevation & Light
There is exactly one light source: a soft sage shade rgba(94,102,80,0.28) cast straight down. No white highlight, no ambient ring. Elevation = how far a surface floats. Pressed = the light falls inside from the top.
Interaction & State
The signature of the system. Hover for confirmation on the live examples — pressed and selected share one language: the element sinks into the page.
Components
Real, interactive examples — hover and click them.
Primary action
Solid ink stadium. One per view — the single most important thing to do. Presses down into its own shadow.
Secondary · ghost
Surface pill on a light shadow. Supporting actions. Sinks on press.
Choice pills
Single- or multi-select filters. Selected = pressed in, ink text. Try clicking.
Input
Carved into the surface, never outlined. Focus deepens the inset.
Chord tile
The core content object — a floating card holding a printed-style chord diagram. Hover to lift.
Diagram dots use Ink with the surface tone as the numeral, echoing the black tags. The whole tile is the primary tap target (play); small controls tuck into the header.
Product Showcase
The system at work — real screens from the app, not recreations.
Explore
Every voicing, in every tuning
Search the full fretboard for a chord in any built-in alternate tuning — or one you've named yourself. Filter results down to a specific note count, browse every voicing the engine finds, and preview each one instantly on real acoustic guitar samples.
Build
Progressions that play
Chain voicings into a progression, drag tiles to reorder, and hear it back strummed or picked with sample-accurate timing. Save what you build and pick it back up exactly where you left off.
Radius & Spacing
Spacing follows a soft 4-based rhythm — common steps: 6 8 10 12 16 18 24 26. Generous radii and open padding keep the interface feeling cushioned rather than boxed.
Motion
Timing
Micro-interactions run 180–250ms. Entrances (panels, tiles) run 400–550ms. Ease: cubic-bezier(0.25, 0.6, 0.3, 1) — a gentle settle, no bounce.
What moves
Only transform, box-shadow, opacity, color — GPU-cheap, never layout. The active chord tile breathes (a slow 2s lift). Everything honours prefers-reduced-motion.
Do & Don't
- Float surfaces with the single downward sage shadow.
- Show selected / pressed as a sunken, darker fill.
- Reserve solid ink for the one primary action.
- Keep hue out of it — depth carries the hierarchy.
- Let generous radii and padding breathe.
- Add white highlights, glows, or dual-light neumorphism.
- Outline or border elements to separate them.
- Introduce a second accent color or gradient fills.
- Use more than one primary (ink) button per view.
- Animate layout properties or add bouncy easing.
Token Reference
Copy-paste CSS custom properties, matching the app's [data-theme="soft"].
| Token | Value | Use |
|---|---|---|
--bg | #EAEEE1 | Page canvas |
--surface | #F3F7E8 | Cards, tiles, pills |
--pressed | #E2E6D8 | Sunken / selected / input fill |
--text | #0F0F0E | Headings, chord names |
--accent | #1A1A18 | Interactive ink (buttons) |
--text-dim | #4A4B44 | Body / secondary |
--text-faint | #696A62 | Labels, meta, placeholder |
--warn | #8A4B3A | Destructive / warning |
--ok | #5F7A4A | Success |
--shade | rgba(94,102,80,0.28) | The one light source |
--shadow-1 | 0 6px 14px -6px var(--shade) | Controls |
--shadow-2 | 0 12px 26px -12px var(--shade) | Tiles |
--shadow-3 | 0 20px 44px -20px var(--shade) | Panels |
--shadow-pressed | inset 0 3px 6px …/0.32, inset 0 1px 2px …/0.28 | Sunken state |
--font | 'Switzer', sans-serif | Everything |
--tracking-display | -0.02em | Headings |
--tracking-label | 0.14em | Uppercase labels |
--r-pill | 999px | Buttons, pills, inputs |
--r-card | 20px | Tiles, cards |
--r-panel | 26px | Panels |
--ease | cubic-bezier(0.25,0.6,0.3,1) | Default easing |
Open—Shape — “Soft” design system · Typeface: Switzer by Indian Type Foundry (Fontshare) · This document is styled in the system it describes.