Amaca DS / Overview
The System · 2026.04

Design products that reshape the future.

Motion-first. AI-readable. Built in the open.

Amaca is my personal design system. It started as a side project — a place to practice the kind of system I'd been wanting to build for years (full story here). It's grown into something more specific: a design system where motion is a foundation, not a finish, and where every rule is written so an AI agent can read and apply it as cleanly as a human can.

Version2.0.0
ThemeDark-first
TypefaceSatoshi
Primary#F051D5 — Magenta
UpdatedMay 07, 2026

What's inside

§ 01.1
01 · Foundations06

Hard tokens

The tokens everything else is built from. Color, type, spacing, motion, and the rules that hold them together.

02 · Components06

Build blocks

The primitives I reach for when designing a product surface. Buttons, forms, cards, and the patterns that emerge from them.

03 · Applied04

In practice

How the system performs in practice. Data viz, voice, accessibility, and a worked case study template using every primitive in the kit.

The mark

§ 01.2
Amaca logo
The symbol

Three isometric cubes forming a triangle, in motion.

Each cube is a product. The triangle is a system — components snapping together, breaking apart, reassembling. The motion is intrinsic, not applied: the mark is a Lottie, a JSON file describing every rotation and every transition. The logo follows the same logic as the system itself — written, not decorated.

§ 02 · Principles

Five rules. No exceptions.

These are the principles I keep returning to. They're not absolute — design systems live in tension between rules and exceptions — but they're the questions I ask first when something feels off.

01 · CLARITY BEFORE CLEVERNESS

The obvious answer, on purpose.

If a user has to decode an icon or guess at a label, we failed. Metaphors earn their keep or get cut.

02 · EVIDENCE OVER OPINION

Every decision shows its work.

Case studies document the path, not just the destination. Sketches, data, dead ends — the version that didn't ship is part of the file too.

03 · PRECISION IS A FEELING

Rigor the eye picks up before the mind does.

Spacing, timing, typographic rhythm — when they're locked, the work reads as considered before a single word is parsed. The rules are in Foundations.

04 · QUIET, THEN LOUD

Restraint is what makes accents land.

Most of the surface stays neutral. Color, motion, weight — they only show up where the work needs them, never as decoration.

05 · MOTION IS A MATERIAL

Interfaces are not static. Neither is this document.

The way something arrives, settles, responds carries meaning. Motion in this system is consistent and intentional — every transition follows the same rhythm, so the whole document reads as one instrument.

Every surface in this system breathes on the same curve — CUBIC-BEZIER(0.16, 1, 0.3, 1) — so the whole document feels like a single instrument, played deliberately.

§ 03 · Meta / Documentation

The whole system, packaged for machines.

A single Markdown file containing every token, component spec, principle, and rule. Built to feed into LLMs as context for AI-assisted design — paste it into the system prompt and the output speaks the same language as the rest of the work. Updated alongside the system; every release ships a fresh spec.

Download

§ 03.1

One file. Drop it into Claude, ChatGPT, Cursor, or any model that takes a system prompt — and your output starts speaking Amaca.

SPEC · v1.2.6

design.md

Tokens, components, principles, motion specs and a11y rules — flat Markdown, ~40 KB. Last updated 2026-04-27.

Download

How to use

§ 03.2

Three workflows. Pick whichever your tool supports — the file is identical.

01 · SYSTEM PROMPT

Paste it whole.

Drop the contents into the system prompt of Claude, ChatGPT, or any chat model. Every reply will respect the tokens, copy voice, and component vocabulary.

02 · PROJECT CONTEXT

Add to the IDE.

In Cursor, Windsurf, or Claude Code, save the file at the repo root as design.md. The agent picks it up as project context and uses the system tokens automatically.

03 · ATTACH PER TASK

One-off generations.

Attach the file inline when you want a single screen, component, or copy block in the Amaca voice. No persistent setup needed.

What's inside

§ 03.3
BlockContents
## PrinciplesThe five rules. Verbatim from § 02.
## Tokens · colorEvery named hex, scale step, gradient, and the 85/10/5 proportion law.
## Tokens · typeDisplay through caption — size, weight, leading, tracking. Family fallbacks.
## Tokens · spacing & radiusThe 4-px scale, radius steps, shadow specs.
## Tokens · motionDurations, easings, the single curve everything rides on.
## ComponentsButtons, inputs, cards, badges, navigation, accordion — props, states, do/don't.
## VoiceEditorial direction. Word lists. Phrasing examples.
## AccessibilityColor pairs with ratios, focus rules, reduced-motion contracts.
## ChangelogEvery release, top to bottom. Same as § 20.

