Colors
- --sr-black
- #0A0A0A
- --sr-white
- #FFFFFF
- --sr-gold
- #E5A906
- --sr-gold-light
- #F5C542
- --sr-graphite
- #1A1A1A
Seção 19
Componentes
Botões
Badges e status
OficialAprovadoEm preparaçãoArquivado
Ativo
Inativo
Bloqueado
Inputs e busca
Tabs e menus
Conteúdo da aba “Visão geral”.
Alerta informativo com destaque dourado.
Confirmação de ação concluída.
Alerta crítico de uso incorreto.
Dark mode e light mode
O mesmo componente nos dois modos, com o dourado preservado como cor de assinatura.
Ação principalSeção 20
Design tokens
Valores técnicos para replicar o sistema em qualquer produto Santo Riso.
Spacing
- --sr-space-1
- 4px
- --sr-space-2
- 8px
- --sr-space-3
- 16px
- --sr-space-4
- 24px
- --sr-space-5
- 40px
- --sr-space-6
- 64px
Radius
- --sr-radius-sm
- 2px
- --sr-radius-md
- 4px
- --sr-radius-lg
- 8px
- --sr-radius-full
- 9999px
Typography
- --sr-font-display
- Outfit
- --sr-font-sans
- Plus Jakarta Sans
- --sr-text-eyebrow
- 11px / 600 / 0.22em
- --sr-text-body
- 15px / 400 / 1.7
- --sr-text-title
- 48px / 700 / -0.02em
Shadows
- --sr-shadow-card
- 0 1px 0 rgba(255,255,255,0.04)
- --sr-shadow-raised
- 0 18px 40px -24px rgba(0,0,0,0.9)
Borders
- --sr-border
- 1px solid rgba(255,255,255,0.12)
- --sr-border-gold
- 1px solid rgba(229,169,6,0.5)
Transitions
- --sr-ease
- cubic-bezier(0.22, 1, 0.36, 1)
- --sr-duration
- 220ms