Design Systems
T

Design system extracted from your live app

The Sphinx

thesphinx.ai
Element Plus/UI124 tokens

Color15

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

background

background

#0e0c0b

text

text

#ede8de

primary

primary

#a38c75

high

#e6a000

#e6a000

high

#352e27

#352e27

medium

#e8b84d

#e8b84d

medium

#d2c2ac

#d2c2ac

low

#362a17

#362a17

low

#6b552e

#6b552e

low

#000000

#000000

medium

#847362

#847362

high

#161412

#161412

low

#32291b

#32291b

low

#221f1c

#221f1c

low

#494036

#494036

Typography60

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

displayCinzel88px (5.50rem)· 700display
heading-2Cinzel40px (2.50rem)· 700heading-2
textCinzel40px (2.50rem)· 700text
bodyRaleway32px (2.00rem)· 400body
bodyRaleway28.8px (1.80rem)· 400body
bodyRaleway28.8px (1.80rem)· 700body
bodyRaleway25.6px (1.60rem)· 400body
textCinzel24px (1.50rem)· 400text
bodyRaleway20.8px (1.30rem)· 400body
textCinzel19.2px (1.20rem)· 400text
bodyRaleway19.2px (1.20rem)· 400body
bodyRaleway17.6px (1.10rem)· 300body
uiArial17.6px (1.10rem)· 400ui
uiCinzel16.8px (1.05rem)· 600ui

Spacing20

Detected scale · base ≈8px

2.4px×12
3.2px×8
4px×56
4.8px×13
5.6px×9
6.4px×10
8px×16
9.6px×8
11.2px×24
12px×12
12.8px×9
14.4px×6

Radius9

Corner radii observed across buttons, cards and inputs.

2px

3px

6px

8px

12px

16px

20px

50%

99px

Motion4

Transition durations and easing curves in use.

Durations

0.001s×134

Easing

ease
cubic-bezier(0.16, 1, 0.3, 1)
linear

Breakpoints4

Responsive cut points detected in the stylesheet.

390px
520px
768px
900px

Components4

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

buttonhigh
𓀀 Solo
radius
12px
padding
11.2px 24px
buttonhigh
𓀀𓀁 Duel
radius
12px
padding
11.2px 24px
link
link