Analyse du design system

getwelly.com

getwelly.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(200, 227, 2) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Leitura-Roman3 as the primary typeface. A restrained elevation system (3 distinct shadows) — shadows reserved for the few elements that must lift off the page. Motion is a first-class concern — 14 keyframe animations plus transition-driven interactions.

Accent #c8e302 · police principale Styrene A Web

Chaque valeur ci-dessous est vérifiée à la capture. getdesign.md décrit — prismd montre : chaque couleur, police et courbe ici a été lue via getComputedStyle() sur le rendu réel capturé à droite, jamais affirmée à la main.

Rapport DESIGN.md complet · light & dark · fichiers tokens · Paiement non activé — on mesure la demande d’abord.

https://getwelly.com ·extrait le 2026-08-11 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

Couleurs — rôles, sémantique & recensement complet

20 couleurs mesurées · clique une pastille pour copier

Canvas

#ffffff

AAA 12.04:1

Ink

#003e37

AAA 12.04:1

Accent

#c8e302

Fail 1.45:1

Line

#000000

AAA 21:1

États sémantiques

Aucune couleur d’état sémantique détectée — ce système signale l’état par le poids & le motion, pas la teinte.

20 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

7 rôles · rendu live dans la vraie Inter (woff2 capturé) · lignes éditables, clique une spec pour copier

display xl

display-xl86.8778px · 400

display lg

display-lg74.16px · 400 · ×1.17

display md

display-md22px · 500 · ×3.37

body

body14px · 400 · ×1.57

body sm

body-sm70px · 400 · ×0.20

button

button16.5445px · 500 · ×4.23

mono

mono14.5px · 500 · ×1.14

Espacements & arrondis, rendus spatiaux

9 paliers d’espacement · 7 arrondis · barres = largeurs px exactes

Échelle d’espacement

xxs · 2px

xs · 6px

sm · 10px

md · 15px

base · 20px

lg · 30px

xl · 37px

2xl · 58px

3xl · 64px

Arrondis

none
0px

xs
2.5px

sm
8px

md
10px

lg
20px

xl
38px

full
9999px

Profondeur — l’élévation est extraite, pas inventée

3 ombres mesurées sur la page live · clique une tuile pour copier sa valeur brute

shadow-1

shadow-2

shadow-3

Motion — courbes, transitions & keyframes réels

3 courbes d’easing · 14 keyframes · survole une tuile pour prévisualiser

Courbes & transitions

transition-2linear

transition-3ease-out

transition-5cubic-bezier(0.555, 0.205, 0.295, 0.975)

14 animations keyframes extraites

shopify-rotator

shopify-dash

acceleratedCheckoutLoadingSkeleton

moneyAnimation

rotate

dash

loader

bounce5

ticker

bouncing-ball

onetrust-fade-in

eapps-instagram-feed-loader

Composants — le vocabulaire fermé

15 familles de composants · 66 variantes comptées sur le DOM live

Composant	Variantes
buttons	×10
badges	×10
links	×10
nav Links	×9
heading H2	×7
footer Links	×6
heading H3	×4
inputs	×2
heading H1	×2
search Bar	×1
cards	×1
status Badge	×1
cta Banner	×1
rating Display	×1
price Tag	×1

Specs de style des composants (§4)déplier

Buttons

Ghost

Background: transparent
Text: #003e37 {colors.primary-focus}
Padding: 1px 6px
Radius: 0px
Font: 13.3333px weight 400
Use: Subtle action, toolbar, nav button
Focus: color: rgb(0, 62, 55), borderColor: rgb(0, 62, 55), outline: rgb(0, 62, 55)
Active: color: rgb(255, 0, 0), borderColor: rgb(255, 0, 0), outline: rgb(255, 0, 0)

Icon Button

Background: transparent
Text: #003e37 {colors.primary-focus}
Padding: 10px
Radius: 0px
Font: 16px weight 400
Use: Toolbar/UI icons
Focus: color: rgb(0, 62, 55), borderColor: rgb(0, 62, 55), outline: rgb(0, 62, 55)
Active: color: rgb(255, 0, 0), borderColor: rgb(255, 0, 0), outline: rgb(255, 0, 0)

Pill

Background: #c8e302 {colors.primary}
Text: #003e37 {colors.primary-focus}
Padding: 0px 16.2896px
Radius: 44.5249px
Font: 16.5445px weight 500
Use: Status pills, tags, chips
Focus: color: rgb(0, 62, 55), borderColor: rgb(0, 62, 55), outline: rgb(0, 62, 55)
Active: color: rgb(255, 0, 0), borderColor: rgb(255, 0, 0), outline: rgb(255, 0, 0)

Pill

Background: #c8e302 {colors.primary}
Text: #003e37 {colors.primary-focus}
Padding: 0px 26px
Radius: 38px
Font: 13px weight 500
Use: Status pills, tags, chips
Focus: color: rgb(0, 62, 55), borderColor: rgb(0, 62, 55), outline: rgb(0, 62, 55)
Active: color: rgb(255, 0, 0), borderColor: rgb(255, 0, 0), outline: rgb(255, 0, 0)

Inputs & Forms

Text Input

Background: transparent
Text: #003e37 {colors.primary-focus}
Padding: 0px 0px 0px 10px
Radius: 2px
Border: 0px none rgb(0, 62, 55)
Font: 14.5px weight 500
Use: Text fields, search inputs

Navigation

Main Nav

Background: #ffffff {colors.surface-1}
Padding: 0px 95.904px
Radius: none
Font: 14px weight 400

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height64px

sidebar Width0px

gap16px

container Padding0px

Responsive — vrais breakpoints

29 points de rupture lus dans le CSS live

375px

400px

425px

426px

450px

474px

479px

510px

530px

550px

600px

630px

631px

639px

640px

660px

679px

680px

750px

767px

768px

880px

890px

896px

1023px

1024px

1200px

1280px

1440px

À faire / À éviter

20 règles applicables, verbatim de la spec

À faire

Use Charcoal (`#003e37`) for text — not pure black, it's warmer and more readable

Use Styrene A Web as the primary typeface — it defines the brand personality

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

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

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

Use 44.5249px border-radius on primary buttons — the brand uses generously-rounded CTAs

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

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

Include a search input directly in the nav — discoverability is a primary UX value here

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

Include a newsletter signup in the footer — email capture is part of the conversion funnel

À éviter

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

Don't use sharp-cornered or pill buttons — 44.5249px is the CTA border-radius standard

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

Guide agent & export

Prompt prêt à coller + les vrais fichiers derrière cette page

Construis une UI dans le design system de getwelly.com. Fond #ffffff · encre #003e37 · accent #c8e302. Typo : Styrene A Web — respecte l’échelle taille/graisse du §3. Arrondis, espacements, ombres : uniquement les échelles extraites (aucun nombre magique). La spec complète suit — colle le DESIGN.md ci-dessous dans ton agent.

Chaque valeur ci-dessus est vérifiée par getComputedStyle.

$ npx prism-design add getwelly

DESIGN.md · narrative spec tokens.json