Doe Agora

Design System

Tipografia

O sistema tipográfico combina duas famílias que equilibram expressão e legibilidade: Lilita One para impacto nos títulos, e Merriweather para a confortável leitura do corpo de texto.

Famílias Tipográficas

Headings, Display & Navigation

Lilita One

É uma fonte robusta, arredondada e com personalidade — características que transmitem calor e acolhimento sem perder seriedade. O traço cheio e as curvas generosas têm algo de infantil e alegre, o que conversa diretamente com o universo das crianças atendidas. Ao mesmo tempo, ela é firme o suficiente para dar autoridade institucional nos títulos, sem precisar gritar. Para uma ONG que trabalha com famílias, esse equilíbrio entre leveza e credibilidade é exatamente o que se busca na primeira impressão.

Estilos Disponíveis: Regular 400 (único)

Google Font URL: fonts.google.com/specimen/Lilita+One

Corpo / Interface

Merriweather

Foi desenhada especificamente para leitura em telas, com serifas bem definidas e espaçamento generoso entre as letras. Isso a torna confortável para pais que leem textos mais longos - como descrições de projetos, notícias e formulários - sem que a leitura canse. A serifa também empresta um tom mais humano e próximo ao texto, diferente das fontes sem serifa que tendem a soar mais frias ou técnicas. Para uma organização que depende da confiança das famílias, ter um texto fácil e agradável de ler já é uma forma de cuidado.

Estilos Disponíveis: Regular, Italic, Bold, Bold Italic

Google Font URL: fonts.google.com/specimen/Merriweather

Escala Tipográfica

<h1> Título Principal

class: .title-1
fonte-size: 3.0rem
line-height: 4.3rem

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<h2> Título de Seção

class: .title-2
fonte-size: 2.4rem
line-height: 3.3rem

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<h3> Subtítulo

class: .title-3
fonte-size: 2.1rem
line-height: 2.7rem

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<h4> Título

class: .title-4
fonte-size: 1.8rem
line-height: 2.2rem

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<h5> Título

class: .title-5
fonte-size: 1.6rem
line-height: 2.0rem

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<h6> Título

class: .title-6
fonte-size: 1.4rem
line-height: 1.8rem

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<h7> Título

class: .title-7
fonte-size: 1.2rem
line-height: 1.4rem

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<p> Corpo de Texto Grande 3

class: .bodyXXLarge
fonte-size: 1.25rem
line-height: 1.6rem

Lorem ipsum dolor sit amet. Hic amet explicaboUt culpa ea voluptas nulla sed provident saepe At minima omnis qui necessitatibus nesciunt est itaque fugit. Vel ratione eius Qui voluptatibus et facere suscipit. Ut nisi nihil nam aspernatur tempora In autem qui repellendus quis ut necessitatibus blanditiis?

  1. Qui consequatur omnis qui quidem repellat.
  2. Sed fugiat necessitatibus et magnam voluptas.
  3. Est omnis ullam qui iste rerum ea galisum maxime!
  4. Ut ipsa ducimus qui dignissimos eligendi.
  5. Aut incidunt quas et nostrum architecto.
  6. Est officiis ratione aut error veniam et quibusdam maiores.

Non dolores suscipit cum aliquam modieos harum. Nam praesentium laudantiumQui sunt ex dolorem ducimus aut laborum Quis. Sed molestias tempore Ut aspernatur aut odio odio quo ipsa dolores sed magni esse aut eveniet quia.

  • Et iusto animi ab illo porro et officiis atque est itaque praesentium.
  • Aut culpa vitae ut odit tempore ut nisi odio sed nihil molestiae.
  • Eum excepturi praesentium eum saepe nihil sed itaque quod.
  • Est corrupti unde aut expedita voluptates sit rerum magni.

Et voluptas atque et labore erroret deleniti. Sit neque facilis et totam harum In atque eum suscipit molestiae ex libero deleniti est quasi impedit.

<p> Corpo de Texto Grande 2

class: .bodyXLarge
fonte-size: 1.19rem
line-height: 1.5rem