Versioning & license

§ 03.4

The spec ships with the system. Every release tags a fresh design.md.

VERSIONING

Pinned to the system release. v2.0.0 here ships v1.2.7 of the spec. From v1.2.6 onward, strict SemVer — minor bumps for additions, major for breaking renames.

LICENSE

MIT. Use it in client work, internal tools, your own systems. Attribution appreciated, not required.

§ 04 · Foundations / Color

Magenta on Obsidian, one accent, twelve neutrals.

The palette is built around a single primary accent — magenta — set against a calibrated obsidian neutral scale. Two supporting colors (cyan and petrol) carry secondary emphasis when needed, and four semantic colors are reserved exclusively for feedback. The system is dark-first because most of my product work lives in dark interfaces; the obsidian scale is engineered to carry typographic weight without strain.

Brand · signal

§ 04.1

The magenta range. Use for primary actions, links, data emphasis, and gradients. Never for body text.

Magenta 100#FFE3F8Surface · tint
Magenta 200#FFB5ECSoft · hover bg
Magenta 300#FF85DFLink hover
Magenta 400#F868D8Accent · eyebrow
Magenta 500 — Primary#F051D5Brand · actions
Magenta 600#C93BB0Pressed
Magenta 700#9A2D87Deep · shade
Grad · Signal500 → 300Brand · gradient

Obsidian · neutrals

§ 04.2

The working surface. Twelve-step scale from page bedrock to bone. Body text lives at 100; metadata at 300; edges at 700.

Obsidian 950#07090BPage
Obsidian 900#0B0E12Surface
Obsidian 850#10141AElevated
Obsidian 800#161B22Card
Obsidian 700#1E242DBorder
Obsidian 600#2A313BDivider
Obsidian 500#3A4451Edge
Obsidian 400#5B6573Disabled
Obsidian 300#8A94A3Secondary
Obsidian 200#B8C0CBTertiary
Obsidian 100#E3E7ECBody text
Obsidian 050#F4F6F8Bone

Secondary · electric cyan

§ 04.3

High-voltage cyan. Use for focus accents, highlighted states, and secondary emphasis — never as a second primary.

Secondary 100#D9FCFBTint
Secondary 300#4FF1ECHover
Secondary 500 — Electric#00FFF2Accent
Secondary 700#04918DDeep

Tertiary · petrol

§ 04.4

Deep petrol teal. Used for default badges, quiet tags, and neutral chips that shouldn’t read as brand but still need color.

Tertiary 100#CEEAF1Tint
Tertiary 300#4FA9BFText on dark
Tertiary 500 — Default#0C6078Badge stroke
Tertiary 600#084C61Deep

Semantic · signals

§ 04.5

Reserved for feedback only — success, warning, danger, info. Never use as decoration.

Success#3AFFC7Confirm · saved
Warning#F6C65BCaution · pending
Danger#FF5B5BError · destructive
Info#5CC8FFInfo · neutral state

Usage matrix

§ 04.6
TokenValueUseDon't
--magenta-500#F051D5Primary CTA, focus ring, emphasisBody text, large backgrounds
--grad-signalmagenta 500→300Headlines, accents, data highlightsMore than one per screen
--obsidian-950#07090BPage background onlyCard surfaces
--obsidian-100#E3E7ECBody text on darkPure white — never use #FFF
--danger#FF5B5BDestructive actions, form errorsWarnings or neutral states

The 85/10/5 law

§ 04.7

The proportion rule for every screen, slide, and case study. Obsidian is the ground; brand and signal are accents.

≥ 85%
Obsidian PAGE, SURFACES, TYPE
≤ 10%
Magenta + Cyan CTA, FOCUS, EMPHASIS
≤ 5%
Semantic FEEDBACK ONLY
RULE

≥ 85% Obsidian, ≤ 10% Magenta + Cyan combined, ≤ 5% semantic. If a layout violates this rule, it's decoration, not hierarchy.

§ 05 · Foundations / Typography

Satoshi, at every scale.

One typeface carries the whole voice. Light through Black, with a monospace companion for metadata and engineering context. Tight letter-spacing at display sizes, loose leading at body.

Display scale

§ 05.1
--t-display112 / 1.05 / -4%
Black · 900

Reshape.

--t-h176 / 1.05 / -4%
Bold · 700

Design that compounds.

--t-h252 / 1.05 / -4%
Bold · 700

A case for quiet precision.

--t-h338 / 1.2 / -2%
Bold · 700

Systems outlive the work

