Style Guide / Design System

Collection 01 — Our Family

Contrato visual do projeto no padrão THV Studio: fontes, paleta, tom de voz, princípios de layout, componentes-base, capas da coleção e mapa da landing. Tudo derivado diretamente do copy doc do cliente.

Fonte

`our-family-copy-doc.md` foi usado como referência literal para tokens e estrutura.

Entrega THV

Route in-app, `design-system-preview.html` estático e documentação do projeto alinhados.

The Color Table

My Two Homes

Both places are mine

The Color Table

Just the Two of Us

We are a whole family

The Color Table

How I Joined My Family

Chosen and loved

Fontes

O sistema tipográfico agora usa Childling para marca e headlines, Clear Sans para leitura e Caveat como fonte secundária para frases de efeito e momentos mais emocionais.

Fontes carregadas

_assets/fonts/Childling-Regular.woff2
_assets/fonts/ClearSans.woff2

Caveat secundária:
https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&display=swap

Marca / headlines / títulos de livroChildling

The Color Table

Fonte principal de display, carregada localmente do projeto.

Headline heroChildling

Every family deserves to see itself on the page.

Define o caráter da marca nos títulos principais.

Subtítulos / corpoClear Sans

Five printable coloring books for children ages 3–5, designed for the real families they live in — and the big feelings that come with them.

Fonte principal de leitura, com tom limpo e estável.

Frases de efeito / apoioCaveat

Pull up a chair.

Uso secundário, só para momentos mais emocionais e editoriais.

Eyebrow / labelsClear Sans 500

Collection 01 — Our Family

Uppercase com tracking de 0.10–0.12em.

Escala tipográfica

display-xl

clamp(2.8rem, 6vw, 5.5rem)

Headline hero

display-lg

clamp(2rem, 3.5vw, 3rem)

Títulos de seção

display-md

clamp(1.6rem, 2.5vw, 2.25rem)

Cards e blocos editoriais

body-xl

clamp(1.05rem, 1.8vw, 1.25rem)

Subtítulo hero

body-lg

1.125rem

Descrição em destaque

label

0.7rem / 0.12em tracking

Eyebrow text

Paleta de Cores

O sistema parte de Ember como cor-âncora e usa Ochre, Linen e Walnut para calor editorial. Slate entra apenas como acento da coleção, especialmente nas capas.

Ember

primary

#C1623F

Cor-âncora da marca. CTAs, destaques e acentos primários.

Ochre

accent

#D4935A

Acentos secundários, bordas suaves e detalhes quentes.

Sand

sand

#E8C99A

Texto sobre fundos escuros e elementos suaves de contraste.

Linen

bg-subtle

#F5EDE0

Fundo de seções claras e cards de livro.

Walnut

primary-dark

#6B4C3B

Corpo de texto principal e hover do botão primário.

Ink

ink

#2C1A0E

Headings escuros e fundo de manifesto, pricing e footer.

White

#FFFDF9

Fundo geral da página. Branco quente, nunca clínico.

Slate

secondary

#6B8FAB

Acento da coleção Our Family, usado nas capas dos livros.

Slate Light

slateLight

#EBF1F5

Fundo da capa do livro My Two Homes.

Regra de contraste

Texto sobre Ember ou Ochre → sempre branco.

Texto sobre Linen ou White → Walnut ou Ink.

Texto sobre Ink → Sand ou Linen.

Elementos de marca

The Color Table

Collection 01 — Our FamilyBest for educators

Tom de Voz

O copy doc deixa claro: acolhedor e direto para pais, respeitoso e profissional para educadores, sem cair em linguagem clínica. O design system precisa refletir isso também no microcopy.

Tom

Para pais

Acolhedor e direto, como uma amiga que também é mãe.
Sem sentimentalismo pesado ou discurso terapêutico.
A linguagem deve abrir conversa, não dar diagnóstico.

Tom

Para educadores

Respeitoso e profissional, sem soar clínico.
Clareza prática sobre uso em sala, aconselhamento e leitura guiada.
O texto deve transmitir confiança sem endurecer a marca.

Evitar

ajudar crianças a superar traumas
livro terapêutico
linguagem clínica ou pesada

Preferir

conversa
história
colorir juntos
seu jeito de família

Exemplo de subtítulo

Five printable coloring books for children ages 3–5, designed for the real families they live in — and the big feelings that come with them.

Princípios de Layout

Os princípios do briefing são específicos: reveal suave, cards grandes com 20–24px, botões pill, padding de seção em 6rem 2rem, grid limitado a 1100px e collapse mobile-first.

Scroll reveal

opacity 0 → 1 + translateY(24px) → 0

Entrada suave ao entrar na viewport.

Border radius

20–24px / 100px

Cards grandes arredondados e botões pill.

Espaçamento de seção

padding: 6rem 2rem

Ritmo base da landing inteira.

Larguras máximas

1100px / 700px / 760px

Grid, editorial e pricing.

Mobile-first

1 coluna abaixo de 640–768px

Todos os grids colapsam para leitura limpa.

Shadows

Card

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

Warm CTA

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

Lift hover

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

Containers

Grid sections

1100px

base dos grids de livros, testimonials e sobre

Editorial text

700px

blocos de manifesto, FAQ e texto corrido

Pricing

760px

comparativo de oferta

Componentes Base

O padrão do projeto precisa mostrar os blocos que realmente serão usados na landing: navbar, botões, feature panel, cards de pricing e capas dos livros.

The Color Table

Get the Books

Buttons

Hover primário

Feature panel

10 illustrations per book

Parent pages included

Ethnicity-neutral characters

Print as many times as you need

Single book

One story, all yours.

$9.57

per book · instant download

Best for educators

Full collection

All 5 books. Every family.

$39.57

complete collection · save $8.28

Capas da Coleção

As cinco capas precisam aparecer como família visual. O guide deve registrar as cores-base, o badge da marca, a tipografia manuscrita e o padrão de descrição/preço.

The Color Table

My Two Homes

Both places are mine

For children navigating two loving homes after separation. Validates both spaces, processes the feelings in between.

$9.57 / PDF download

The Color Table

My Bigger Family

More love, more us

For blended families and step-siblings. Celebrates the growth without erasing what came before.

$9.57 / PDF download

The Color Table

Just the Two of Us

We are a whole family

For single-parent families. Celebrates the bond, fills the child with pride — never lack.

$9.57 / PDF download

The Color Table

Grandma's House Is Home

Love lives here too

For children raised by grandparents. Honors the relationship with warmth and without explanation needed.

$9.57 / PDF download

The Color Table

How I Joined My Family

Chosen and loved

For adopted children. A gentle, joyful story of being chosen, wanted, and wholly loved.

$9.57 / PDF download

Estrutura da Landing

A estrutura foi definida seção a seção no copy doc. O design system precisa registrar a ordem e a função de cada bloco, para que a implementação futura não invente etapas.

Navbar fixa com blur e CTA para #pricing.

Hero full-height em Linen com eyebrow, headline, subtítulo e 2 CTAs.

Manifesto strip em Ink com quote curta e assinatura The Color Table.

About em duas colunas com editorial + feature card.

Grid dos 5 livros em Linen com hover lift.

How it works em 4 passos conectados.

Pricing em Ink com comparação single book vs full collection.

Testimonials com 3 cards responsivos.

FAQ com separadores sutis.

Final CTA em Ember e footer em Ink.

Contrato visual pronto

O projeto agora segue o copy doc e o padrão de design system do THV Studio.

Open /design-system Back to top