Design System · Guardião

DESIGN.md · Guardião de Design

Sistema canônico do The Color Table

Estrutura padronizada (14 seções) derivada do DESIGN.md. Toda decisão visual do projeto vive aqui. Nada deve ser inventado fora deste guia.

Explorar tokens

Identidade Visual

A marca precisa parecer uma mesa posta para conversa, não uma vitrine clínica. Calor humano, papel, cor e lettering.

Setor

Livros digitais imprimíveis para crianças e famílias

Vibe

Warm editorial artesanal — acolhedor, leve, premium sem frieza

Público-alvo

Pais e mães de crianças 3–5 anos; educadores e terapeutas familiares

Cores

Convenção: nunca hex inline. Sempre via classe Tailwind do tailwind.config.ts. NÃO usar bg-[var(--color-X)]/Y — modificadores de opacidade quebram com CSS variables hex.

#C1623F

primary / ember

CTAs, destaques, acentos primários

#D4935A

primary-light / ochre

Acentos secundários, bordas suaves

#6B4C3B

primary-dark / walnut

Texto principal, hover do CTA

#6B8FAB

secondary / slate

Acento da coleção Our Family

#D4935A

accent (= ochre)

CTAs urgentes, badges destacadas

#FFFDF9

bg / white

Fundo geral da página

#F5EDE0

bg-subtle / linen

Seções claras, cards

#E8C99A

sand

Texto sobre fundos escuros

#2C1A0E

ink

Headings escuros, manifesto, footer

#6B4C3B

text

Texto principal sobre fundo claro

#8C6E5B

text-muted

Apoio, meta, descrições secundárias

#E6D8C7

border

Bordas e divisores

#F0E7DB

border-subtle

Divisores muito sutis

#EBF1F5

slateLight

Fundo da capa "My Two Homes"

#22C55E

success

Estados positivos

#F59E0B

warning

Avisos

#EF4444

error

Erros, destrutivo

Regras de pareamento (não negociáveis)

Texto sobre Ember/Ochre → branco

Texto sobre Linen/White → Walnut ou Ink

Texto sobre Ink → Sand ou Linen

Tipografia

Childling para marca e headlines, Clear Sans para leitura, Caveat como acento secundário em frases de efeito.

Display

Childling

Pesos: 400 (regular)

Local — _assets/fonts/Childling-Regular.woff2

The Color Table

Body

Clear Sans

Pesos: 300 / 400 / 500

Local — _assets/fonts/ClearSans.woff2

Five printable coloring books for the families they live in.

Acento

Caveat

Pesos: 400 / 600 / 700

Google Fonts

Pull up a chair.

Escala

display-2xl

clamp(3.25rem, 5vw, 6rem) / lh 0.92

Hero principal

display-xl

clamp(2.25rem, 4.8vw, 4.4rem) / lh 0.95

Headline hero

display-lg

clamp(2rem, 3.5vw, 3rem) / lh 1

Títulos de seção

display-md

clamp(1.6rem, 2.5vw, 2.25rem) / lh 1.05

Cards editoriais

body-xl

clamp(1.05rem, 1.8vw, 1.25rem) / lh 1.7

Subtítulo hero, lead

body-lg

1.125rem / lh 1.7

Texto em destaque

body-md

1rem / lh 1.7

Corpo padrão (default)

body-sm

0.875rem / lh 1.6

UI, captions

label

0.7rem / lh 1.4

Eyebrow, uppercase, tracking 0.10–0.12em

Hierarquia editorial

h1display-xl

Every family deserves to see itself on the page.

h2display-lg

Five printable coloring books.

h3display-md

For real families and real feelings.

h4display-sm / Clear Sans 500

How it works

pbody-md

Designed for the real families they live in — and the big feelings that come with them.

p.leadbody-xl

A gentle, warm way to talk about home with kids ages 3–5.

eyebrowlabel

Collection 01 — Our Family

Listas e bullets

Lista padrão (•)

Cinco livros para colorir.
Crianças entre 3 e 5 anos.
Para famílias reais.

Lista de checks (lucide Check, ember)

10 ilustrações por livro
Personagens étnico-neutros
Imprima quantas vezes precisar

text-wrap

Aplicado globalmente em @layer base:

* { text-wrap: balance !important; }

Espaçamento

Escala base (4px grid) + tokens de seção + larguras de container.

Escala base

space-1

0.25rem

Gap mínimo

space-2

0.5rem

Ícone + texto

space-3

0.75rem

Elementos próximos

space-4

1rem

Gap padrão

space-6

1.5rem

Entre cards

space-8

2rem

Entre subgrupos

space-12

3rem

Entre blocos

space-16

4rem

Entre subseções

Seções

section-xl

6rem

Entre seções principais

section-lg

6rem

Seções secundárias

section-md

5rem

Subseções

section-sm

3rem

Blocos internos

Containers

container

1100px

Container principal (grids)

editorial

700px

Texto editorial / leitura longa

pricing

