01 — Marca
Brand & identidade
Versões da logo para diferentes fundos e contextos. Sempre preservando a legibilidade e a essência da marca.
Versões da logo
Nutri
dark
Nutri
nude
Nutri
light
Nutri
minimal
Cores extraídas da identidade original
Verde musgo
#3D5A3E · Principal
Rosê nude
#C4A882 · Secundária
Creme
#F5EFE6 · Fundo
02 — Cores
Paleta de cores
Três famílias com 10 tons cada. O tom ★ é o tom central de cada família, usado nos componentes principais.
Verde musgo — primária
50
#F0F4EF
100
#D4E0D2
200
#A8C0A4
300
#7A9E75
400
#557A50
500
#3D5A3E
★ base
600
#2E4530
700
#1E3020
800
#111C12
900
#070E07
Rosê nude / caramelo — secundária
50
#FAF5EE
100
#F0E4D0
200
#E2CAA8
300
#D4B080
400
#C4A882
★ base
500
#A8885E
600
#8A6840
700
#664C28
800
#3E2E16
900
#1E1609
Neutros creme / off-white
50
#FDFBF7
100
#F5EFE6
200
#E8DFD0
300
#D4C9B8
400
#B8AE9C
500
#928880
600
#6E6560
700
#4A4440
800
#2A2420
900
#141008
Cores semânticas
Sucesso
#3D5A3E / #F0F4EF
Meta atingida, confirmação
Atenção
#C49A20 / #FBF5E0
Alertas, pendências
Erro
#C44030 / #FAF0EE
Validação, falhas
Destaque
#C4A882 / #FAF5EE
Fase ativa, novidade
03 — Tipografia
Sistema tipográfico
Playfair Display para títulos com elegância orgânica. Plus Jakarta Sans para corpo e UI com clareza moderna.
Escala completa
Nutri
Seu plano nutricional
Alimentação saudável
"Transformação começa hoje"
Refeições de hoje
Resumo semanal
Proteínas do almoço
Seção de macros
Acompanhe sua evolução com planos alimentares personalizados e registros diários que fazem a diferença.
Pequenos hábitos consistentes constroem grandes transformações ao longo do tempo.
Dados atualizados com base nos seus registros diários.
Última sincronização · 14 jan 2025, 10:32
Seção de progresso
Pares tipográficos em contexto
Tela de onboarding
Bem-vinda à sua nova jornada
Criamos um plano único pensado em você, nos seus objetivos e no seu ritmo de vida.
Card de refeição
Almoço · 12h15
Frango grelhado, arroz integral, salada verde e azeite
Métrica numérica
1.847
calorias consumidas hoje
04 — Espaçamento
Espaçamento & grid
Escala baseada em múltiplos de 4px. Todos os valores garantem consistência visual em toda a interface.
Escala de espaçamentos
sp-2 · 2px
Divisores finos
sp-4 · 4px
Ícone + label
sp-6 · 6px
Gap badges
sp-8 · 8px
Padding chips
sp-12 · 12px
Gap lista
sp-16 · 16px
Padding horizontal
sp-20 · 20px
Padding vertical
sp-24 · 24px
Padding seções
sp-32 · 32px
Padding telas
sp-40 · 40px
Entre seções
sp-48 · 48px
Header de tela
sp-64 · 64px
Hero / splash
Border radius
xs · 6px
chip, tag
sm · 10px
input, badge
md · 14px
card sm
lg · 20px
card md
xl · 28px
modal
pill
botão
circle
avatar
05 — Iconografia
Sistema de ícones
36 ícones em stroke 1.5px, organizados por área do app. Clique em qualquer ícone para baixar o SVG individual.
🧭 Navegação geral
início ↓
voltar ↓
fechar ↓
buscar ↓
filtro ↓
menu ↓
check ↓
adicionar ↓
🥗 Alimentação
refeição ↓
receita ↓
alimento ↓
fruta ↓
foto prato ↓
código barra ↓
📊 Progresso & métricas
gráfico ↓
meta ↓
peso ↓
medida ↓
conquista ↓
favorito ↓
💧 Hidratação & sono
água ↓
copo ↓
sono ↓
horário ↓
🔔 Notificações & alertas
notificação ↓
info ↓
aviso ↓
consulta ↓
⚙️ Configurações & perfil
perfil ↓
ajustes ↓
editar ↓
deletar ↓
segurança ↓
sair ↓
💬 Social & extras
curtir ↓
compartilhar ↓
mensagem ↓
local ↓
download ↓
checklist ↓
Tamanhos e containers
16px
inline
20px
nav
24px
botão
verde 40
rosê 40
filled 40
circular 44
06 — Botões
Botões
3 tamanhos × 7 variantes × 3 estados. Todos com border-radius pill para o estilo orgânico da marca.
Grande — 56px
Médio — 44px (padrão)
Pequeno — 36px
Com ícone
Estados especiais
07 — Inputs
Campos de formulário
Inputs, selects e textareas com todos os estados: default, focus, erro, sucesso e desabilitado.
Default & focus
Como prefere ser chamada
kg
Erro, sucesso & desabilitado
Formato de e-mail inválido
cm
Campo somente leitura
08 — Badges & Chips
Badges, chips e tags
Sistema de labels para status, categorias de nutrientes, métricas e contagens.
Status
Meta atingida
Em andamento
Atenção
Pendente
Erro
Macronutrientes
Proteínas
Carboidratos
Gorduras
Vitaminas
Fibras
Minerais
Métricas numéricas
3
12
Novo
1.847 kcal
−2,3 kg
IMC 22.8
62,4 kg
28 dias
09 — Cards
Cards de componentes
Cards de paciente, progresso nutricional, lista de refeições e métricas.
Card de paciente
A
Ana Lima
Consulta · 14 jan 2025
Peso
62 kg
Altura
165 cm
IMC
22,8
Cards de métricas
Calorias hoje
1.847
de 2.000 kcal
Peso atual
62,4
kg · −0,6/semana
Água
1,8
de 2,5 L
Dias no plano
28
de 90 dias
Progresso nutricional
Proteínas68 / 90g
Carboidratos180 / 200g
Gorduras32 / 55g
Água1,8 / 2,5L
Lista de refeições
Café da manhã
07:30
380 kcal
Almoço
12:15
620 kcal
Lanche da tarde
15:45
210 kcal
Jantar
Planejado · 19:00
—
10 — Etapas
Etapas do atendimento
Fluxo visual de 5 etapas com 3 estados: concluída (verde), ativa (nude) e pendente (dashed).
Cadastro inicial
concluída
Dados pessoais, histórico de saúde e objetivos preenchidos com sucesso.
Primeira consulta
em andamento
Avaliação antropométrica e definição das metas nutricionais personalizadas.
Próxima sessão · 15 jan, 14h30 — Dra. Carla Ferreira
Plano alimentar
pendente
Cardápio semanal personalizado com substituições inteligentes elaborado após a consulta.
Acompanhamento
pendente
Registros diários, evolução de peso e relatórios de progresso quinzenais.
Alta nutricional
pendente
Relatório final e orientações de manutenção a longo prazo.
11 — Fases
Fases do programa
4 fases com identidade visual distinta. Verde musgo para concluídas, nude para ativas, neutro para bloqueadas.
Fase 1 — Diagnóstico
Semanas 1–2 · Avaliação completa
Avaliação completa do estado nutricional, histórico alimentar, exames laboratoriais e definição de objetivos realistas.
Fase 2 — Adaptação
Semanas 3–6 · Plano ativo
Implementação gradual do plano alimentar com substituições inteligentes e criação de novos hábitos sustentáveis.
Semana 4 de 475%
Fase 3 — Consolidação
Semanas 7–10
Fase 4 — Manutenção
Semanas 11–16
12 — Alertas
Alertas e notificações
4 variantes semânticas: sucesso, atenção, aviso e informativo.
Meta semanal atingida!
Você completou 5 dias de registro consecutivos. Continue assim!
Lembrete de hidratação
Você ainda não atingiu a meta de 2,5L de água hoje. Beba mais!
Consulta em 2 dias
Quarta-feira, 15h — Dra. Carla Ferreira. Não esqueça de registrar seus dados.
Novo artigo disponível
A nutricionista publicou dicas sobre alimentação anti-inflamatória.
Exportar
Tokens para Figma
Cole no plugin Tokens Studio for Figma. Paleta completa com todas as famílias de cor, tipografia, espaçamentos e border radius.
{
"global": {
"color": {
"green": {
"50": { "value": "#F0F4EF", "type": "color" },
"100": { "value": "#D4E0D2", "type": "color" },
"200": { "value": "#A8C0A4", "type": "color" },
"300": { "value": "#7A9E75", "type": "color" },
"400": { "value": "#557A50", "type": "color" },
"500": { "value": "#3D5A3E", "type": "color", "description": "★ base — verde musgo" },
"600": { "value": "#2E4530", "type": "color" },
"700": { "value": "#1E3020", "type": "color" },
"800": { "value": "#111C12", "type": "color" },
"900": { "value": "#070E07", "type": "color" }
},
"rose": {
"50": { "value": "#FAF5EE", "type": "color" },
"100": { "value": "#F0E4D0", "type": "color" },
"200": { "value": "#E2CAA8", "type": "color" },
"300": { "value": "#D4B080", "type": "color" },
"400": { "value": "#C4A882", "type": "color", "description": "★ base — rosê nude" },
"500": { "value": "#A8885E", "type": "color" },
"600": { "value": "#8A6840", "type": "color" },
"700": { "value": "#664C28", "type": "color" },
"800": { "value": "#3E2E16", "type": "color" },
"900": { "value": "#1E1609", "type": "color" }
},
"neutral": {
"50": { "value": "#FDFBF7", "type": "color" },
"100": { "value": "#F5EFE6", "type": "color" },
"200": { "value": "#E8DFD0", "type": "color" },
"300": { "value": "#D4C9B8", "type": "color" },
"400": { "value": "#B8AE9C", "type": "color" },
"500": { "value": "#928880", "type": "color" },
"600": { "value": "#6E6560", "type": "color" },
"700": { "value": "#4A4440", "type": "color" },
"800": { "value": "#2A2420", "type": "color" },
"900": { "value": "#141008", "type": "color" }
}
},
"spacing": {
"2": { "value": "2", "type": "spacing" },
"4": { "value": "4", "type": "spacing" },
"8": { "value": "8", "type": "spacing" },
"12": { "value": "12", "type": "spacing" },
"16": { "value": "16", "type": "spacing" },
"20": { "value": "20", "type": "spacing" },
"24": { "value": "24", "type": "spacing" },
"32": { "value": "32", "type": "spacing" },
"40": { "value": "40", "type": "spacing" },
"48": { "value": "48", "type": "spacing" },
"64": { "value": "64", "type": "spacing" }
},
"borderRadius": {
"xs": { "value": "6", "type": "borderRadius" },
"sm": { "value": "10", "type": "borderRadius" },
"md": { "value": "14", "type": "borderRadius" },
"lg": { "value": "20", "type": "borderRadius" },
"xl": { "value": "28", "type": "borderRadius" },
"pill": { "value": "100", "type": "borderRadius" }
},
"fontFamily": {
"display": { "value": "Playfair Display", "type": "fontFamilies" },
"body": { "value": "Plus Jakarta Sans", "type": "fontFamilies" }
},
"fontSize": {
"xs": { "value": "11", "type": "fontSizes" },
"sm": { "value": "13", "type": "fontSizes" },
"md": { "value": "14", "type": "fontSizes" },
"lg": { "value": "16", "type": "fontSizes" },
"xl": { "value": "20", "type": "fontSizes" },
"2xl": { "value": "26", "type": "fontSizes" },
"3xl": { "value": "32", "type": "fontSizes" },
"4xl": { "value": "40", "type": "fontSizes" },
"5xl": { "value": "52", "type": "fontSizes" }
},
"fontWeight": {
"light": { "value": "300", "type": "fontWeights" },
"regular": { "value": "400", "type": "fontWeights" },
"medium": { "value": "500", "type": "fontWeights" },
"semibold": { "value": "600", "type": "fontWeights" }
}
}
}
Como importar no Figma
- Instale o plugin Tokens Studio for Figma
- Abra o plugin → clique no ícone
{}(canto superior direito) - Apague o conteúdo existente e cole o JSON acima
- Clique em Save — os tokens aparecem organizados por categoria
- Selecione elementos no canvas e clique em Apply to selection