Prism prismd.fr

Extracted · 10 sections · 29 colors · grade B

kraken.com

Accent #5e6ad2 · Kraken-Product — 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é

kraken.com is built on a soft, near-white canvas (rgb(246, 245, 249)). The system uses rgb(113, 50, 245) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Kraken-Brand as the primary typeface. A restrained elevation system (1 distinct shadow) — shadows reserved for the few elements that must lift off the page. Motion is a first-class concern — 25 keyframe animations plus transition-driven interactions.

Color — roles, semantics & the full census

29 colors measured · click any swatch to copy

Canvas

#f6f5f9

AAA 17.4:1

Ink

#111111

AAA 17.4:1

Accent

#7132f5

AA 5.56:1

Line

#9497a9

Fail 2.67:1

Semantic states

error#d11d45success#08844fwarning#ffcd60info#0079b4

4 semantic roles found.

29 colors mined from the live renderexpand

Type — the ladder, in the real face

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

display xl

display-xl48px · 400

body

body12px · 400 · ×4.00

body sm

body-sm14px · 500 · ×0.86

caption

caption12px · 400 · ×1.17

button

button13.3333px · 400 · ×0.90

Spacing & radius, made spatial

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

Spacing scale

xxs · 2px

xs · 4px

sm · 8px

md · 12px

base · 16px

lg · 28px

xl · 36px

2xl · 54px

3xl · 80px

Radius

none
0px

xs
4px

sm
8px

md
12px

lg
20px

xl
9999px

full
9999px

Depth — elevation is extracted, not invented

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

shadow-1

Motion — easings, transitions & live keyframes

2 easing curves · 25 keyframes · hover a tile to preview

Easing & transitions

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

transition-4cubic-bezier(0, -0.01, 0.19, 0.99)

25 keyframe animations extracted

skeleton-animation

scroller-row-left-to-right

scroller-row-right-to-left

ds-menu-fadeIn

ds-popover-fadeIn

ds-toast-animated-notification-slide-left

pulse

ticker

ds-dialog-fadeIn

ds-dialog-fadeOut

ds-dialogoverlay-fadeIn

ds-dialogoverlay-fadeOut

Components — the closed vocabulary

11 component families · 33 variants counted on the live DOM

Component	Variants found
buttons	×7
nav Links	×4
tabs	×4
footer Links	×4
links	×4
heading H2	×3
cards	×2
badges	×2
inputs	×1
heading H1	×1
divider	×1

Component style specs (§4)expand

Buttons

Icon Button

Background: rgba(133, 91, 251, 0.16)
Text: #7132f5 {colors.primary-focus}
Padding: 8px
Radius: 12px
Font: 13.3333px weight 400
Use: Toolbar/UI icons
Focus: outline: rgb(113, 50, 245) solid 2px

Ghost

Background: transparent
Text: #101114
Padding: 20px 10px
Radius: 0px
Font: 14px weight 400
Use: Subtle action, toolbar, nav button
Focus: outline: rgb(113, 50, 245) solid 2px

Subtle

Background: rgba(148, 151, 169, 0.08) {colors.hairline}
Text: #101114
Padding: 6px 8px
Radius: 12px
Font: 14px weight 400
Use: Quiet action against page bg
Focus: outline: rgb(113, 50, 245) solid 2px

Primary Brand

Background: rgba(133, 91, 251, 0.16)
Text: #7132f5 {colors.primary-focus}
Padding: 8px 12px
Radius: 12px
Font: 14px weight 500
Use: Primary CTA / brand action
Focus: outline: rgb(113, 50, 245) solid 2px

Primary Brand

Background: #7132f5 {colors.primary-focus}
Text: #ffffff {colors.on-primary}
Padding: 8px 12px
Radius: 12px
Font: 14px weight 500
Use: Primary CTA / brand action
Focus: outline: rgb(113, 50, 245) solid 2px

Cards & Containers

Standard Card

Background: rgba(148, 151, 169, 0.08) {colors.hairline}
Padding: 6px 8px
Radius: 12px
Use: Content containers, listing items
Hover: backgroundColor: #9497a9

Inputs & Forms

Text Input

Background: transparent

Layout — structure & dimensions

5 layout metrics measured

max Width1200px

header Height64px

sidebar Width0px

gap16px

container Padding24px

Responsive — real breakpoints

42 media-query stops read from the live CSS

359px

370px

375px

400px

425px

426px

450px

530px

550px

599px

600px

639px

640px

767px

768px

769px

890px

896px

897px

950px

959px

980px

1023px

1024px

1025px

1040px

1050px

1080px

1110px

1170px

1234px

1264px

1279px

1280px

1320px

1392px

1440px

1441px

1460px

1536px

1560px

2350px

Do's & Don'ts

21 enforceable rules pulled verbatim from the spec

Use Off-White (`#f6f5f9`) as the page background — it's intentionally not pure white

Use Kraken-Product as the primary typeface — it defines the brand personality

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 (`#7132f5`) as the primary accent — it's the brand's signature interactive color

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

Apply 6px 8px padding inside cards — matches the design system's content breathing room

Use 12px border-radius on cards — consistent with the grid card corners

Maintain nav height at 60px — consistent vertical space for the navigation bar

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

Keep the hero centered and text-driven — no decorative media, typography carries the message

Each card includes a top image — imagery is part of the card identity, not optional

Lay out testimonials in a grid (36+ items) — quantity signals scale and trust

Don't

Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity

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

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 collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence

Don't add hero illustrations or photos — they'll break the typographic restraint

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 kraken.com design system. Canvas #f6f5f9 · ink #111111 · accent #7132f5. Type: Kraken-Product — 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 kraken

DESIGN.md · narrative spec tokens.json