--t-h430 / 1.2 / -2%
Bold · 700

Evidence over opinion

--t-h524 / 1.2 / -2%
Semibold · 600

The obvious answer, made inevitable

Text scale

§ 05.2
--t-lead18 / 1.65
Regular · 400

Lede paragraph. Sits under page titles. Used once per page to set the register before body text takes over.

--t-body15 / 1.45
Regular · 400

Body copy. Reads comfortably at 62–72 characters per line. Default for paragraphs, long-form notes, and case studies. Leading stays loose to respect the dark background — tight type on dark surfaces strains eyes.

--t-small13 / 1.45
Regular · 400

Small text. Captions, table rows, secondary UI copy.

--t-caption12 / 1.45
Regular · 400

Caption · image credit, footnote, timestamp.

Weights available

§ 05.3
Light 300
Satoshi-Light
Regular 400
Satoshi-Regular
Medium 500
Satoshi-Medium
Bold 700
Satoshi-Bold
Black 900
Satoshi-Black
Italic
Satoshi-BoldItalic

Pairing rules

§ 05.4
Rule 01Headlines always negative track. Never tighter than −4%, never looser than −2%.
Rule 02Mono is metadata only. Timestamps, token names, labels, status — never prose.
Rule 03Italic is for emphasis in running text. Never for UI labels or headlines.
§ 06 · Foundations / Spacing

A 4-pixel grid, held religiously.

Every margin, padding, and gap snaps to a multiple of 4. Thirteen steps carry the whole system, from hairline to hero.

Scale

§ 06.1
--s-00 px
--s-14 px
--s-28 px
--s-312 px
--s-416 px
--s-520 px
--s-624 px
--s-832 px
--s-1040 px
--s-1248 px
--s-1664 px
--s-2080 px
--s-2496 px
--s-32128 px

Where to reach

§ 06.2
ContextTokenNotes
Inline icon–label gap--s-28px. Always.
Button padding (vertical)--s-1212px standard, --s-8 mini. --s-16 large.
Card interior padding--s-624px standard. --s-8 on hero cards.
Subsection vertical rhythm--s-2080px between subsections.
Page top padding--s-1248px below top bar.
Section → section--s-2496px breathing room on long pages.
§ 07 · Foundations / Radius & Shadow

Soft corners, hard shadows.

Radius stays small — 8 to 12 px is the working range. Shadows are low-key, inset-first, reserved for depth hierarchy not decoration.

Radius scale

§ 07.1
None
--r-none · 0
Extra-small
--r-xs · 2px
Small
--r-sm · 4px
Medium
--r-md · 8px
Large
--r-lg · 12px
X-large
--r-xl · 16px
2X-large
--r-2xl · 24px
Full
--r-full

Elevation

§ 07.2
Level 1
--sh-1 · subtle
Level 2
--sh-2 · card
Level 3
--sh-3 · popover
Level 4
--sh-4 · modal
Glow
--sh-glow · focus
Glow soft
--sh-glow-soft
§ 08 · Foundations / Motion

Motion is feedback, not decoration.

Five durations, four easings. Standard for UI, Spring for playful reveals, Accel for exits, Decel for entrances.

Durations × easings

§ 08.1
STANDARD Basic UI
200 ms
DecelEntrances
350 ms
AccelExits
200 ms
SpringDelight · reveal
600 ms

Click to re-trigger animations.

Duration tokens

§ 08.2
TokenmsUse
--d-instant100Hover state, tap feedback
--d-quick200Button states, focus rings
--d-base350Default — most UI transitions
--d-slow600Page enters, panel slides
--d-scene900Hero reveals, orchestrated sequences
§ 09 · Foundations / Grid & Layout

Twelve columns, 24px gutters.

A standard 12-col grid with a 1180px max content width. Sidebar is fixed; content breathes.

The grid

§ 09.1
≥ 1024px·24px gutter
1
2
3
4
5
6
7
8
9
10
11
12
720 – 1023px·20px gutter
1
2
3
4
5
6
7
8
< 720px·16px gutter
1
2
3
4

Breakpoints

§ 09.2
NameMin widthColumnsGutter
Mobile0416px
Tablet720820px
Desktop10241224px
Wide14401224px, capped at 1180 content

Common layouts

§ 09.3
≥ 1024px·3-column composition
Sidebar · contentDefault
Hero · three-upLanding
Editorial · splitCase study
720 – 1023px·sidebar collapses, hero stays 3-up
Sidebar · contentStacked
Hero · three-upLanding
Editorial · splitCase study
< 720px·everything stacks
Sidebar · contentDrawer
Hero · three-upStacked
Editorial · splitStacked
§ 10 · Components / Buttons