760px

Bloco de pricing

Bordas (Radii)

Cards: 24px (amigável, tátil). Botões: pill (9999px) — default da marca.

radius-none

Arestas vivas

radius-sm

4px

Inputs, tags pequenas

radius-md

12px

Botões padrão

radius-card

24px

Cards (default)

radius-lg

28px

Cards grandes, hero, blocos editoriais

radius-button

9999px

Botões pill (default da marca)

radius-pill

9999px

Badges

radius-full

9999px

Avatares circulares

Sombras

Discretas em repouso, mais elevadas em hover. Sombra warm exclusiva para CTA primário.

shadow-sm

0 1px 3px rgba(44, 26, 14, 0.04)

Sutil, divisores

shadow-card

0 18px 45px rgba(44, 26, 14, 0.12)

Cards em repouso

shadow-warm

0 16px 40px rgba(193, 98, 63, 0.18)

CTA primário

shadow-lift

0 26px 60px rgba(44, 26, 14, 0.18)

Cards em hover

Breakpoints

Mobile-first. Grids colapsam para 1 coluna abaixo de md.

640px

Mobile grande

768px

Tablet

1024px

Desktop pequeno

1280px

Desktop

2xl

1536px

Desktop grande

Botões

Três variantes (primary, secondary, ghost) em três tamanhos. Pill por default. Estados disabled, focus-visible e loading consistentes.

Variantes

Tamanhos

Focus: ring 2px solid ember, outline-offset 4px (definido em globals.css).

Cards

Variantes principais: book (capas), editorial (linen), pricing-light/dark, flat.

The Color Table

book

Capa 3:4, hover lift -6px, shadow-card → shadow-lift.

editorial

Manifesto, blocos editoriais

Fundo linen, sem hover, padding generoso (2rem).

pricing-light

All 5 books

$39.57

complete collection

pricing-dark

Single book

$9.57

per book · instant download

Inputs

Estados: default, focus, error, disabled. Altura 2.75rem, radius-md, padding-x 0.875rem.

Default

EmailDisabled

Error

EmailEmail inválido

Com ícone

Buscar

Links

Inline em parágrafo (ember + underline), standalone (ember sem underline, com hover underline), navbar/footer (walnut/80 → walnut).

Inline

Conheça nossa coleção completa de cinco livros.

Standalone (CTA-like)

Ver todos os livros

Navbar / Footer

Badges / Tags

Solid (ember), subtle (linen + walnut), outline (transparente + border).

Best for educatorsCollection 01BetaNovo

Iconografia

lucide-react · stroke-width 1.5 · cor herda de currentColor.

Tamanhos

16pxEm botão

20pxDefault

24pxEm hero

Showcase

Para ícones expressivos fora do conjunto lucide, usar SVG inline.

Motion

Durações, easings e variants padrão. Variants vivem em packages/ui/animations.

duration-fast

150ms

Hover, focus

duration-base

300ms

Transições padrão

duration-slow

600ms

Reveals, slide-ins

duration-stagger

80ms

Delay entre filhos

ease-out

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

Entrada padrão

ease-in-out

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

Loop, reversíveis

Variants — demonstração ao vivo

Conteúdo

fadeInUp

opacity 0→1, translateY(24px→0), 600ms, ease-out

Reveals de seções e componentes ao entrar na viewport

Fade simples

fadeIn

opacity 0→1, 300ms

Tooltips, modais, overlays

My Two Homes

My Bigger Family

Just the Two of Us

staggerChildren

staggerChildren: 0.08s por filho

Listas, grids de cards, passos

Passe o mouse

hover lift card

hoverLift (card)

translateY(-6px), shadow-lift, 300ms, ease-out

Cards de livro em hover

primaryHover (botão)

translateY(0→-2px), ember→walnut, 300ms

CTAs primários em hover — sem scale

Ativa ao rolar

useInView

scrollReveal (useInView)

once: false para demo — em produção usar once: true

Qualquer elemento que deve animar ao entrar na viewport

Layout

Padrões de hero, seção, grid de cards, navbar e footer. Containers e ritmo vertical do projeto.

Hero

Container: container (1100px)
Padding vertical: section-xl
Estrutura: headline display-xl + subtítulo body-xl + CTA primário pill + imagem editorial

Seção padrão

Padding: 6rem 2rem
Container: container · editorial · pricing
Eyebrow: opcional acima do título (label uppercase em ember)

Grid de cards

Mobile: 1 coluna
Tablet (≥768px): 2 colunas, gap space-6
Desktop (≥1024px): 3 colunas, gap space-8

Navbar / Footer

Navbar: fixa, rgba(255,253,249,0.92) + backdrop-blur-md
Marca: manuscrita à esquerda
CTA: "Get the Books" (primary sm) à direita
Footer: background ink, texto sand/linen, padding section-lg

Guardião de Design ativo

Toda decisão visual passa por aqui. Nada deve ser inventado fora do DESIGN.md.

Voltar ao topo