Lorem ipsum dolor sit amet. Hic amet explicaboUt culpa ea voluptas nulla sed provident saepe At minima omnis qui necessitatibus nesciunt est itaque fugit. Vel ratione eius Qui voluptatibus et facere suscipit. Ut nisi nihil nam aspernatur tempora In autem qui repellendus quis ut necessitatibus blanditiis?

  1. Qui consequatur omnis qui quidem repellat.
  2. Sed fugiat necessitatibus et magnam voluptas.
  3. Est omnis ullam qui iste rerum ea galisum maxime!
  4. Ut ipsa ducimus qui dignissimos eligendi.
  5. Aut incidunt quas et nostrum architecto.
  6. Est officiis ratione aut error veniam et quibusdam maiores.

Non dolores suscipit cum aliquam modieos harum. Nam praesentium laudantiumQui sunt ex dolorem ducimus aut laborum Quis. Sed molestias tempore Ut aspernatur aut odio odio quo ipsa dolores sed magni esse aut eveniet quia.

  • Et iusto animi ab illo porro et officiis atque est itaque praesentium.
  • Aut culpa vitae ut odit tempore ut nisi odio sed nihil molestiae.
  • Eum excepturi praesentium eum saepe nihil sed itaque quod.
  • Est corrupti unde aut expedita voluptates sit rerum magni.

Et voluptas atque et labore erroret deleniti. Sit neque facilis et totam harum In atque eum suscipit molestiae ex libero deleniti est quasi impedit.

<p> Corpo de Texto Grande 1

class: .bodyLarge
fonte-size: 1.13rem
line-height: 1.4rem

Lorem ipsum dolor sit amet. Hic amet explicaboUt culpa ea voluptas nulla sed provident saepe At minima omnis qui necessitatibus nesciunt est itaque fugit. Vel ratione eius Qui voluptatibus et facere suscipit. Ut nisi nihil nam aspernatur tempora In autem qui repellendus quis ut necessitatibus blanditiis?

  1. Qui consequatur omnis qui quidem repellat.
  2. Sed fugiat necessitatibus et magnam voluptas.
  3. Est omnis ullam qui iste rerum ea galisum maxime!
  4. Ut ipsa ducimus qui dignissimos eligendi.
  5. Aut incidunt quas et nostrum architecto.
  6. Est officiis ratione aut error veniam et quibusdam maiores.

Non dolores suscipit cum aliquam modieos harum. Nam praesentium laudantiumQui sunt ex dolorem ducimus aut laborum Quis. Sed molestias tempore Ut aspernatur aut odio odio quo ipsa dolores sed magni esse aut eveniet quia.

  • Et iusto animi ab illo porro et officiis atque est itaque praesentium.
  • Aut culpa vitae ut odit tempore ut nisi odio sed nihil molestiae.
  • Eum excepturi praesentium eum saepe nihil sed itaque quod.
  • Est corrupti unde aut expedita voluptates sit rerum magni.

Et voluptas atque et labore erroret deleniti. Sit neque facilis et totam harum In atque eum suscipit molestiae ex libero deleniti est quasi impedit.

<p> Corpo de Texto Normal

class: .body
fonte-size: 1.0rem
line-height: 1.3rem

Lorem ipsum dolor sit amet. Hic amet explicaboUt culpa ea voluptas nulla sed provident saepe At minima omnis qui necessitatibus nesciunt est itaque fugit. Vel ratione eius Qui voluptatibus et facere suscipit. Ut nisi nihil nam aspernatur tempora In autem qui repellendus quis ut necessitatibus blanditiis?

  1. Qui consequatur omnis qui quidem repellat.
  2. Sed fugiat necessitatibus et magnam voluptas.
  3. Est omnis ullam qui iste rerum ea galisum maxime!
  4. Ut ipsa ducimus qui dignissimos eligendi.
  5. Aut incidunt quas et nostrum architecto.
  6. Est officiis ratione aut error veniam et quibusdam maiores.

Non dolores suscipit cum aliquam modieos harum. Nam praesentium laudantiumQui sunt ex dolorem ducimus aut laborum Quis. Sed molestias tempore Ut aspernatur aut odio odio quo ipsa dolores sed magni esse aut eveniet quia.

  • Et iusto animi ab illo porro et officiis atque est itaque praesentium.
  • Aut culpa vitae ut odit tempore ut nisi odio sed nihil molestiae.
  • Eum excepturi praesentium eum saepe nihil sed itaque quod.
  • Est corrupti unde aut expedita voluptates sit rerum magni.