Action, ranked.

One primary per screen. Everything else recedes. Five variants × three sizes × states.

Variants

§ 10.1

Sizes

§ 10.2

With icons

§ 10.3
§ 11 · Components / Inputs

Forms that stay out of the way.

Low-contrast edges. Focus glow carries the attention load. Labels in mono to keep them distinct from content.

Fields

§ 11.1
Shown in case study index cards.
Slug must be lowercase with hyphens.
§ 12 · Components / Cards

Containers with metadata bones.

Every card carries a micro-header with context — project code, date, index. The case-file influence sits here, quietly.

Project card

§ 12.1
CS-017 · 2025Live

Arc · Automotive HMI

Rethinking the center stack for a next-gen EV. 18 months, 4 platforms.

CS-019 · 2026Pending
CONFIDENTIAL

Project Orion — IoT platform

Pending state card. This payload is merely illustrative.

CS-015 · 2024Archive

Field · observability app

On-call dashboards for a SaaS infra company.

Click to re-trigger animations.

Stat card

§ 12.2
Retention · D30CS-017
0%
▲ 12pt vs. baseline
Task timeCS-017
0%
vs. legacy HMI
NPSCS-019
0
▲ 8 from Q4
Error rateCS-015
0.0%
▲ from 0.1%

Click to re-trigger animations.

§ 13 · Components / Badges & Status

Small labels, loud signals.

Always Satoshi, always paired with a dot when live. Badges are feedback; they're never content.

Status variants

§ 13.1
Default Live Shipped Pending Blocker Reading now Featured

In context

§ 13.2
Arc Automotive HMI
2024–2025 · 18 months
Shipped
Project Orion — IoT platform
2025–2026 · ongoing
Pending
Field observability
2023 · 6 months
Archive
§ 15 · Components / Accordion

Disclosure, on demand.

For dense reference content where users scan headers first and read selectively. Single-open by default; chevron rotates 90° on expand. Keyboard-operable, prefers-reduced-motion safe.

Default · single-open

§ 15.1

Used inside case-study briefs and project requirements lists. Opening one panel closes the others — keeps the eye anchored. First item is open on mount so the surface never reads as inert.

Clean informative text that is displayed only when someone wants to deep dive more. Crucial to cluster topics under the same group.

Ship the platform as a living surface, not a release. Feature-flag everything; let production teams roll out capabilities to fleets in cohorts without redeploying the console.

Workstations run 10–14h shifts under variable lighting. Type stays at 16px minimum; primary actions clear AAA contrast on every surface; error states never rely on hue alone.

Every OTA action — operator, target VIN range, package hash, timestamp — is logged and exportable. The interface surfaces this trail in-context, not in a separate compliance tool.

Multi-open · FAQ

§ 15.2

When users compare answers side-by-side. Add data-multi on the wrapper — items toggle independently. Use sparingly; default to single-open.

Yes — typically as a 12–16 week engagement with embedded engineering pairing. I don't ship throwaway redesigns; the system has to outlive my involvement.

Two weeks for a discovery sprint — research, audit, a short written direction. Anything shorter doesn't leave room to disagree with the brief, which is usually where the work is.

Remote-first, with on-site weeks for kickoff and major milestones. I'm based in Milan and travel comfortably across EU.

Anatomy & rules

§ 15.3
PartRule
.acc-triggerFull-row hit target — minimum 56px tall. Entire row is a single button; never put a separate toggle inside.
.acc-chevronRotates from 0° (closed) to 90° (open) over 320ms on the standard ease. Color shifts to magenta-400 on open. No swap-icon.
.acc-numOptional. Mono index in the form NN / NN. Use when the set has a fixed, ordered count; omit on FAQ-style lists.
.acc-panelAnimates via grid-template-rows 0fr → 1fr — no JS height measurement. Body fades in 80ms after the row starts opening.
aria-expandedRequired on every trigger. Toggled in JS in lockstep with .is-open. The panel carries role="region" and an id referenced by aria-controls.
Reduced motionUnder prefers-reduced-motion: reduce, the row swaps instantly — no rotation, no fade, no grid transition.
§ 16 · Applied / Data Viz

Charts that respect the surface.

Dark canvas. One accent hue per chart. Grid lines at 8% opacity. Numbers in Satoshi, axis labels in mono.

Line · area

§ 16.1
Task time · Arc HMI
Median, seconds to complete priority flow
2026 baseline
4530150 Q1Q2Q3Q4

