🎨 Design System Overview
AceSense Brand Book v0.3: a flat premium-dark system with one disciplined lime accent.
:::tip Source of truth
Use acesense-brand/tokens/ for shared values and
acesense-frontend/lib/ds/ for the Flutter implementation. Do not copy values
from screenshots or older v0.2 docs.
:::
Principles
- Build depth with the ink ramp and hairline borders, not glass or glow.
- Use lime for the primary action or signal, normally once per view.
- Use warm off-white for primary text and preserve strong contrast.
- Prefer short physical transitions; respect reduced-motion settings.
- Reuse a token or component before adding a one-off value.
Color
| Role | Token | Value |
|---|---|---|
| App background | --ink-900 / --bg | #08090A |
| Surface | --ink-800 / --surface | #191B20 |
| Nested/hover surface | --ink-775 / --surface-2 | #1B1E22 |
| Border | --border | #252830 |
| Primary accent | --lime | #CCFF00 |
| Secondary lime signal | --lime-soft | #A8D400 |
| Primary text | --text-primary | #FBFAF6 |
| Muted text | --text-muted | #B9BCC4 |
| Faint text | --text-faint | #8A8F98 |
| Danger | --danger | #FF5C5C |
| Warning | --warning | #FFC857 |
The wider ink ramp is 950, 900, 875, 850, 825, 800, 775,
725, and 700. The canonical JSON also defines lime fills and borders with
their alpha values.
Typography
Inter is the only UI family. Use weights 400, 500, 600, and 700.
| Token | Size | Typical use |
|---|---|---|
display-2xl | 48 px | Desktop hero |
display-xl | 36 px | Screen title |
display-lg | 28 px | Section hero |
title | 20 px | Card/section title |
body | 15 px | Default copy |
caption | 13 px | Secondary text |
micro | 11 px | Uppercase eyebrow |
Use tabular figures for measurements. Retired v0.2 references to Inter Tight, Söhne, or JetBrains Mono are not part of the current system.
Spacing, radius, and motion
- Spacing:
4, 8, 12, 16, 20, 24, 32, 40, 48, 64px. - Radius:
6, 8, 10, 14, 20, 24, 999px. - Duration:
150, 200, 280, 400ms. - Easing:
cubic-bezier(0.22, 1, 0.36, 1)(outQuint).
The Flutter layer also defines responsive breakpoints at 640, 768, 1024, 1280, and 1440 px. Desktop begins at 1024 px.
Implementation map
| Platform | Canonical implementation |
|---|---|
| Shared/web | acesense-brand/tokens/tokens.css |
| Token JSON | acesense-brand/tokens/*.tokens.json |
| Flutter | acesense-frontend/lib/ds/tokens/ and lib/ds/widgets/ |
| Docs | acesense-docs/website/src/css/custom.css |
When a shared value changes, update the brand tokens first, then deliberately mirror it into each platform implementation and test the affected UI.