Project
A® Design System
Scope
Structure
Type
Color
Motion
Language
Year
2026
Core Thesis

Every decision in A® starts as taste. Written down as a value someone else can check, that taste can be handed to a person, a script or an AI and still arrive intact.

Principles : Five Constants

A® holds five things constant. Everything else is free to change.

Structure
One left axis. Ragged right, and full bleed is the only declared exception.
Type
A display face for names, a text face for prose, a mono face that only labels.
Color
Medusa's gradients, each carrying its given name. Unnamed color is stated as a value.
Motion
One soft body. Every line stays still, so the cursor is the one thing that moves.
Language
One name for each thing, the same in the code, on the page and in conversation.
First Decision : Medusa

A® began from Medusa, the visual system Amit derived in 2019. Its gradients, its grid and its jellyfish cursor became the base the rest was built on.

Derived, Not Declared : Tokens

Medusa's hues were sampled from its own published plates, and four of its gradients carry names Amit gave them. Every ink is paired by role across the dark and light backs and measured on each.

Gradients
Amberine#EA0751 → #ED7621133°
Aquamarine#1DAA8C → #1A809F133°
Ultramarine#274497 → #4B3392133°
Fuscharian#D6177F → #6B2FA0133°
Flat inks
AaPrimary#F2F2F2 · 17.24 on dark#1F1D1B · 15.01 on light
AaBody#C9C9C9 · 11.66 on dark#3E3B37 · 9.95 on light
AaCaption#A4A4A4 · 7.74 on dark#544F4C · 7.22 on light
AaDim#888888 · 5.45 on dark#6E6B68 · 4.73 on light
Dark backs
#0E0E0Ehsl(0, 0%, 5%)Ground
#161616hsl(0, 0%, 9%)Hairline
#1C1C1Chsl(0, 0%, 11%)Ramp
#1E1E1Ehsl(0, 0%, 12%)Plate
Light backs
#F2F2F2hsl(0, 0%, 95%)Ground
#EAEAEAhsl(0, 0%, 92%)Derived · mirrors #161616
#E4E4E4hsl(0, 0%, 89%)Derived · mirrors #1C1C1C
#E2E2E2hsl(0, 0%, 89%)Derived · mirrors #1E1E1E

Each ink is paired by role and measured on its own back against WCAG 2.2 SC 1.4.3, which requires 4.5:1. Light backs past #F2F2F2 mirror the dark ramp step for step and are derived, not yet in use. Backs carry no ratio because they are never set as text.

Carried Forward : The Cursor

Amberine moved from Medusa onto every page as the cursor, the only soft body in a system of fixed lines. In Tools, the same driver runs through all four named gradients, and it runs here too.

AmberineSolid · 40 px · trail .16

Ring · 44 px · stroke 6% · trail .40

AquamarineSolid · 40 px · trail .16

Ring · 44 px · stroke 6% · trail .40

UltramarineSolid · 40 px · trail .16

Ring · 44 px · stroke 6% · trail .40

FuscharianSolid · 40 px · trail .16

Ring · 44 px · stroke 6% · trail .40

AmberineSolid · 40 px · trail .16Ring · 44 px · stroke 6% · trail .40

AquamarineSolid · 40 px · trail .16Ring · 44 px · stroke 6% · trail .40

UltramarineSolid · 40 px · trail .16Ring · 44 px · stroke 6% · trail .40

FuscharianSolid · 40 px · trail .16Ring · 44 px · stroke 6% · trail .40

Extended To : Type

Type was set against that stillness in three registers. A name reads as a title, prose reads as prose, and only a label is set in mono.

Held Back : Fraktur

The nav carries one fraktur letter per word, but fraktur never enters anything search reads. Type Cast, in Writings, traces why the two letterforms belong together.

Built Out : Components

Each decision became a component or a rule the components obey. Seven components carry every page on the site.

ComponentCarriesInstances
Styles + cursorThe cursor, the light-ground footer, shared styles33
Footer TransparentStatement, contacts, social links32
Navigation𝔅IO · W𝔒RK · JOURNAL · TOOL𝔖, with hover images31
Custom-codePage-level code carried by legacy pages18
Brief RowOne label and one value of the brief15
Related WorkTwo rows, each with a label, link, cover and key7
Principles GridThree titles and three bodies1

Instance counts read from Webflow on September 24, 2026. Six earlier components carry 0 instances and are not listed.

Extended Across : Templates

From the register, work reached production through Claude, the Webflow and Figma MCP servers, JavaScript and CSS. Every page is one of six templates, so a new page inherits its layout instead of deciding it.

TemplateBuilt fromExample
Indexindex-section · index-row · project-line · index-preview-stageHome
Case studybrief-table · narrative-block · dt-panel · rr-secLumasis Design System
Deckdeck-cover · deck-plates · deck-plateMedusa Visual System
Writingses-wrap · es-lede · es-copy · es-liftMind the Gap
Archive stackcentered 1400px sheets · seven-key railJournal App
Fieldfull fold · 70px nav clearance · parameter stackCursor

Every page on the site is one of these six. A new page inherits its template rather than deciding its own layout.

Constraint : 2,000 Characters

Webflow allows fifteen registered scripts per code block, 2,000 characters each. The cursor driver shipped at 1,999, with room made by shortening names rather than cutting behavior.

Held to a Threshold : Measured

A change counts as done only when a number read from the live page confirms it. When the tooling failed, the failure became a rule in the register.

CheckTargetMeasured
Index rows against index rulesEqual12 · 12
Cursor ring across all seven breakpoints44px44px, was 128px at ≥1440
Cursor driver source, 1.11.0≤ 2,000 characters1,999
Ink 4 on #F2F2F2≥ 4.5:14.73:1
Sand A on #F2F2F2≥ 4.5:12.65:1, replaced by #726557 at 5.05:1
Asset libraryNo visible change182 MB → 10 MB · 359 files

Each value was read from the live site or the Webflow API after the change shipped, not from the design file.

Outcome : One Hand

Across Work, Writings, Journal, Tools and the galleries, every page reads as one person's hand, whoever set the last value.

Weight : 182 MB to 10 MB

The asset library went from 182 MB to 10 MB across 359 files with no visible change. One register governs the site, its decks, covers and documents, and the words used for all of them.

PageImagesWeightFormat
Plume Data Stories150.75 MBAVIF
Lumasis Design System133.91 MBMixed
Medusa Visual System306.10 MBJPEG
Brand Guidelines1914.57 MBPNG
Metro Visual System1416.42 MBPNG

Measured September 1, 2026. The same artwork in AVIF is what separates the first row from the last.