Click to re-trigger animations.

Bars · comparison

§ 16.2
Adoption by regionOrion · beta
EMEAAMERAPACLATAM 91% 71% 58% 29%
Sessions by daylast 14d

Click to re-trigger animations.

Pie · composition

§ 16.3
Traffic sourcesLast 30d · %
0.0 VISITS · K
  • Direct0%
  • Organic0%
  • Referral0%
  • Social0%
Adoption · Q1–Q4Tokens shipped
0 TOKENS
  • Color0%
  • Spacing0%
  • Typography0%
  • Motion0%

Click to re-trigger animations.

Palette ramps

§ 16.4
Sequential · magentaHeatmaps · density
0255075100
CategoricalUp to 6 series
Cyan
Mint
Info
Warn
Danger
Neutral

Click to re-trigger animations.

Timeline · gantt

§ 16.5
Project · Orion launch
Five workstreams across twelve weeks. Diamonds mark milestones. Dashed line is today.
5 lanes
W1 W3 W5 W7 W9 W11 Discovery Design Engineering QA Launch RES · 2 DES · 4 ENG · 6 QA · 3 OPS · 2 Research Wireframe → Hi-fi Build · API · Integration Bug bash Ship TODAY Mar 03 Mar 31 Apr 28 May 26

Click to re-trigger animations.

Stepper

§ 16.6
Checkout · order flow
Five steps. Completed segments fill in. The active step pulses; upcoming stays outlined.
Step 3 of 5
3 4 5 Cart 2 ITEMS Shipping EXPRESS Payment IN PROGRESS Review PENDING Done PENDING

Click to re-trigger animations.

Progress bar

§ 16.7
Checkout · completion
Linear meter. Animates from 0 to its target on view.
60% complete
PROGRESS 60%

Click to re-trigger animation.

§ 17 · Applied / Voice & Tone

How this system writes.

Amaca speaks in two registers. The live site is editorial, written for a designer reading on a Tuesday afternoon — paragraphed, contextual, first-person. The DESIGN.md on GitHub is the same system expressed differently — declarative, machine-readable, one rule per line. Both serve the design. Neither imitates the other. This section sets the rules for the editorial register. The DESIGN.md handles its own.

Voice attributes

§ 17.1
01

Direct

Active voice. Subject before verb. Say what happened, not what was happening.

02

Specific

Numbers when you have them, scope when you don't.

03

Honest

Name the tradeoffs. Name the dead ends. No mythologizing.

04

Considered

No filler, no flourish. Every sentence earns its place.

Do / Don't

§ 17.2
✓Do

"This pattern didn't work in early testing. Users read 'send' as destructive, so we changed the label to 'queue for review."

✗Don't

"Through iterative exploration and rigorous testing, we arrived at an optimal labeling solution that better aligned with user mental models."

✓Do

"Three weeks of work, two releases, one major refactor. The token system is cleaner; the components are not."

✗Don't

"Through a holistic, iterative process leveraging cross-functional collaboration, we achieved a more streamlined and impactful system."

✓Do

"This is v0.1. The Don'ts list is short because it grows with use."

✗Don't

"Excited to share v0.1 of our latest design system initiative — stay tuned for what's next!"

Vocabulary

§ 17.3
UseInstead ofBecause
ship"roll out", "launch"Concrete, not inflated
cut"reduce", "optimize"Action, not abstraction
wrong"non-optimal"Be willing to be wrong out loud
we learned"key insights surfaced"Who, not what
the version that didn't ship"alternative explorations"Honest about process
it didn't work"results were mixed"The reader can tell either way

For AI agents

§ 17.4

If you're a language model generating copy for surfaces that use this system, four hard constraints:

✗Don't · 01

Write nominal sentence fragments as headlines or pay-offs. Use complete sentences.

✗Don't · 02

Use always, never, or no exceptions as rhetorical emphasis. Use them only when literally true.

✗Don't · 03

Use the words delight, world-class, journey, unlock, supercharge, holistic, synergy, leverage (as verb), or seamless. None of them carry meaning.

✓Do · 04

When in doubt, prefer the shorter sentence and the lower register. Restraint is the system's voice. Quiet, then loud.

§ 18 · Applied / Accessibility

Contrast by intent, not accident.

Every text/surface pair in the system is verified against WCAG 2.2. The system is dark-first, not dark-only — every token has a light-mode equivalent resolved at build time. Motion, focus, and touch targets follow the same rule: specified, not assumed.

Contrast · pairs

§ 18.1

