PokeLocke — Design System

Colores

--bg

#0b0d13

--bg2

#0f121a

--surface

rgba(255,255,255,.035)

--panel

rgba(255,255,255,.05)

--ink

#eef1f7

--dim

#9aa3b4

--faint

#646d80

--faint2

#525a6b

--line

rgba(255,255,255,.08)

--line2

rgba(255,255,255,.15)

--acc

oklch(0.72 0.16 255)

--acc-d

oklch(0.56 0.15 255)

--acc-ink

#06131f

--acc-soft

oklch(0.72 0.16 255/.15)

--win

oklch(0.78 0.16 150)

--gold

oklch(0.82 0.13 85)

--neg

oklch(0.65 0.17 25)

Tipografía

Space Grotesk — Display · 400 Regular

Space Grotesk — Display · 600 Semibold

Space Grotesk — Display · 700 Bold

Space Grotesk — Display · 800 Extrabold

Manrope — Body · 400 Regular

Manrope — Body · 600 Semibold

Manrope — Body · 700 Bold

Manrope — Body · 800 Extrabold

text-2xs — 10px

text-xs — 11px

text-sm — 12px

text-base — 14px

text-md — 15px

text-lg — 16px

text-xl — 17px

text-2xl — 20px

text-3xl — 24px

text-4xl — 30px

text-5xl — 38px

text-6xl — 58px

Border Radius

none

3px

6px

8px

base

10px

12px

14px

2xl

16px

3xl

18px

4xl

20px

full

999px

Sombras

shadow

shadow-glow

shadow-sm

Spacing

p-0

p-1

p-2

p-3

p-4

p-5

p-6

p-7

p-8

p-9

p-10

p-11

p-12

p-13

p-14

Responsive

Breakpoint activo:

— (mobile, < 640px)sm (≥ 640px)md (≥ 768px)lg (≥ 1024px)xl (≥ 1280px)2xl (≥ 1536px)

sm
640px

md
768px

lg
1024px

xl
1280px

2xl
1536px