MallorcAmor · Sistema visual

Catálogo de design tokens

La identidad del proyecto: papel, verde, lima y tipografías locales. Una única fuente en src/styles/tokens.css; este catálogo se deriva de ella.

Descargar tokens JSONVer tokens CSS

color

--color-green-950

#14261b

--color-green-900

#23402e

--color-green-800

#2b4f38

--color-green-700

#2f5a43

--color-green-600

#3d7054

--color-green-200

#c4d3c0

--color-green-100

#e3ecdd

--color-green-50

#f0f4ec

--color-lime-500

#bcc97f

--color-lime-400

#cddc94

--color-lime-300

#dbe7ae

--color-lime-200

#e9f0c9

--color-lime-100

#f4f7e4

--color-cream

#f2f1ea

--color-paper

#fffefa

--color-ink-900

#050505

--color-ink-700

#2c2c2a

--color-ink-500

#55554f

--color-ink-300

#8a8a80

--color-morada-600

#6d3f8f

--color-morada-100

#f0e8f6

--color-success-700

#1c5a1c

--color-success-100

#e8f3e8

--color-error-700

#8a1c1c

--color-error-100

#f7e8e8

--color-focus

#085e3f

--color-surface

#fffefa

--color-surface-alt

#f2f1ea

--color-surface-tint

#f0f4ec

--color-surface-inverse

#23402e

--color-surface-night

#14261b

--color-ink

#050505

--color-ink-muted

#55554f

--color-ink-inverse

#fffefa

--color-ink-inverse-muted

#c4d3c0

--color-accent

#23402e

--color-accent-hover

#14261b

--color-accent-2

#cddc94

--color-on-accent

#fffefa

--color-on-accent-2

#23402e

--color-border

#e3e2d8

--color-border-strong

#c9c8bb

--color-border-inverse

#3d5a48

--color-season

#6d3f8f

--color-feedback-ok

#1c5a1c

--color-feedback-ok-bg

#e8f3e8

--color-feedback-error

#8a1c1c

--color-feedback-error-bg

#f7e8e8

font-family

--font-family-display

"TRJN DaVinci Text", "Georgia", serif

Mallorca, Sineu
--font-family-logo

"TAY Big Bird Regular", "TRJN DaVinci Text", "Georgia", serif

Mallorca, Sineu
--font-family-sans

"Inter", "system-ui", "-apple-system", "Segoe UI", "Arial", sans-serif

Mallorca, Sineu

font-size

--font-size-xs

0.75rem

Mallorca, Sineu
--font-size-sm

0.875rem

Mallorca, Sineu
--font-size-base

1rem

Mallorca, Sineu
--font-size-md

1.125rem

Mallorca, Sineu
--font-size-lg

clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)

Mallorca, Sineu
--font-size-xl

clamp(1.5rem, 1.3rem + 1vw, 2rem)

Mallorca, Sineu
--font-size-2xl

clamp(1.9rem, 1.5rem + 2vw, 2.75rem)

Mallorca, Sineu
--font-size-3xl

clamp(2.4rem, 1.8rem + 3vw, 3.8rem)

Mallorca, Sineu
--font-size-4xl

clamp(3rem, 2.2rem + 4vw, 5rem)

Mallorca, Sineu
--font-size-hero

clamp(3.4rem, 2.2rem + 6vw, 6.5rem)

Mallorca, Sineu

font-weight

--font-weight-regular

400

--font-weight-medium

500

--font-weight-semibold

600

--font-weight-bold

700

line

--line-height-tight

1.05

--line-height-snug

1.2

--line-height-normal

1.55

--line-height-relaxed

1.7

letter

--letter-spacing-caps

0.12em

--letter-spacing-wide

0.06em

--letter-spacing-tight

-0.01em

space

--space-0

0

--space-1

0.25rem

--space-2

0.5rem

--space-3

0.75rem

--space-4

1rem

--space-5

1.5rem

--space-6

2rem

--space-7

3rem

--space-8

4rem

--space-9

6rem

--space-10

8rem

--space-section

clamp(4.5rem, 3rem + 6vw, 8rem)

--space-gutter

clamp(1.25rem, 0.75rem + 2.5vw, 3rem)

radius

--radius-xs

0.125rem

--radius-sm

0.375rem

--radius-md

0.75rem

--radius-lg

1.25rem

--radius-xl

2rem

--radius-pill

999px

shadow

--shadow-sm

0 1px 2px rgba(20, 38, 27, 0.08)

--shadow-md

0 6px 20px rgba(20, 38, 27, 0.12)

--shadow-lg

0 18px 50px rgba(20, 38, 27, 0.18)

--shadow-xl

0 30px 80px rgba(20, 38, 27, 0.24)

--shadow-focus

0 0 0 3px #fffefa, 0 0 0 6px #085e3f

duration

--duration-1

120ms

--duration-2

220ms

--duration-3

360ms

--duration-4

640ms

--duration-5

1000ms

--duration-institutions-loop

36000ms

easing

--easing-standard

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

--easing-out

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

--easing-in-out

cubic-bezier(0.65, 0, 0.35, 1)

--easing-spring

cubic-bezier(0.34, 1.56, 0.64, 1)

stagger

--stagger

70ms

container

--container-sm

46rem

--container-md

68.75rem

--container-lg

87.5rem

z

--z-base

0

--z-sticky

10

--z-header

100

--z-menu

200

--z-modal

300

--z-skip

400

breakpoint

--breakpoint-sm

30rem

--breakpoint-md

48rem

--breakpoint-lg

64rem

--breakpoint-xl

90rem

size

--size-control

2.75rem

--size-logo

13.75rem

--size-swatch

4.5rem

border

--border-width

1px

focus

--focus-width

3px

--focus-offset

3px

decoration

--decoration-offset

0.18em

ratio

--ratio-photo

4 / 3

--ratio-hero

5 / 4

Contraste calculado

Ratios WCAG para las parejas de texto utilizadas.

Texto normal: AA ≥ 4,5:1; AAA ≥ 7:1
UsoRatioNivel
Texto principal20.2:1AAA
Texto secundario7.44:1AAA
Texto sobre crema18:1AAA
Secundario sobre crema6.63:1AA
Acción principal11.28:1AAA
Acción lima7.73:1AAA
Texto inverso11.28:1AAA
Secundario inverso7.28:1AAA

Instituciones y entidades