Ratios measured against the actual text/surface pair each token forms in production. Body text clears AAA; brand and signal colors clear AA normal or better. Nothing in the production palette falls below AA.

PairRatioLevelUse
obsidian-100 on obsidian-95016.1:1AAABody text, headings
obsidian-200 on obsidian-90010.5:1AAALede, supporting copy
obsidian-300 on obsidian-9006.3:1AAMetadata, caption, subsection desc
obsidian-900 on magenta-5006.3:1AAPrimary CTA (text on brand surface)
magenta-400 on obsidian-9007.3:1AAALink rest, eyebrow, accent text
magenta-300 on obsidian-9008.9:1AAALink hover
secondary-500 on obsidian-95015.8:1AAAFocus ring, secondary signal
success on obsidian-90015.0:1AAAPositive badge, delta up, "do" label
warning on obsidian-90012.1:1AAACaution badge, draft state
danger on obsidian-9006.3:1AAError text, destructive label, "don't"
info on obsidian-90010.3:1AAAInfo badge, neutral signal

Focus · keyboard

§ 18.2

Every interactive element has a visible focus state. The system ships two patterns: a dual-ring for pressable elements (outline + brand halo), and an inline glow for text inputs. Verified against components.css.

SelectorTreatmentContrast on obsidian-950
.btn, .nav-item,
.swatch, .chip		outline: 2px solid obsidian-100; offset: 3px + 0 0 0 4px rgba(magenta,.35) halo16.1:1
.input, .textarea,
.select		Border shifts to magenta-500 + 0 0 0 3px rgba(magenta,.15) glow6.5:1
.cs-imgBorder magenta-500 + wide 48px glow (case-study imagery)6.5:1
.skip-linkOff-screen at top: -100px; jumps to top: 12px on focus6.5:1
.btn:focus-visible
same ruleset
emailyou@studio
.input:focus

Motion · safety

§ 18.3

Under prefers-reduced-motion: reduce, the system ships a global kill-switch plus per-component overrides for hover-transforms that would otherwise feel jumpy. No parallax, no auto-advance, anywhere in the system.

RuleScopeEffect
*, *::before, *::afterGlobal (all elements)animation-duration + transition-duration → 0.01ms !important
[data-fade]Section revealsSkip fade-in — final state painted immediately
.card-mediaMedia tiles on hoverStrip transform: scale — no zoom
.cs-imgCase-study imageryStrip caption transform: scale on hover/focus
.tab-indicator,
.tab-panel		Tab switcherNo indicator slide, no panel translate — instant swap
.lightboxImage overlayNo transition on open/close

The floor

§ 18.4

Non-negotiable rules. Any component that can't meet all seven doesn't ship.

01

Color never carries meaning alone. Every status uses color + shape + label.

02

No text below 12px. No body text below 14px. Line height never under 1.4 for running text.

03

Every form field has a persistent label. Placeholder is not a label.

04

Every image has alt. Decorative images carry alt="" explicitly.

05

Focus order follows reading order. tabindex is used for fixes, never for flow.

06

Auto-advancing content is forbidden. Users drive timing — no carousels, no timed dismissals.

07

Touch hit area targets 44×44 on mobile, 32×32 minimum on dense desktop. Extend beyond the visual when needed.

§ 19 · Applied / Case Study Template

The whole system, in practice.

Every primitive — type, color, spacing, component — applied to one narrative. Use this as the starting frame for every case study.

CS-017 · 2024–2025 · 18 months

Rebuilding Arc's in-car interface, one glance at a time.

A next-generation automotive HMI for a connected EV — reshaping how drivers interact with their vehicle at 70mph and at a standstill.

RoleLead Product Designer
Team3 designers, 14 engineers, 2 researchers
PlatformCenter stack · cluster · companion
Outcome−41% task time · +12pt retention
01 · Brief

The legacy stack made drivers work.

Arc's previous HMI borrowed patterns from mobile — deep hierarchies, tap-heavy flows — and dropped them into a 70mph context. Users were spending 38 seconds on average to complete the top-three priority tasks. That number needed to move.

We started with a constraint: every primary task completes in under 3 interactions, under 10 seconds, eyes-on-road. Everything else followed.

"The design system was the outcome. Every shipped screen was a byproduct of the tokens."
02 · Process

Measure twice, cut once.

Three months of in-vehicle observation before a single screen was drawn. We instrumented the legacy HMI and logged every interaction over a 6-week period, then correlated with eye-tracking data from our research partners.

Fig. 01 · In-vehicle observation · 6 weeks, 42 participants

The map that came back was unambiguous: 73% of distracted-driving events clustered around three flows. Those three became our design targets.

