orange
orange.100
#FFF1EB
orange.200
#FFD9C9
orange.300
#FFB79C
orange.400
#FF8A5F
orange.500
#F1672C
orange.600
#D95522
orange.700
#B8471C
orange.800
#913716
orange.900
#6B2910
Design System — Escola CLM
- Fonte única da verdade visual do produto. Tokens, tipografia, cores e todos os componentes em uso real, com variantes e estados.
Tokens Primitivos
Tokens primitivos definem os valores base do sistema visual, como cores e medidas puras, e servem como fundação para todos os tokens semânticos e componentes da interface.
blue
blue.100
#E6EEF2
blue.200
#C0D3DC
blue.300
#8FAFBE
blue.400
#5B879F
blue.500
#113A52
blue.600
#0E3247
blue.700
#0B2A3B
blue.800
#081F2C
blue.900
#05151E
gray
gray.50
#FAFAFA
gray.100
#F0F1F2
gray.200
#D9DBDD
gray.300
#C2C5C8
gray.400
#A3A7AB
gray.500
#7F8489
gray.600
#61666B
gray.700
#44484D
gray.800
#2C2F33
gray.900
#1B1B1B
yellow
yellow.100
#FFF4E5
yellow.200
#FFE2BF
yellow.300
#FFC980
yellow.400
#FFAE40
yellow.500
#F79009
yellow.600
#D97E08
yellow.700
#B36807
yellow.800
#8C5105
yellow.900
#663A04
green
green.100
#E6F6EC
green.200
#BFE8CF
green.300
#80D1A5
green.400
#40BA7A
green.500
#00A63E
green.600
#009236
green.700
#007A2E
green.800
#005F24
green.900
#00441A
purple
purple.100
#F4E7FF
purple.200
#E3C7FF
purple.300
#C78FFF
purple.400
#A94BFF
purple.500
#9810FA
purple.600
#860EE0
purple.700
#700CC0
purple.800
#59099A
purple.900
#420774
iblue
iblue.100
#E8EEFF
iblue.200
#C7D6FF
iblue.300
#8FAEFF
iblue.400
#4B7FFF
iblue.500
#155DFC
iblue.600
#124FE0
iblue.700
#0F42BF
iblue.800
#0B3399
iblue.900
#082473
pink
pink.100
#FFE6F1
pink.200
#FFC2DC
pink.300
#FF85B8
pink.400
#FF4794
pink.500
#FF0074
pink.600
#E00066
pink.700
#BF0056
pink.800
#990044
pink.900
#730033
red
red.100
#FDECEC
red.200
#F9D2CF
red.300
#F5A8A3
red.400
#EE6F67
red.500
#F04438
red.600
#D93B31
red.700
#B73129
red.800
#8F2721
red.900
#661B17
Tokens Semânticos (Cores)
Tokens semânticos traduzem intenção de uso na interface, conectando os valores primitivos a contextos reais como marca, conteúdo, bordas, feedback e estados dos componentes.
brandPrimary
Light
#FFF1EB
Dark
#6B2910
subtle
Light
#FFD9C9
Dark
#B8471C
muted
Light
#FFB79C
Dark
#D95522
soft
Light
#F1672C
Dark
#F1672C
main
Light
#D95522
Dark
#FFB79C
strong
Light
#B8471C
Dark
#FFD9C9
bold
Light
#6B2910
Dark
#FFF1EB
intense
brandSecondary
Light
#E6EEF2
Dark
#05151E
subtle
Light
#C0D3DC
Dark
#0B2A3B
muted
Light
#8FAFBE
Dark
#0E3247
soft
Light
#113A52
Dark
#5B879F
main
Light
#0E3247
Dark
#8FAFBE
strong
Light
#0B2A3B
Dark
#C0D3DC
bold
Light
#05151E
Dark
#E6EEF2
intense
background
Light
#FAFAFA
Dark
#1B1B1B
primary
Light
#F0F1F2
Dark
#2C2F33
secondary
Light
#D9DBDD
Dark
#44484D
tertiary
content
Light
#1B1B1B
Dark
#F0F1F2
primary
Light
#2C2F33
Dark
#D9DBDD
secondary
Light
#44484D
Dark
#C2C5C8
tertiary
Light
#F0F1F2
Dark
#1B1B1B
inverse
Light
#F1672C
Dark
#FF8A5F
brand
Light
#F0F1F2
Dark
#F0F1F2
alwaysLight
Light
#1B1B1B
Dark
#1B1B1B
alwaysDark
border
Light
#F0F1F2
Dark
#2C2F33
primary
Light
#D9DBDD
Dark
#44484D
secondary
Light
#C2C5C8
Dark
#61666B
tertiary
feedback
Light
#D93B31
Dark
#FDECEC
error.content
Light
#FDECEC
Dark
#661B17
error.background
Light
#F5A8A3
Dark
#D93B31
error.border
Light
#009236
Dark
#BFE8CF
success.content
Light
#E6F6EC
Dark
#00441A
success.background
Light
#80D1A5
Dark
#009236
success.border
Light
#8C5105
Dark
#FFE2BF
warning.content
Light
#FFF4E5
Dark
#663A04
warning.background
Light
#FFC980
Dark
#D97E08
warning.border
Light
#0F42BF
Dark
#C7D6FF
info.content
Light
#E8EEFF
Dark
#082473
info.background
Light
#8FAEFF
Dark
#124FE0
info.border
accent
Light
#E00066
Dark
#FFE6F1
pink.content
Light
#FFE6F1
Dark
#730033
pink.backgroundPrimary
Light
#FFC2DC
Dark
#990044
pink.backgroundSecondary
Light
#860EE0
Dark
#F4E7FF
purple.content
Light
#F4E7FF
Dark
#420774
purple.backgroundPrimary
Light
#E3C7FF
Dark
#59099A
purple.backgroundSecondary
Light
#0F42BF
Dark
#C7D6FF
blue.content
Light
#E8EEFF
Dark
#082473
blue.backgroundPrimary
Light
#C7D6FF
Dark
#0B3399
blue.backgroundSecondary
Light
#009236
Dark
#BFE8CF
green.content
Light
#E6F6EC
Dark
#00441A
green.backgroundPrimary
Light
#BFE8CF
Dark
#005F24
green.backgroundSecondary
Light
#8C5105
Dark
#FFE2BF
yellow.content
Light
#FFF4E5
Dark
#663A04
yellow.backgroundPrimary
Light
#FFE2BF
Dark
#8C5105
yellow.backgroundSecondary
button
Light
#8FAFBE
Dark
#8FAFBE
focusRing
Light
#F1672C
Dark
#F1672C
primary.background.enabled
Light
#D95522
Dark
#F1672C
primary.background.hover
Light
#B8471C
Dark
#FF8A5F
primary.background.pressed
Light
#C2C5C8
Dark
#2C2F33
primary.background.disabled
Light
inset 0 4px 12px 0 #FF8A5F
Dark
inset 0 4px 12px 0 #FF8A5F
primary.shadow.enabled
Light
#FAFAFA
Dark
#FAFAFA
primary.content.enabled
Light
#FAFAFA
Dark
#FAFAFA
primary.content.hover
Light
#FAFAFA
Dark
#FAFAFA
primary.content.pressed
Light
#44484D
Dark
#7F8489
primary.content.disabled
Light
transparent
Dark
transparent
secondary.background.enabled
Light
#FAFAFA
Dark
#2C2F33
secondary.background.hover
Light
#F0F1F2
Dark
#44484D
secondary.background.pressed
Light
transparent
Dark
transparent
secondary.background.disabled
Light
#113A52
Dark
#5B879F
secondary.content.enabled
Light
#0E3247
Dark
#8FAFBE
secondary.content.hover
Light
#0B2A3B
Dark
#C0D3DC
secondary.content.pressed
Light
#7F8489
Dark
#7F8489
secondary.content.disabled
Light
1px
Dark
1px
secondary.border.width
Light
#D9DBDD
Dark
#44484D
secondary.border.enabled
Light
#C2C5C8
Dark
#61666B
secondary.border.hover
Light
#A3A7AB
Dark
#7F8489
secondary.border.pressed
Light
#C2C5C8
Dark
#2C2F33
secondary.border.disabled
Light
#8FAFBE
Dark
#8FAFBE
secondary.border.focus
Light
transparent
Dark
transparent
ghost.background.enabled
Light
#F0F1F2
Dark
#2C2F33
ghost.background.hover
Light
#D9DBDD
Dark
#44484D
ghost.background.pressed
Light
transparent
Dark
transparent
ghost.background.disabled
Light
#F1672C
Dark
#FF8A5F
ghost.content.enabled
Light
#D95522
Dark
#FFB79C
ghost.content.hover
Light
#B8471C
Dark
#FFD9C9
ghost.content.pressed
Light
#7F8489
Dark
#7F8489
ghost.content.disabled
Tipografia
Escala tipográfica oficial da interface, com demonstração visual de cada token para facilitar consistência em títulos, textos e conteúdos de apoio.
display-s 64px / 120%
Olá, Andressa. Bem-vinda ao painel da Escola CLM.
heading-h1 56px / 120%
Resumo geral de matrículas
heading-h2 48px / 120%
Vamos começar a chamada?
heading-h3 40px / 120%
Próximas atividades complementares
heading-h4 32px / 120%
Pendências desta semana
heading-h5 24px / 120%
Status de documentação
heading-h6 20px / 140%
Últimas atualizações
body-x-large-bold 18px / 140%
Acompanhe o desempenho das turmas e priorize ações pedagógicas com clareza.
body-x-large-semibold 18px / 140%
Acompanhe o desempenho das turmas e priorize ações pedagógicas com clareza.
body-x-large-medium 18px / 140%
Acompanhe o desempenho das turmas e priorize ações pedagógicas com clareza.
body-x-large-regular 18px / 140%
Acompanhe o desempenho das turmas e priorize ações pedagógicas com clareza.
body-large-bold 16px / 150%
Organize tarefas, prazos e registros para manter o fluxo da secretaria em dia.
body-large-semibold 16px / 150%
Organize tarefas, prazos e registros para manter o fluxo da secretaria em dia.
body-large-medium 16px / 150%
Organize tarefas, prazos e registros para manter o fluxo da secretaria em dia.
body-large-regular 16px / 150%
Organize tarefas, prazos e registros para manter o fluxo da secretaria em dia.
body-medium-bold 14px / 150%
Confira os dados antes de salvar para evitar inconsistências no cadastro.
body-medium-semibold 14px / 150%
Confira os dados antes de salvar para evitar inconsistências no cadastro.
body-medium-medium 14px / 150%
Confira os dados antes de salvar para evitar inconsistências no cadastro.
body-medium-regular 14px / 150%
Confira os dados antes de salvar para evitar inconsistências no cadastro.
body-small-bold 12px / 150%
Use este campo para observações curtas da equipe administrativa.
body-small-semibold 12px / 150%
Use este campo para observações curtas da equipe administrativa.
body-small-medium 12px / 150%
Use este campo para observações curtas da equipe administrativa.
body-small-regular 12px / 150%
Use este campo para observações curtas da equipe administrativa.
body-xsmall-bold 10px / 150%
Atualizado há 5 min
body-xsmall-semibold 10px / 150%
Atualizado há 5 min
body-xsmall-medium 10px / 150%
Atualizado há 5 min
body-xsmall-regular 10px / 150%
Atualizado há 5 min
Espaçamentos
Escala de spacing aplicada no produto para garantir ritmo visual e consistência entre componentes e layouts.
spacing.00px
spacing.14px
spacing.28px
spacing.312px
spacing.416px
spacing.520px
spacing.624px
spacing.832px
spacing.1040px
spacing.1248px
spacing.1664px
Componentes
Button
Variantes
Estados
Tamanhos
Avatar
Variantes
Tamanhos
Fallback
Badge
Variantes
DefaultSuccessErrorWarningVioletOrangeBluePinkSubtle
Aparências
DefaultDotIcon
Combinações
AtivoPendenteErroConcluído
Checkbox
Variantes e Estados
Tamanhos
Checkbox Field
Input
Variações
Use seu e-mail institucional.
Campo obrigatório.
Dados conferidos.
Tipos de Input
Use pelo menos 8 caracteres.
Máscaras e TextArea
Link Text
Select Field
Variações
Selecione o módulo principal.
Campo obrigatório para concluir o cadastro.
Opção válida selecionada.
Variantes de Label
Estados
Stepper
Progressão
Tooltip
Variações de uso
Passe o mouse aquiVisualizar dados detalhados do aluno.StatusStatus atualizado em tempo real.Executa ação principal do fluxo.