Design system

Almagre & Madrid Sky

Built from Madrid's own pigments and light, not the art-app reflex of black-and-gold or gallery-cream. Almagre — the iron-oxide earth red of Tabacalera brick — carries identity. Cielo, Velázquez's cerulean, is reserved strictly for the live/AR/wayfinding channel. The app runs dark; it's a viewfinder and a gallery wall. The admin console runs light; it's an office.

Color

Almagre is identity, never state — it appears on primary actions and the brand mark only. Semantic colors are rationed and hue-separated so nothing collides with the brand.

--almagre-58
--almagre-50
--cielo-74 (live)
--cielo-45
--verde-60
--ambar-55
--crimson-50
--ink-0 (void)
--ink-2
--ink-9
--neu-0 (admin)
--neu-9 (admin)
Typography

Three roles on a real contrast axis: a serif for institutional voice, a grotesque for product chrome, and a mono for every number the app is full of — distances, prices, editions.

Newsreader 600
Institution
Fauna Geométrica
Newsreader 400 italic
discovered on Lavapiés Walls
Instrument Sans 600
Product chrome
Add to cart
Instrument Sans 400
Body
Built from materials collected within four blocks of where it stands.
IBM Plex Mono 600
Instrument
820 m · 11 min · €1,850 · ed. 3/25
Components
Buttons
Badges & chips
Delivered Pending Refund Live Draft
AllPrintsPaintings
Form controls
Rating & stat
773purchases
Motion

Press feedback at 140ms, sheets at 240ms ease-drawer, AR target-lock at 420ms. Never scale(0) on entry. Every animation has a prefers-reduced-motion alternate — and none of them gate content visibility, so nothing ships blank in a headless render.

Hover / press
140–160ms, ease-out
Press me
scale(0.97) on :active
Instant listening feedback
AR target-lock
420ms, corner-bracket snap