Prism prismd.fr

Extracted · 10 sections · 24 colors · grade C

fly.io

Accent #5e6ad2 · Fricolage Grotesque — chaque valeur ci-dessous est mesurée via getComputedStyle(), jamais affirmée à la main.

colors

faces

shadows

keyframes

Get DESIGN.md tokens.json Repeindre ce design

rendu réel · source de vérité

fly.io is built on a pure-white canvas (rgb(255,255,255)). The system uses rgb(124, 58, 237) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Mackinac as the primary typeface. A layered elevation system (11 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 17 keyframe animations plus transition-driven interactions.

Color — roles, semantics & the full census

24 colors measured · click any swatch to copy

Canvas

#ffffff

AAA 15.61:1

Ink

#281950

AAA 15.61:1

Accent

#7c3aed

AA 5.7:1

Line

#e5e5e5

Fail 1.26:1

Semantic states

No semantic state colors detected — this system signals state through weight & motion, not hue.

24 colors mined from the live renderexpand

Type — the ladder, in the real face

3 roles · rendered live in the real Inter (captured woff2) · lines are editable, click any spec to copy

display xl

display-xl64px · 500

body

body16px · 325 · ×4.00

button

button15.5px · 450 · ×1.03

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale

xxs · 2px

xs · 6px

sm · 20px

md · 32px

base · 40px

lg · 48px

xl · 56px

2xl · 70px

3xl · 72px

Radius

none
0px

xs
8px

sm
10px

md
16px

lg
9999px

xl
10007px

full
9999px

Depth — elevation is extracted, not invented

11 box-shadows measured on the live page · click a tile to copy its raw value

shadow-1

shadow-2

shadow-3

shadow-4

shadow-5

Motion — easings, transitions & live keyframes

1 easing curve · 17 keyframes · hover a tile to preview

Easing & transitions

transition-2cubic-bezier(0.4, 0, 0.2, 1)

17 keyframe animations extracted

fpFadeInDown

ping-badge

dot-one

dot-two

dot-three

shimmer

spin

bounce

fade

slideY

infinite-scroll

ping

Components — the closed vocabulary

7 component families · 36 variants counted on the live DOM

Component	Variants found
buttons	×10
nav Links	×8
links	×8
heading H2	×6
footer Links	×2
badges	×1
heading H1	×1

Component style specs (§4)expand

Buttons

Pill

Background: transparent {colors.hairline}
Text: #281950 {colors.primary-hover}
Padding: 0px
Radius: 9999px
Font: 14.5px weight 450
Use: Status pills, tags, chips

Ghost

Background: transparent {colors.hairline}
Text: #281950 {colors.primary-hover}
Padding: 10px 12px
Radius: 0px
Font: 14.5px weight 500
Use: Subtle action, toolbar, nav button

Pill

Background: rgba(255, 255, 255, 0.4) {colors.on-primary}
Text: #202237 {colors.ink-subtle}
Padding: 0px 10px 0px 12px
Radius: 20px 8px 8px 20px
Border: 1px solid rgba(255, 255, 255, 0.9)
Shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px
Font: 14.5px weight 450
Use: Status pills, tags, chips

Primary Brand

Background: #7c3aed {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 0px 12px 0px 10px
Radius: 8px 20px 20px 8px
Shadow: rgba(67, 56, 202, 0.25) 0px 0px 0px 1px inset
Font: 14.5px weight 450
Use: Primary CTA / brand action

Outline

Background: transparent {colors.hairline}
Text: #ffffff {colors.on-primary}
Padding: 32px 16px
Radius: 16px
Border: 1px solid rgba(255, 255, 255, 0.25)
Shadow: rgba(91, 33, 182, 0.1) 0px 5px 5px -2px, rgba(91, 33, 182, 0.1) 0px 2px 4px -2px
Font: 16px weight 450
Use: Secondary action with border

Navigation

Main Nav

Background: transparent {colors.hairline}
Padding: 0px 32px
Radius: none
Font: 14.5px weight 450
Use: Fixed/sticky flex nav — N/A items

Layout — structure & dimensions

4 layout metrics measured

max Width1200px

header Height96px

sidebar Width0px

container Padding0px

Responsive — real breakpoints

8 media-query stops read from the live CSS

480px

640px

768px

1024px

1200px

1367px

1400px

1728px

Do's & Don'ts

22 enforceable rules pulled verbatim from the spec

Use Translucent #281950 (75%) (`rgba(40, 25, 80, 0.75)`) for text — not pure black, it's warmer and more readable

Use Fricolage Grotesque as the primary typeface — it defines the brand personality

Keep font weights between 325-500 — the system uses a narrow weight range for subtle hierarchy

Use negative letter-spacing (-2.88px) at display sizes for compressed, editorial headlines

Use the extracted shadow patterns for elevation — they are tuned to match the brand palette

Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)

Use Violet (`#7c3aed`) as the primary accent — it's the brand's signature interactive color

Use 8px 20px 20px 8px border-radius on buttons — the standard corner rounding for interactive elements

Respect the 6px–56px spacing range — the design uses a wide scale for visual breathing room

Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar

Use a single primary CTA in the hero — the design intentionally avoids choice paralysis

Each card uses an icon (not photo) — the visual language is illustrative, not photographic

Use a 3-column grid on desktop — density matters for this content type

Repeat the primary CTA across 5 banner sections — conversion paths are layered, not single

Don't

Don't use pure black (`#000000`) for text — the near-black adds warmth

Don't substitute with generic sans-serif or serif — the custom font carries the brand

Don't use weight 700 (bold) or above — 500 is the maximum weight in this system

Don't increase letter-spacing on headings — the type is designed to run tight at scale

Don't invent new shadow values — use only the extracted shadow levels

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 make the nav sticky — this design lets it scroll away to maximize content focus

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the fly.io design system. Canvas #ffffff · ink #281950 · accent #7c3aed. Type: Fricolage Grotesque — 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.

Every value above was getComputedStyle-verified.

$ npx prismd add fly

DESIGN.md · narrative spec tokens.json