Prism prismd.fr

Extracted · 9 sections · 18 colors · grade C

onetonline.org

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

colors

faces

keyframes

breakpoints

Get DESIGN.md tokens.json Repeindre ce design

rendu réel · source de vérité

onetonline.org is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(0, 68, 136) as the accent for primary actions and brand signals. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside OpenSansCond as the primary typeface. Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model. Motion is a first-class concern — 12 keyframe animations plus transition-driven interactions.

Color — roles, semantics & the full census

18 colors measured · click any swatch to copy

Canvas

#ffffff

AAA 15.43:1

Ink

#212529

AAA 15.43:1

Accent

#004488

AAA 9.62:1

Line

#dee2e6

Fail 1.3:1

Semantic states

error#58151csuccess#198754warning#fff3cdinfo#055160

4 semantic roles found.

18 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-xl35px · 700

body

body14px · 400 · ×2.50

button

button28px · 400 · ×0.50

Spacing & radius, made spatial

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

Spacing scale

xxs · 2px

xs · 4px

sm · 7px

md · 11px

base · 14px

lg · 21px

xl · 32px

2xl · 48px

3xl · 64px

Radius

none
0px

xs
5.25px

sm
7px

md
14px

lg
20px

xl
32px

full
9999px

Motion — easings, transitions & live keyframes

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

Easing & transitions

transition-2ease-in-out

12 keyframe animations extracted

fa-beat

fa-bounce

fa-fade

fa-beat-fade

fa-flip

fa-shake

fa-spin

progress-bar-stripes

spinner-border

spinner-grow

placeholder-glow

placeholder-wave

Components — the closed vocabulary

7 component families · 9 variants counted on the live DOM

Component	Variants found
buttons	×2
links	×2
inputs	×1
nav Links	×1
cta Banner	×1
heading H1	×1
alert	×1

Component style specs (§4)expand

Buttons

Ghost

Background: transparent
Text: #212529 {colors.ink}
Padding: 3.5px 14px
Radius: 0px
Font: 14px weight 400
Use: Subtle action, toolbar, nav button

Primary Brand

Background: #004488 {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 5.25px 10.5px
Radius: 0px 5.25px 5.25px 0px
Border: 1px solid rgb(0, 68, 136)
Font: 14px weight 400
Use: Primary CTA / brand action

Inputs & Forms

Text Input

Background: #ffffff {colors.on-primary}
Text: #212529 {colors.ink}
Padding: 5.25px 10.5px
Radius: 0px
Border: 1px solid rgb(222, 226, 230)
Font: 14px weight 400
Use: Text fields, search inputs
Focus: border: 1px solid rgb(220, 225, 231), borderColor: rgb(220, 225, 231), boxShadow: rgba(13, 110, 253, 0.008) 0px 0px 0px 0.0855841px

Navigation

Main Nav

Background: #f8f9fa {colors.surface-2}
Padding: 7px
Radius: none
Font: 14px weight 400
Use: Fixed/sticky flex nav — N/A items

Alerts

Alert Banner

Background: #cfe2ff
Text: #052c65
Padding: 14px
Radius: 5.25px
Border: 1px solid rgb(158, 197, 254)
Font: 12.25px weight 400
Use: System alert, banner notification, toast

Layout — structure & dimensions

5 layout metrics measured

max Width1200px

header Height64px

sidebar Width0px

gap16px

container Padding24px

Responsive — real breakpoints

10 media-query stops read from the live CSS

575px

576px

767px

768px

991px

992px

1199px

1200px

1399px

1400px

Do's & Don'ts

15 enforceable rules pulled verbatim from the spec

Use Near-Black (`#212529`) for text — not pure black, it's warmer and more readable

Use OpenSans as the primary typeface — it defines the brand personality

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

Style form inputs with a `1px solid rgb(222, 226, 230)` border — use border-based inputs, not floating labels or underline-only

Maintain nav height at 49px — 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 uses an icon (not photo) — the visual language is illustrative, not photographic

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

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 introduce additional saturated accent colors — the palette is intentionally controlled

Don't remove the input border — the border is the primary affordance indicator for form fields

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

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the onetonline.org design system. Canvas #ffffff · ink #212529 · accent #004488. Type: OpenSans — 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 onetonline

DESIGN.md · narrative spec tokens.json