Et voluptas atque et labore erroret deleniti. Sit neque facilis et totam harum In atque eum suscipit molestiae ex libero deleniti est quasi impedit.

<p> Corpo de Texto Pequeno 1

class: .bodySmall
fonte-size: 0.88rem
line-height: 1.2rem

Lorem ipsum dolor sit amet. Hic amet explicaboUt culpa ea voluptas nulla sed provident saepe At minima omnis qui necessitatibus nesciunt est itaque fugit. Vel ratione eius Qui voluptatibus et facere suscipit. Ut nisi nihil nam aspernatur tempora In autem qui repellendus quis ut necessitatibus blanditiis?

  1. Qui consequatur omnis qui quidem repellat.
  2. Sed fugiat necessitatibus et magnam voluptas.
  3. Est omnis ullam qui iste rerum ea galisum maxime!
  4. Ut ipsa ducimus qui dignissimos eligendi.
  5. Aut incidunt quas et nostrum architecto.
  6. Est officiis ratione aut error veniam et quibusdam maiores.

Non dolores suscipit cum aliquam modieos harum. Nam praesentium laudantiumQui sunt ex dolorem ducimus aut laborum Quis. Sed molestias tempore Ut aspernatur aut odio odio quo ipsa dolores sed magni esse aut eveniet quia.

  • Et iusto animi ab illo porro et officiis atque est itaque praesentium.
  • Aut culpa vitae ut odit tempore ut nisi odio sed nihil molestiae.
  • Eum excepturi praesentium eum saepe nihil sed itaque quod.
  • Est corrupti unde aut expedita voluptates sit rerum magni.

Et voluptas atque et labore erroret deleniti. Sit neque facilis et totam harum In atque eum suscipit molestiae ex libero deleniti est quasi impedit.

<p> Corpo de Texto Pequeno 2

class: .bodyXSmall
fonte-size: 0.81rem
line-height: 1.1rem

Lorem ipsum dolor sit amet. Hic amet explicaboUt culpa ea voluptas nulla sed provident saepe At minima omnis qui necessitatibus nesciunt est itaque fugit. Vel ratione eius Qui voluptatibus et facere suscipit. Ut nisi nihil nam aspernatur tempora In autem qui repellendus quis ut necessitatibus blanditiis?

  1. Qui consequatur omnis qui quidem repellat.
  2. Sed fugiat necessitatibus et magnam voluptas.
  3. Est omnis ullam qui iste rerum ea galisum maxime!
  4. Ut ipsa ducimus qui dignissimos eligendi.
  5. Aut incidunt quas et nostrum architecto.
  6. Est officiis ratione aut error veniam et quibusdam maiores.

Non dolores suscipit cum aliquam modieos harum. Nam praesentium laudantiumQui sunt ex dolorem ducimus aut laborum Quis. Sed molestias tempore Ut aspernatur aut odio odio quo ipsa dolores sed magni esse aut eveniet quia.

  • Et iusto animi ab illo porro et officiis atque est itaque praesentium.
  • Aut culpa vitae ut odit tempore ut nisi odio sed nihil molestiae.
  • Eum excepturi praesentium eum saepe nihil sed itaque quod.
  • Est corrupti unde aut expedita voluptates sit rerum magni.

Et voluptas atque et labore erroret deleniti. Sit neque facilis et totam harum In atque eum suscipit molestiae ex libero deleniti est quasi impedit.

<p> Corpo de Texto Pequeno 3

class: .bodyXXSmall
fonte-size: 0.78rem
line-height: 1.0rem

Lorem ipsum dolor sit amet. Hic amet explicaboUt culpa ea voluptas nulla sed provident saepe At minima omnis qui necessitatibus nesciunt est itaque fugit. Vel ratione eius Qui voluptatibus et facere suscipit. Ut nisi nihil nam aspernatur tempora In autem qui repellendus quis ut necessitatibus blanditiis?

  1. Qui consequatur omnis qui quidem repellat.
  2. Sed fugiat necessitatibus et magnam voluptas.
  3. Est omnis ullam qui iste rerum ea galisum maxime!
  4. Ut ipsa ducimus qui dignissimos eligendi.
  5. Aut incidunt quas et nostrum architecto.
  6. Est officiis ratione aut error veniam et quibusdam maiores.

