1 easing curve · 4 keyframes · hover a tile to preview
Easing & transitions
transition-3ease-in-out
4 keyframe animations extracted
spin
resetActiveState
koYbOt
fides-skeleton-loading
06
Components — the closed vocabulary
8 component families · 37 variants counted on the live DOM
Component
Variants found
heading H3
×10
nav Links
×6
links
×6
footer Links
×5
heading H2
×5
cta Banner
×2
accordion
×2
cards
×1
Component style specs (§4)expand
Buttons
Ghost
Background: transparent
Text: #4a5568
Padding: 8px 8px 1px 6px
Radius: 0px
Font: 14px weight 400
Use: Subtle action, toolbar, nav button
07
Layout — structure & dimensions
4 layout metrics measured
max Width1200px
header Height323px
sidebar Width0px
container Padding40px 0px
08
Responsive — real breakpoints
19 media-query stops read from the live CSS
320px
375px
425px
480px
569px
570px
599px
667px
767px
768px
1023px
1024px
1025px
1080px
1279px
1280px
1599px
1600px
2240px
09
Do's & Don'ts
14 enforceable rules pulled verbatim from the spec
Do
Use BreveText as the primary typeface — it defines the brand personality
Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
Use Text Accent (`#057dbc`) as the primary accent — it's the brand's signature interactive color
Maintain nav height at 57px — consistent vertical space for the navigation bar
Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room
Each card includes a top image — imagery is part of the card identity, not optional
Use a 4-column grid on desktop — density matters for this content type
Don't
Don't substitute with generic sans-serif or serif — the custom font carries the brand
Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
Don't introduce additional saturated accent colors — the palette is intentionally controlled
Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
Don't make the nav sticky — this design lets it scroll away to maximize content focus
Don't put a CTA button in the nav — this design uses links only at the top
Don't over-build the footer — this design keeps it minimal (1 cols, 0 links)
10
Agent guide & export
Paste-ready prompt + the real files behind this page
Build a UI in the wired.com design system.
Canvas #ffffff · ink #111111 · accent #057dbc.
Type: BreveText — respect the size/weight ladder in §3.
Radius, spacing, shadow: use only the extracted scales (no magic numbers).
Full spec follows — paste the DESIGN.md below into your agent.