Foundations — Growth Summit DS

01 · Color

Paleta

Definida en OKLch para mejor consistencia perceptual. Foundation neutra + un naranja decisivo + rosa de movimiento. Sin gradientes, sin tonos beige.

Foundation

Background

--bg

Surface

--surface

Surface alt

--surface-2

Ink

--ink

Ink soft

--ink-soft

Muted

--muted

Border

--border

Marca

Orange · signature

--orange

Orange hover

--orange-hover

Orange soft

--orange-soft

Pink · momentum

--pink

Pink hover

--pink-hover

Status

Success

--success

Warn

--warn

Danger

--danger

Inverso (dark surface)

Ink bg

--ink-bg

Ink surface

--ink-surface

Ink fg

--ink-fg

Ink muted

--ink-muted

Ink border

--ink-border

Regla de naranja

Máximo dos apariciones por pantalla: una en el CTA principal, otra como acento editorial (eyebrow, stat, underline). Nunca como background de página completa.

02 · Tipografía

Escala fluida

Sans display para impacto, sans body para lectura, monospace para datos. La escala usa clamp() para responder al viewport sin breakpoints manuales.

Display family

Aa Bb Cc

Söhne · Inter Display · system fallback

Body family

Aa Bb Cc

SF Pro Text · Inter · system fallback

Mono family

Aa 01 ##

JetBrains Mono · IBM Plex Mono

Escala

Display XL

--t-display-xl clamp(48px, 7vw, 96px) weight 700 · -0.03em

Display L

--t-display-l clamp(36px, 5vw, 64px) weight 700 · -0.025em

Headline 1

--t-h1 clamp(28px, 3.2vw, 44px) weight 600 · -0.02em

Headline 2

--t-h2 clamp(22px, 2.4vw, 32px) weight 600 · -0.015em

Headline 3 — subsección

--t-h3 clamp(18px, 1.6vw, 22px) weight 600 · -0.01em

Lede / body large — la línea editorial que abre cada sección con un párrafo de respiro.

--t-body-l 18px · 1.55 weight 400

Body — el tamaño por defecto del sistema, optimizado para 60–70 caracteres por línea.

--t-body 16px · 1.6 weight 400

Eyebrow · 12 caracteres

--t-eyebrow 12px mono uppercase letter-spacing 0.14em

03 · Espaciado

Escala base-4

Diez pasos. La mayoría del diseño vive en --s-4 (16px), --s-5 (24px) y --s-6 (32px). Los pasos altos son para padding de sección.

--s-1 · 4px · hairline gap

--s-2 · 8px · inline gap

--s-3 · 12px · button padding-x

--s-4 · 16px · stack default

--s-5 · 24px · card padding

--s-6 · 32px · sub-section gap

--s-7 · 48px · grid gap

--s-8 · 64px · section padding mobile

--s-9 · 96px · section padding desktop

--s-10 · 128px · hero padding

04 · Radios

Esquinas decisivas

El botón principal usa --r-0 (0px) — corte recto, postura B&O. Cards default usan 8px; pills usan radio completo.

--r-0 · 0px
botones primarios

--r-1 · 4px
inputs, chips

--r-2 · 8px
cards default

--r-3 · 12px
cards grandes, modales

--r-full · 9999px
pills, avatares

05 · Elevación

Sombras y firma brutal

Dos sombras "suaves" para popovers y cards en hover. La "brutal" — un offset sólido de naranja — es la firma del sistema; úsala con criterio.

Shadow 1 · subtle --shadow-1 Cards en hover, dropdowns

Shadow 2 · prominent --shadow-2 Modales, popovers anclados

Brutal · firma B&O 4px 4px 0 var(--orange) CTAs en hover, cards destacados

06 · Motion

Movimiento que no estorba

Tres duraciones, dos easings. Hover y micro-feedback en 120ms; transiciones de página en 200ms; revelaciones en 320ms. Nunca más.

Pasa el cursor

--ease-out · cubic-bezier(0.16, 1, 0.3, 1)

Revelaciones, entradas

Pasa el cursor

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

Hover, focus, micro-interacciones

Pasa el cursor

linear

Loaders, contadores

Respeta prefers-reduced-motion

Toda animación decorativa debe envolverse en @media (prefers-reduced-motion: no-preference). Si el usuario pidió menos movimiento, dale exactamente eso.

07 · Layout

Anchuras y respiro

Tres anchos canónicos. Padding lateral fluido. Padding vertical de sección con clamp(). Sin breakpoints manuales en casi todo.

Container default

1200px

--w-content · uso general (este sitio)

Container wide

1440px

--w-wide · landings, hero, tablas anchas

Prose

68ch

--w-prose · artículos, blog, FAQ

Snippet — usa los tokens, no los valores

/* Sí — referenciar tokens */
.hero {
  padding-inline: var(--padding-x);
  max-width: var(--w-wide);
  background: var(--bg);
  color: var(--ink);
}

/* No — valores hardcodeados */
.hero {
  padding-inline: 48px;
  max-width: 1440px;
  background: #fdfdfb;
  color: #1a1715;
}