Non dolores suscipit cum aliquam modieos harum. Nam praesentium laudantiumQui sunt ex dolorem ducimus aut laborum Quis. Sed molestias tempore Ut aspernatur aut odio odio quo ipsa dolores sed magni esse aut eveniet quia.

  • Et iusto animi ab illo porro et officiis atque est itaque praesentium.
  • Aut culpa vitae ut odit tempore ut nisi odio sed nihil molestiae.
  • Eum excepturi praesentium eum saepe nihil sed itaque quod.
  • Est corrupti unde aut expedita voluptates sit rerum magni.

Et voluptas atque et labore erroret deleniti. Sit neque facilis et totam harum In atque eum suscipit molestiae ex libero deleniti est quasi impedit.

Escala de Texto de Corpo (Body Text)
<p> Corpo de Texto Grande 3
class: .bodyXXLarge
fonte-size: 1.25rem
line-height: 1.6rem 		Associação Amigos da Criança atua desde 2002 oferecendo suporte educacional, psicopedagógico e social a crianças e adolescentes de Jandira e região. Nosso trabalho é feito com dedicação por profissionais e voluntários que acreditam que toda criança merece uma chance real de crescer bem, aprender com alegria e se desenvolver plenamente.
<p> Corpo de Texto Grande 2
class: .bodyXLarge
fonte-size: 1.19rem
line-height: 1.5rem 		Associação Amigos da Criança atua desde 2002 oferecendo suporte educacional, psicopedagógico e social a crianças e adolescentes de Jandira e região. Nosso trabalho é feito com dedicação por profissionais e voluntários que acreditam que toda criança merece uma chance real de crescer bem, aprender com alegria e se desenvolver plenamente.
<p> Corpo de Texto Grande 1
class: .bodyLarge
fonte-size: 1.13rem
line-height: 1.4rem 		Associação Amigos da Criança atua desde 2002 oferecendo suporte educacional, psicopedagógico e social a crianças e adolescentes de Jandira e região. Nosso trabalho é feito com dedicação por profissionais e voluntários que acreditam que toda criança merece uma chance real de crescer bem, aprender com alegria e se desenvolver plenamente.
<p> Corpo de Texto Normal
class: .body
fonte-size: 1.0rem
line-height: 1.3rem 		Associação Amigos da Criança atua desde 2002 oferecendo suporte educacional, psicopedagógico e social a crianças e adolescentes de Jandira e região. Nosso trabalho é feito com dedicação por profissionais e voluntários que acreditam que toda criança merece uma chance real de crescer bem, aprender com alegria e se desenvolver plenamente.
<p> Corpo de Texto Pequeno 1
class: .bodySmall
fonte-size: 0.88rem
line-height: 1.2rem 		Associação Amigos da Criança atua desde 2002 oferecendo suporte educacional, psicopedagógico e social a crianças e adolescentes de Jandira e região. Nosso trabalho é feito com dedicação por profissionais e voluntários que acreditam que toda criança merece uma chance real de crescer bem, aprender com alegria e se desenvolver plenamente.
<p> Corpo de Texto Pequeno 2
class: .bodyXSmall
fonte-size: 0.81rem
line-height: 1.1rem 		Associação Amigos da Criança atua desde 2002 oferecendo suporte educacional, psicopedagógico e social a crianças e adolescentes de Jandira e região. Nosso trabalho é feito com dedicação por profissionais e voluntários que acreditam que toda criança merece uma chance real de crescer bem, aprender com alegria e se desenvolver plenamente.
<p> Corpo de Texto Pequeno 3
class: .bodyXXSmall
fonte-size: 0.78rem
line-height: 1.0rem 		Associação Amigos da Criança atua desde 2002 oferecendo suporte educacional, psicopedagógico e social a crianças e adolescentes de Jandira e região. Nosso trabalho é feito com dedicação por profissionais e voluntários que acreditam que toda criança merece uma chance real de crescer bem, aprender com alegria e se desenvolver plenamente.

1:

Ghost Card 1

Título do Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

2:

Ghost Card 2

Título do Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

3:

Ghost Card 3

Título do Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

4:

Ghost Card 4

Título do Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

5:

Ghost Card 5

Título do Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.