Expression
UI components
The interface layer of the brand. Soft radii on containers, sharp corners reserved for the Uptick. Buttons are verbs, cyan is used once per view, and dark mode leans on surface steps instead of shadows.
Buttons
DM Sans 500, 16px, radius 10px, padding 12px 24px. Transition 150ms ease. Focus shows a 2px cyan-500 ring offset 2px.
| Variant | Default | Hover | Use |
|---|---|---|---|
| Primary | ink-900 bg, Paper text | ink-800 bg | Main action. One per view |
| Accent | cyan-500 bg, ink-900 text | cyan-300 bg | High-emphasis CTAs. Use sparingly |
| Secondary | Transparent, 1.5px ink-300 border | ink-50 bg, ink-900 border | Supporting actions |
| Ghost | Transparent, cyan-800 text | cyan-50 bg | Tertiary, inline actions |
| Destructive | error bg, white text | darken 8% | Delete, cancel plans |
Dark mode: Primary inverts to Paper bg with ink-900 text. Accent stays identical because it already works on dark.
Links
Light mode cyan-800 at rest, cyan-900 on hover. Dark mode cyan-500 at rest, cyan-300 on hover. In-paragraph links are always underlined.
Every location gets its own reporting view, and the shared dashboard rolls them into one number. Standalone links such as View the method carry no underline at rest.
Forms
Inputs: 1.5px ink-200 border, radius 6px, 12px 14px padding, DM Sans 16px. Focus turns the border cyan-600 with a soft cyan ring. Errors never rely on color alone.
Cards
Surface white (dark: ink-900), radius 10px, shadow-md, 24px padding, 1px ink-100 border. Feature cards may carry a single Uptick corner accent.
Step 01
Diagnose
We read the P&L, the funnel and the calendar per location before anything ships.
Feature card
Own the number
Dark surfaces step from ink-950 to ink-900 to ink-800. No shadows in dark mode.
Badges and tags
Caption type, 4px 10px padding. Pills for status, radius-sm for category tags.
Spacing
4px base unit. Max content width 1200px, 24px gutters, 12 columns on desktop and 4 on mobile.
Shape and elevation
The Uptick is square, the letterforms are round, so the system splits the difference: soft radii on containers, sharp corners reserved for the brand mark. Dark mode drops shadows for surface steps.
Inputs, tags, small elements
Buttons, cards
Modals, feature cards, images
Uptick motif elements only
Inputs, subtle lift
Cards
Modals, popovers
Motion
Fast and unfussy. Hover the tiles to feel each duration. Reduced motion drops everything to opacity.
150ms ease-out
Hovers and small state changes
250ms ease-in-out
Panels and modals
400ms max
The ceiling for anything on screen
Voice in the interface
Interface copy follows the brand voice: direct, confident, zero corporate filler.
Write
- Start the audit
- See your location breakdown
- No locations yet. Add your first one to start reporting.
Not this
- Submit
- Click here to learn more
- Oops! Nothing to see here!