Safra · Design System graao

01 · Fundamentos

Princípios

Contraste de superfícies

Noite com ilhas de luz

O app vive no grafite. O que pede atenção vira superfície invertida (pílula branca, sheet clara) ou ganha o broto. Nunca dois focos lima na mesma área.

Números leves

Dados grandes, peso 300

Valores são protagonistas: grandes, leves, tabulares, com unidade pequena e apagada ao lado.

Tudo é pílula

Formas macias

Botões, filtros, badges e linhas selecionadas são pílulas. Cards usam 24–32px. Ícones de ação ficam em círculos com borda fina.

Gesto tem resposta

Micro-interação em tudo que se toca

Indicadores deslizam, setas avançam, contadores sobem. Movimento curto, com desaceleração suave, e respeitando "reduzir movimento".

02 · Fundamentos

Cores

Use sempre os tokens semânticos (--g-surface, --g-accent…). Eles trocam sozinhos entre Noite e Dia.

Broto — acento da marca

Broto 500#C5F82A · --g-accent

Broto 400#D2FF4F · hover

Broto 600#A9DC12 · press

Broto 800#4D6B00 · texto no Dia

Superfícies (semânticas)

bg--g-bg

canvas--g-canvas

surface--g-surface

raised--g-surface-raised

inverse--g-inverse

text--g-text

text-2--g-text-2

line--g-line(-strong)

Safra — gradientes de mídia

Lima--g-safra-lima

Mar--g-safra-mar

Brasa--g-safra-brasa

Sol--g-safra-sol

Uva--g-safra-uva

Noite--g-safra-noite

FaçaLima como preenchimento (botão, barra, item ativo) com texto grafite por cima.

EviteLima como cor de texto sobre fundo claro — use --g-accent-text, que escurece no Dia.

03 · Fundamentos

Tipografia

Geist para tudo; Geist Mono para rótulos técnicos, códigos e eyebrows. Títulos com tracking negativo, números em peso 300.

.g-displayPlante.

.g-h1Cultive todo dia

.g-h2Colha resultados

.g-h3Primeiros passos

.g-h4Novas aulas

.g-bodyAprenda no seu ritmo com trilhas completas e uma comunidade que troca de verdade.

.g-eyebrowSeu próximo passo

.g-num--xlR$31.211,00

.g-num12 dias

04 · Fundamentos

Espaço e forma

Grade de 4px. Raio cresce com o tamanho do elemento: controles em pílula, cards 24px, seções 32–44px.

Espaço

4

8

16

24

40

64

96

Raios

8

12

18

24

32

44

pill

05 · Fundamentos

Movimento

Saída rápida e pouso suave. Mola só em coisas pequenas que "quicam" (checkbox, avatar, carta que sobe).

--g-ease-out

cubic-bezier(.16,1,.3,1)

Padrão para deslizes, indicadores, reveals.

--g-ease-spring

cubic-bezier(.34,1.56,.64,1)

Quiques curtos: check, toast, card que sobe.

Durações

120 · 200 · 320 · 560 · 900ms

Cor 200 · posição 320–560 · números 900+.

05b · Fundamentos

Rolagem

Barra fina nos tokens (acende em lima ao arrastar) em toda a página e áreas internas. Rolagem suave com inércia via <html data-g-smooth> — esta página já usa. Repare na linha lima no topo: progresso de leitura.

Área rolável interna

A rolagem com inércia é desligada automaticamente dentro de áreas roláveis, para que elas rolem de forma nativa e previsível.

Barra personalizada.g-scroll

Trilho horizontal com encaixe.g-scroll--x .g-scroll--fade

FaçaUse data-g-smooth no site público e em páginas longas de leitura. Use G.smooth.to(y) para rolar via código.

EviteLigar a inércia em telas de trabalho densas do app (listas, formulários). Lá, só a barra personalizada e o scroll nativo.

06 · Componentes

Botões

Uma ação principal (lima) por área. Passe o mouse para ver as micro-interações.

Variantes.g-btn--accent · --solid · padrão · --quiet

Tamanhos--sm 32 · md 40 · --lg 52

Circle swap.g-btn--swap

Text roll.g-roll

Shine.g-btn--shine

Hold to confirmdata-g-hold="1200"

Magnético + borda luminosadata-g-magnetic · data-g-glow

Botões de ícone.g-icon-btn

07 · Componentes

Formulários

Nome do projeto

E-mail

Campo com rótulo flutuante.g-field

Novembro 2026

Pílulas de filtro.g-pill-input

Assistir aula 1Publicar primeiro projeto

Checkbox com quique.g-check

NotificaçõesResumo semanal

Meta / semana48min

Switch · número arrastável.g-switch · data-g-scrub

08 · Componentes

Navegação

Segmento deslizante.g-segment[data-g-segment]

Tabs sublinhadas · abas de ícone.g-tabs · .g-icon-tabs

Navegação com spotlight.g-sidenav[data-g-spotlight]

Menu com destaque deslizante.g-menu[data-g-glide]

09 · Componentes

Dados

Horas estudadas128h

Set — Out +12,4%

Membros ativos48.290

MRJT

Tempo médio por aula12 min

64%

da trilha concluída

Lista selecionável

Pontos disponíveis

2.140 pts

AtivoNão enviadoVistoAo vivoConcluídoExpirado

09b · Componentes

Dados densos (admin)

Tabela que vira lista no celular, status com texto, gráfico de barras com tooltip.

Trilha	Status	Inscritos
Comece Aqui	publicado	980
Formação IA	beta	520
Web Start	em revisão	412
No-code	rascunho	—

Novos membros+42%

Tabela · status · barras.g-table .g-status .g-bars

10 · Componentes

Superfícies

Card padrão, card dentro de card, sheet clara encaixada com aba recortada, vidro e área tracejada para "adicionar".

Sheet clara

Usada para destacar a área de trabalho principal dentro do app escuro.

Aulas

24

Projetos

3

Horas

18 h

11 · Componentes

Mídia

Cards vibrantes com objeto que "sai" do card e carrossel com foco no centro. Clique nos cards laterais ou use as setas.

12 · Componentes

Feedback

Toast, desfazer com pavio, modalG.toast() · G.modal()

Tooltip · skeleton.g-tooltip · .g-skeleton

Nenhum certificado ainda

Conclua sua primeira trilha para colher o primeiro.

Explorar trilhas

Estado vazio.g-empty

13 · Plataforma

Mobile

Mobile-first: todo componente acima já se adapta ao toque. Estes são os padrões exclusivos do celular. Breakpoints: sm 520 · md 860 · lg 1100 · xl 1360.

Formação IA

Progresso

64%

Appbar · barra de abas · FAB.g-appbar .g-tabbar .g-fab

Bottom sheet

No celular todo modal vira sheet e fecha arrastando para baixo.

Bottom sheet arrastávelG.modal(html, { sheet: true })

Regras de toque

Alvo mínimo44 × 44px

Texto de input16px (sem zoom iOS)

Área seguraenv(safe-area-*)

Gutter lateral16px

Hovervira :active

Carrosselswipe + encaixe

Rolagem com inérciadesligada no toque

Fundamentos de toque@media (pointer: coarse)