Design products that reshape the future.
Amaca is the personal design system of Angelo Macaione — an operating toolkit for case studies, portfolio work, and product explorations. Built editorial-first, engineered underneath. Dark by default, precise by habit.
At a glance
§ 00.1Hard tokens
Color, type, spacing, radius, shadow, motion. One pass, zero drift.
Build blocks
Buttons, inputs, cards, badges, navigation — all the primitives for product work.
In practice
Data viz, voice, and a worked case study template using every primitive in the kit.
The mark
§ 00.2
Three isometric cubes forming a triangle.
Each cube is a product. The triangle is a system — components snapping together into something larger. The cyan-to-mint gradient is signal: alive, in motion, in the present tense.
Five rules. No exceptions.
Principles are not decorations. They're forcing functions. Each one should make some designs impossible.
The obvious answer, made inevitable.
If a user has to decode an icon or guess at a label, we failed. Metaphors earn their keep or get cut.
Every decision shows its work.
Case studies document the path, not just the destination. Data, sketches, dead ends — all of it stays in the file.
4px grid. 240ms ease. Always.
Spacing, timing, typographic rhythm — when they're locked, the work reads as considered before a single word is parsed.
Restraint makes accents work.
90% of the surface is neutral. The magenta only shows up when it matters — and then it matters a lot.
Interfaces are not static. Neither is this document.
Ten years of motion work taught me one thing: an idle interface lies about itself. The way something arrives, settles, responds — that is the design, not the decoration of it.
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.
A palette pulled from the mark.
Obsidian neutrals underneath. Cyan-to-mint accents on top. Semantic signals borrowed sparingly. The system is dark-first because confidence looks better in the dark.
Brand · signal
§ 02.1The magenta range. Use for primary actions, links, data emphasis, and gradients. Never for body text.
Obsidian · neutrals
§ 02.2The working surface. Eleven-step scale from page bedrock to bone. Body text lives at 100; metadata at 300; edges at 700.
Secondary · electric cyan
§ 02.3High-voltage cyan. Use for focus accents, highlighted states, and secondary emphasis — never as a second primary.
Tertiary · petrol
§ 02.4Deep petrol teal. Used for default badges, quiet tags, and neutral chips that shouldn’t read as brand but still need color.
Semantic · signals
§ 02.5Reserved for feedback only — success, warning, danger, info. Never use as decoration.
Usage matrix
§ 02.6| Token | Value | Use | Don't |
|---|---|---|---|
--magenta-500 | #F051D5 | Primary CTA, focus ring, emphasis | Body text, large backgrounds |
--grad-signal | magenta 500→300 | Headlines, accents, data highlights | More than one per screen |
--obsidian-950 | #07090B | Page background only | Card surfaces |
--obsidian-100 | #E3E7EC | Body text on dark | Pure white — never use #FFF |
--danger | #FF5B5B | Destructive actions, form errors | Warnings or neutral states |
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
§ 03.1Black · 900
Reshape.
Bold · 700
Design that compounds.
Bold · 700
A case for quiet precision.
Bold · 700
Systems outlive the work
Bold · 700
Evidence over opinion
Semibold · 600
The obvious answer, made inevitable
Text scale
§ 03.2Regular · 400
Lede paragraph. Sits under page titles. Used once per page to set the register before body text takes over.
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.
Regular · 400
Small text. Captions, table rows, secondary UI copy.
Regular · 400
Caption · image credit, footnote, timestamp.
Mono · 500
Metadata · timestamps · system labels
Weights available
§ 03.3Pairing rules
§ 03.4A 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
§ 04.1Where to reach
§ 04.2| Context | Token | Notes |
|---|---|---|
| Inline icon–label gap | --s-2 | 8px. Always. |
| Button padding (vertical) | 10px | Not on the 4-grid — intentional optical tune. |
| Card interior padding | --s-6 | 24px standard. --s-8 on hero cards. |
| Subsection vertical rhythm | --s-20 | 80px between subsections. |
| Page top padding | --s-12 | 48px below top bar. |
| Section → section | --s-24 | 96px breathing room on long pages. |
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
§ 05.1Elevation
§ 05.2Motion is feedback, not decoration.
Five durations, four easings. Standard for UI, Spring for playful reveals, Accel for exits, Decel for entrances.
Durations × easings
§ 06.1Click to re-trigger animations.
Duration tokens
§ 06.2| Token | ms | Use |
|---|---|---|
--d-instant | 80 | Hover state, tap feedback |
--d-quick | 160 | Button states, focus rings |
--d-base | 240 | Default — most UI transitions |
--d-slow | 400 | Page enters, panel slides |
--d-scene | 640 | Hero reveals, orchestrated sequences |
Twelve columns, 24px gutters.
A standard 12-col grid with a 1180px max content width. Sidebar is fixed; content breathes.
The grid
§ 07.1Breakpoints
§ 07.2| Name | Min width | Columns | Gutter |
|---|---|---|---|
| Mobile | 0 | 4 | 16px |
| Tablet | 720 | 8 | 20px |
| Desktop | 1024 | 12 | 24px |
| Wide | 1440 | 12 | 24px, capped at 1180 content |
Common layouts
§ 07.3Action, ranked.
One primary per screen. Everything else recedes. Five variants × three sizes × states.
Variants
§ 08.1Sizes
§ 08.2With icons
§ 08.3Forms 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
§ 09.1Containers with metadata bones.
Every card carries a micro-header with context — project code, date, index. The case-file influence sits here, quietly.
Project card
§ 10.1Arc · Automotive HMI
Rethinking the center stack for a next-gen EV. 18 months, 4 platforms.
Project Orion — IoT platform
Fleet telemetry for industrial robotics. Details under NDA until Q3.
Field · observability app
On-call dashboards for a SaaS infra company.
Click to re-trigger animations.
Stat card
§ 10.2Click to re-trigger animations.
Small labels, loud signals.
Always mono, always uppercase, always paired with a dot when live. Badges are feedback; they're never content.
Status variants
§ 11.1In context
§ 11.2Charts 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
§ 13.1Click to re-trigger animations.
Bars · comparison
§ 13.2Click to re-trigger animations.
Palette ramps
§ 13.3Click to re-trigger animations.
Write like a working designer.
Direct. Specific. No hedging. Show the work and let it argue for itself.
Voice attributes
§ 14.1Direct
Short sentences. Active voice. Verbs first.
Specific
Numbers, durations, scope. Not "improved" — "−41% task time."
Honest
Name the tradeoffs. Name the dead ends. No mythologizing.
Engineered
Treat prose like a system: tokens, rules, consistent rhythm.
Do / Don't
§ 14.2"Cut the task flow from 11 screens to 4. Median time dropped from 38s to 22s."
"Leveraged a holistic, user-centered approach to synergize the end-to-end experience."
"This didn't work. Users read 'send' as destructive. We reframed the action."
"Through iterative exploration and rigorous testing, we arrived at an optimal solution."
Vocabulary
§ 14.3| Use | Instead of | Because |
|---|---|---|
ship | "roll out", "launch at scale" | Concrete, not inflated |
cut | "reduce", "optimize" | Action, not abstraction |
the thing | "the solution", "the experience" | Clarity over reverence |
we learned | "key insights surfaced" | Who, not what |
wrong | "non-optimal" | Be willing to be wrong out loud |
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.
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.
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.
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.
The map that came back was unambiguous: 73% of distracted-driving events clustered around three flows. Those three became our design targets.
Measured, shipped, maintained.
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.
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.