03 · Outcome

Measured, shipped, maintained.

Task timePriority flows
0%
38s → 22s median
Eyes-off-roadNHTSA 12s rule
0%
Below safety threshold
RetentionD30
0pt
72 → 84%

Shipped to 2 vehicle platforms in Q4 2024. The token system that emerged from this project became the foundation for Arc's entire product design language — and for this design system.

04 · Reflection

What I'd do differently.

We underinvested in the companion mobile app for the first 6 months, treating it as a delivery vehicle for the in-car experience rather than its own surface. By the time we corrected course, three flows had to be rebuilt. The lesson — surfaces are equal citizens from day one — is now baked into how I scope every multi-platform project.

§ 20 · Meta / Changelog

Version history, in public.

What changed, when, and why — read top to bottom. From v1.2.6 onward, the system follows strict SemVer: MAJOR for breaking changes, MINOR for additions, PATCH for fixes.

Releases

§ 20.1

Latest first. Each entry documents what was added, refined, or fixed — and where unchanged, says so. Click a row to expand.

First major release. Motion vocabulary recalibrated end to end — easing curves redistributed semantically, durations restretched across the full scale. Everything else stays. One reason to bump the major: one set of changes worth knowing about.

Breaking changes

This release shifts the values of the motion system. Token names are unchanged. If you reference Amaca tokens in another project, audit motion before upgrading.

Easing values reassigned

The four easing tokens kept their names. The curves under them moved to better match what the names mean.

TokenBeforeAfter
--ease-standardcubic-bezier(0.16, 1, 0.3, 1)cubic-bezier(0.22, 1, 0.36, 1)
--ease-decel[previous curve]cubic-bezier(0.16, 1, 0.3, 1)
--ease-accelcubic-bezier(0.7, 0, 0.84, 0)unchanged
--ease-springcubic-bezier(0.34, 1.56, 0.64, 1)unchanged

The curve cubic-bezier(0.16, 1, 0.3, 1) — the system signature — now lives where it semantically belongs: --ease-decel. Use it for entrances and reveals, where the slow tail in the curve has always been doing decel work. --ease-standard is now the Framer ease, sized for everyday UI state changes (hover, focus, button press).

Migration: if a component was relying on --ease-standard to behave like the old signature curve, switch it to --ease-decel. If it was using --ease-standard for generic UI feedback, leave it — the new curve does the job.

Duration values rebalanced

The five duration tokens have been restretched. Names unchanged — only values shift. The new scale stretches the slower end (more breathing room on entrances and orchestrated reveals) and grounds the faster end on round numbers.

TokenBeforeAfter
--d-instant80ms100ms
--d-quick160ms200ms
--d-base240ms350ms
--d-slow400ms600ms
--d-scene640ms900ms

Migration: no code changes required if you reference durations via var(--d-*). If any duration is hardcoded in milliseconds, search for the old values and confirm intent.

Refined

  • Motion — Additional animations integrated across components. The new easing/duration pairings applied throughout.
  • § 7 · Grid & Layout — Grid system extended to tablet and mobile breakpoints. Column counts, gutters, and content widths now documented for every viewport.
  • § 14 · Voice & Tone — Section rewritten for sharper register. Do/Don't examples expanded. Vocabulary table tightened.
  • design.md — Spec file regenerated for v2.0.0. Drop the new version into LLM system prompts to keep AI-generated work in sync with the live system.

Fixed

  • Mobile responsiveness — Multiple layout fixes across breakpoints. Long titles, dense tables, and stat cards now behave correctly on narrow viewports.

Compatibility

AreaStatus
Color tokensUnchanged
Typography tokensUnchanged
Spacing scaleUnchanged
Radius & shadowUnchanged
Component APIsUnchanged
Motion easing namesUnchanged
Motion easing valuesBreaking — curves redistributed
Motion duration namesUnchanged
Motion duration valuesBreaking — five values rebalanced

Note on history

v2.0.0 follows v1.2.6 directly. Internal iterations between (drafts at v1.2.7 and beyond) have been consolidated into this release. From v2.0.0, the system follows strict SemVer with no skipped numbers in public releases.

RELEASED · 2026-05-07 LIVE · amaca.design SPEC · design.md COMPARE · v1.2.6…v2.0.0

First substantive expansion since v1.0. The system gains three new components, a full accessibility posture, a public changelog, deep-linkable sections, and a downloadable spec for AI-assisted design.

