Display / Headings
Spline Sans
Títulos e momentos de destaque.
SnapOps
Style Guide
Referência visual mínima para tipografia, cor primária, temas e cores de status definidas no projeto.
Typography
Tipografia
Body / Interface
Inter
Textos corridos, labels e interface.
Brand
Cor primária
Brand / Primary
#91D32B
CTAs, botões de destaque e elementos de marca.
Theme
Dark Theme
Backgrounds
Background / Hero 01
#020617
Home, landing page e áreas de CTA.
Background / Hero 02
#050B1C
Intercalação com o fundo principal.
Background / App
#0A0A0A
Background principal do sistema.
Surfaces
Surface / Sidebar & Cards
#0F172A
Cards, sidebar e superfícies elevadas.
Borders & Dividers
Border / Default
#1E293B
Bordas e divisores.
Content
Text / Primary
#F1F5F9
Texto de maior destaque.
Text / Secondary
#CBD5E1
Texto de destaque médio.
Text / Tertiary
#94A3B8
Texto de menor destaque.
Theme
Light Theme
Backgrounds
Background / App & Landing Page
#F5F6F8
Background principal do sistema e da landing page.
Surfaces
Surface / Sidebar & Sections
#FFFFFF
Sidebar e seções com contraste.
Borders & Dividers
Border / Default
#E2E8F0
Bordas e divisores.
Content
Text / Primary
#0F172A
Texto de maior destaque.
Text / Secondary
#334155
Texto de destaque médio.
Text / Tertiary
#64748B
Texto de menor destaque.
Status
Cores de sistema
Status / Success
#10B981
Aplicavel em light e dark theme.
Status / Danger
#F43F5E
Aplicavel em light e dark theme.
Status / Warning
#FBBF24
Aplicavel em light e dark theme.
Iconography
Biblioteca de icones Biblioteca de ícones
Library
@tabler/icons-vue
Biblioteca oficial de ícones do projeto para navegação, ações e estados da interface.
Style
Outline
Preferir ícones outline do Tabler, usando currentColor para herdar a cor do contexto e manter consistência entre dark e light theme.
Exemplos
Navigation
Tabler outline
Scheduling
Tabler outline
Analytics
Tabler outline
Media
Tabler outline
Settings
Tabler outline