Design Systems
W

Design system extracted from your live app

Wattane

www.wattane.com
Tailwind CSS73 tokens

Color6

Semantic roles and the most-used colors detected across the live site.

background

background

#0b1020

text

text

#ffffff

primary

primary

#94a3b8

accent

accent

#00f2ff

high

#151c32

#151c32

low

#ff00ff

#ff00ff

Typography33

The type scale, by role, exactly as it renders on the live site.

displayAnton230.4px (14.40rem)· 400display
heading-2Anton96px (6.00rem)· 400heading-2
displayAnton96px (6.00rem)· 400display
heading-2Anton60px (3.75rem)· 400heading-2
displayAnton60px (3.75rem)· 400display
heading-2Anton48px (3.00rem)· 400heading-2
textAnton30px (1.88rem)· 400text
textAnton24px (1.50rem)· 400text
bodyInter20px (1.25rem)· 400body
textAnton20px (1.25rem)· 400text
linkInter20px (1.25rem)· 700link
linkInter18px (1.13rem)· 700link
bodyInter18px (1.13rem)· 400body
heading-3Inter18px (1.13rem)· 700heading-3

Spacing15

Detected scale · base ≈8px

4px×10
6px×5
8px×1
10px×2
16px×23
20px×9
27.648px×1
32px×4
40px×1
48px×3
56px×1
64px×1

Radius5

Corner radii observed across buttons, cards and inputs.

10px

12px

16px

24px

3.35544e+07px

Motion3

Transition durations and easing curves in use.

Durations

0.001s×373

Easing

ease
cubic-bezier(0.4, 0, 0.2, 1)

Breakpoints3

Responsive cut points detected in the stylesheet.

680px
760px
1400px

Components5

Interactive primitives, rebuilt from their extracted resting-state styles — not screenshots.

buttonmedium
Lancer une partie
radius
16px
padding
0px 40px
buttonmedium
Jouer maintenant →
radius
16px
padding
0px 48px
link
link
link