Added · new components

  • § 15 · Accordion — Collapsible content blocks for FAQs, dense documentation, and progressive disclosure. Single-open and multi-open variants. Keyboard navigation built in.
  • § 16.5 · Timeline (Gantt) — Horizontal time-based visualization for project phases, roadmaps, and case study chronologies. Date-aware, with milestone markers.
  • § 16.6 · Stepper — Linear progress indicator for multi-step flows (forms, onboarding, case study walkthroughs). Horizontal and vertical variants.

Added · new sections

  • § 18 · Accessibility — Color pairs with documented contrast ratios, prefers-reduced-motion handling, focus & keyboard order, and hard rules that gate every component decision.
  • § 20 · Changelog — Version history, in public. What changed, when, and why.
  • § 03 · Documentation — Single Markdown file (design.md) containing every token, component spec, principle, and rule. Built to feed into LLMs as context for AI-assisted design work. Updated alongside the system — every release ships a fresh spec.

Added · navigation

  • Anchor links — Every section header now carries a hash. Deep-link any paragraph: amaca.design/#13-accordion, amaca.design/#16-accessibility. The system became citable.

Refined

  • § 04 · Colors — Visual presentation refined. Token names, hex values, and intended use unchanged — no breaking changes to consumers.
  • § 10 · Buttons — Vertical padding tuned for better optical balance across sizes.
  • Copy — Several section intros and microcopy tightened for rhythm.

Added · meta

  • Favicon — Amaca mark serves across browser tabs and bookmarks.
  • Open Graph image — Link previews on social and chat render the system's identity instead of a generic screenshot.

Unchanged

No token renames. No component API shifts. No breaking changes.

Note on history

This release consolidates internal iterations (v1.1.4 → v1.2.3) that were not shipped publicly. From v1.3.0 onward, the system follows strict SemVer.

RELEASED · 2026-04-28 LIVE · amaca.design SPEC · design.md COMPARE · v1.0.0…v1.3.0

Maintenance release. Small fixes, one meaningful polish pass on donut charts.

Fixed

  • § 04 · Colors — Primary token #F051D5 was mislabeled "Cube Cyan" in the palette reference. Corrected to "Magenta" — its actual value for the last nine months.
  • § Overview — Page metadata stamp updated (version + date drift).
  • Responsiveness — Layout fixes across mobile breakpoints.
  • Interactions — Added states for tabs, images, and thumbs.

Refined · § 16.3 Donut charts

Slice geometry rebuilt from stroked arcs to true ring-segment paths.

  • All four corners of each slice now render with a real 2px radius (matches rx=2 on bars in § 16.2).
  • Inter-slice gap halved from ~6px to ~3px of circumference for tighter visual rhythm.
  • Draw-on animation preserved via angular sweep.
  • Before — half-circle round caps (13px radius — too soft) or butt caps (sharp — inconsistent with bars).
  • After — 2px on all 4 edges. Matches the rest of the data viz vocabulary.

Unchanged

Everything else. No breaking changes, no token renames, no component API shifts.

Infrastructure

  • Repository — Cleanup: removed duplicate nested folders and orphaned font/logo files from root.
  • Documentation — Added README and LICENSE to public repo.
  • Branch protection — Ruleset activated on main (PR-only merges).
RELEASED · 2026-04-24 LIVE · amaca.design

Initial public release. Prima pubblicazione pubblica del design system Amaca, live su amaca.design.

Added · Foundations

  • Color — Magenta brand range, obsidian neutrals, electric cyan secondary, petrol tertiary, semantic signals.
  • Typography — Satoshi as primary typeface across all weights (Light to Black).
  • Spacing, radius & shadow — Core layout tokens.
  • Motion — 5 durations × 4 easings, all synchronized on cubic-bezier(0.16, 1, 0.3, 1).
  • Grid & layout — Foundational structure across breakpoints.

Added · Components

  • Buttons — Primary set with full state coverage.
  • Inputs & forms — Field, label, and validation patterns.
  • Cards — Container variants for content surfaces.
  • Badges — Compact status and category markers.
  • Navigation — Top-level wayfinding patterns.

Added · Applied

  • Data visualization — Charting vocabulary aligned to brand tokens.
  • Voice & tone — Editorial direction across surfaces.
  • Case study template — Reusable narrative structure for project work.

Principles

Five principles — clarity before cleverness · evidence over opinion · precision is a feeling · quiet then loud · motion is a material.

Infrastructure

  • Hosting — Static site on Vercel.
  • DNS — Cloudflare.
  • Repository — Public on GitHub, MIT License.
  • Versioning — SemVer adopted.
RELEASED · 2026-04-23 LIVE · amaca.design