Fundamentos
Todos os tokens
Referência completa: caminho DTCG, valor, variável CSS e classe Tailwind.
118 tokens
Três formas de consumir#
A fonte é hibou.tokens.json (DTCG). Todo o resto é gerado e verificado contra drift.
tsx
// 1. Classe Tailwind (preferida)
<div className="bg-hibou-bg rounded-hb-lg shadow-e1" />
// 2. Variável CSS
.card { border-radius: var(--hb-radius-lg); }
// 3. TypeScript
import { hibouTokens, tokenList } from "@hiboupay/tokens";
hibouTokens.colors.primary; // Vivid BlueReferência#
| Token | Valor | CSS | Tailwind |
|---|---|---|---|
| brand.blackRobustez. Fim da escala corporativa, fundo da superfície escura. | #000000 | ||
| brand.graffitiCredibilidade. Tinta de texto, sidebar, dock e toda sombra. | #2E3440 | ||
| brand.vividBlueConfiança e tecnologia. Ação principal, foco e luz. | #0061F1 | ||
| brand.whiteTransparência. Papel onde o dado mora. | #FFFFFF | ||
| brand.gradientEscala de tom corporativo → popular. | linear-gradient(90deg, #000000 0%, #2e3440 38%, #0061f1 100%) | --hibou-gradient | |
| brand.owl.from | #0162F7 | ||
| brand.owl.via | #0C53DA | ||
| brand.owl.to | #312782 | ||
| color.primaryAção principal, foco, luz. | {brand.vividBlue} · #0061F1 | --hibou-primary | hibou-primary |
| color.primaryDeepTexto azul sobre papel com contraste AA. Base do degradê do botão no hover. | #0048B8 | --hibou-primary-deep | hibou-primary-deep |
| color.primaryLightTopo do degradê do botão primário. Nunca texto. | #1672FF | --hibou-primary-light | hibou-primary-light |
| color.black | {brand.black} · #000000 | --hibou-black | hibou-black |
| color.graffiti | {brand.graffiti} · #2E3440 | --hibou-graffiti | hibou-graffiti |
| color.white | {brand.white} · #FFFFFF | --hibou-white | hibou-white |
| color.nightSuperfície escura da marca: sidebar, dock, cabeçalho do agente. | {brand.graffiti} · #2E3440 | --hibou-night | hibou-night |
| color.secondarySó estado (rascunho, custo). Nunca superfície nem luz ambiente. | #A02CFA | --hibou-secondary | hibou-secondary |
| color.secondaryInkSecundário como texto sobre papel. Rascunho, experimento. | #6B21A8 | --hibou-secondary-ink | hibou-secondary-ink |
| color.graffitiDeepBase do degradê da superfície noite. Nunca sombra. | #15181E | --hibou-graffiti-deep | hibou-graffiti-deep |
| color.graffitiLightHover da superfície noite. Nunca texto de apoio. | #383F4D | --hibou-graffiti-light | hibou-graffiti-light |
| color.bgCanvas da aplicação. | #F3F5F8 | --hibou-bg | hibou-bg |
| color.cardPapel. | #FFFFFF | --hibou-card | hibou-card |
| color.cardElevated | #FFFFFF | --hibou-card-elevated | hibou-card-2 |
| color.washPreenchimento neutro: skeleton, trilho. | #EEF0F3 | --hibou-wash | hibou-wash |
| color.inkTinta de título e dado. | {brand.graffiti} · #2E3440 | --hibou-ink | hibou-ink |
| color.mutedTexto de apoio. AA sobre papel. | #686D75 | --hibou-muted | hibou-muted |
| color.textCorpo de texto. | {brand.graffiti} · #2E3440 | --hibou-text | hibou-text |
| color.success | #2BC155 | --hibou-success | hibou-success |
| color.successInkSucesso como texto sobre papel. | #157A38 | --hibou-success-ink | hibou-success-ink |
| color.warning | #FFBC11 | --hibou-warning | hibou-warning |
| color.warningInkAtenção como texto sobre papel. | #8A6200 | --hibou-warning-ink | hibou-warning-ink |
| color.danger | #F94687 | --hibou-danger | hibou-danger |
| color.dangerInkPerigo como texto sobre papel. | #C2256A | --hibou-danger-ink | hibou-danger-ink |
| color.border | #E3E6EE | --hibou-border | hibou-border |
| color.borderSoft | #EEF0F5 | --hibou-border-soft | hibou-border-soft |
| color.ringAnel de foco. | {brand.vividBlue} · #0061F1 | --hibou-ring | hibou-ring |
| radius.xsEtiqueta. | 6px | --hb-radius-xs | rounded-hb-xs |
| radius.smControle pequeno, item de lista. | 8px | --hb-radius-sm | rounded-hb-sm |
| radius.mdControle padrão e input. | 12px | --hb-radius-md | rounded-hb-md |
| radius.lgCartão. | 16px | --hb-radius-lg | rounded-hb-lg |
| radius.xlModal e palco. | 22px | --hb-radius-xl | rounded-hb-xl |
| radius.earOrelhas do símbolo: chanfro dos cantos superiores. | 9px | --hb-radius-ear | rounded-hb-ear |
| radius.cardCompatibilidade CRM. Não usar no Core. | 16px | --hb-radius-card | rounded-hibou-card |
| radius.pillCompatibilidade CRM. Não usar no Core. | 999px | --hb-radius-pill | rounded-hibou-pill |
| radius.inputCompatibilidade CRM. Não usar no Core. | 12px | --hb-radius-input | rounded-hibou-input |
| radius.modalCompatibilidade CRM. Não usar no Core. | 22px | --hb-radius-modal | rounded-hibou-modal |
| space.0 | 0px | ||
| space.1 | 4px | ||
| space.2 | 8px | ||
| space.3 | 12px | ||
| space.4 | 16px | ||
| space.5 | 20px | ||
| space.6 | 24px | ||
| space.7 | 32px | ||
| space.8 | 40px | ||
| space.9 | 56px | ||
| space.10 | 72px | ||
| gutter.base | 16px | --hb-gutter | hb-gutter |
| gutter.md | 24px | --hb-gutter | hb-gutter |
| gutter.xl | 40px | --hb-gutter | hb-gutter |
| control.xs | 28px | --hb-control-xs | h-c-xs |
| control.sm | 32px | --hb-control-sm | h-c-sm |
| control.md | 40px | --hb-control-md | h-c-md |
| control.lg | 48px | --hb-control-lg | h-c-lg |
| elevation.0 | 0 0 0 1px rgba(46,52,64,0.07) | --hb-e0 | shadow-e0 |
| elevation.1 | 0 0 0 1px rgba(46,52,64,0.06), 0 1px 2px rgba(46,52,64,0.05), 0 6px 16px -10px rgba(46,52,64,0.16) | --hb-e1 | shadow-e1 |
| elevation.2 | 0 0 0 1px rgba(46,52,64,0.07), 0 18px 40px -20px rgba(46,52,64,0.4) | --hb-e2 | shadow-e2 |
| elevation.3 | 0 0 0 1px rgba(46,52,64,0.09), 0 32px 80px -24px rgba(46,52,64,0.52) | --hb-e3 | shadow-e3 |
| font.headingSora decide: título, número, marca. | var(--font-sora) | --font-sora | font-sora |
| font.bodyInter explica: corpo e controles. | var(--font-inter) | --font-inter | font-inter |
| font.monoJetBrains Mono registra: IDs, rótulos, estado. | var(--font-mono) | --font-mono | font-mono |
| type.captionRótulo de máquina, contagem, iniciais pequenas. | 11px | --hb-type-caption | text-hb-caption |
| type.smallApoio, hint, botão xs. | 12px | --hb-type-small | text-hb-small |
| type.compactControle denso, item de menu, célula. | 13px | --hb-type-compact | text-hb-compact |
| type.bodyControle padrão e texto de interface. | 14px | --hb-type-body | text-hb-body |
| type.leadCorpo corrido e botão lg. | 15px | --hb-type-lead | text-hb-lead |
| type.titleTítulo de cartão e de seção. | 16px | --hb-type-title | text-hb-title |
| type.titleLgTítulo de diálogo e total enfatizado. | 18px | --hb-type-title-lg | text-hb-title-lg |
| type.metricNúmero de métrica. | 26px | --hb-type-metric | text-hb-metric |
| type.metricLgNúmero de métrica em tela larga. | 30px | --hb-type-metric-lg | text-hb-metric-lg |
| type.displayTítulo de página. Um por tela. | clamp(32px, 2.2vw + 24px, 44px) | --hb-type-display | text-hb-display |
| motion.easeCurva da marca: sai rápido, pousa devagar. | cubic-bezier(0.16, 1, 0.3, 1) | --hb-motion-ease | ease-hb |
| motion.springSó feedback de toque, nunca layout. | cubic-bezier(0.34, 1.36, 0.64, 1) | --hb-motion-spring | ease-hb-spring |
| motion.instantFecha a pálpebra, hover, troca de cor. | 120ms | --hb-motion-instant | duration-instant |
| motion.quickBotão, chip, toast, drawer. | 200ms | --hb-motion-quick | duration-quick |
| motion.calmAbre a pálpebra. Diálogo que assenta. Aba que desliza. | 280ms | --hb-motion-calm | duration-calm |
| motion.slowBloco que entra na tela. Tile ativo da navegação. | 420ms | --hb-motion-slow | duration-slow |
| motion.pupilA luz entra depois que o corpo chegou. | 80ms | --hb-motion-pupil | duration-pupil |
| motion.strikeO corpo do controle viaja antes da luz. | 150ms | --hb-motion-strike | duration-strike |
| glass.base.top | 0.56 | --g-top | hb-glass--base |
| glass.base.bottom | 0.4 | --g-bottom | hb-glass--base |
| glass.base.blur | 32px | --g-blur | hb-glass--base |
| glass.base.sat | 200% | --g-sat | hb-glass--base |
| glass.base.bright | 1 | --g-bright | hb-glass--base |
| glass.base.edge | 0.95 | --g-edge | hb-glass--base |
| glass.base.rim | 0.5 | --g-rim | hb-glass--base |
| glass.base.sheen | 0 | --g-sheen | hb-glass--base |
| glass.base.nightAlpha | 0.86 | --gn-alpha | hb-glass--base |
| glass.base.nightBlur | 30px | --gn-blur | hb-glass--base |
| glass.medio.top | 0.4 | --g-top | hb-glass--medio |
| glass.medio.bottom | 0.24 | --g-bottom | hb-glass--medio |
| glass.medio.blur | 24px | --g-blur | hb-glass--medio |
| glass.medio.sat | 220% | --g-sat | hb-glass--medio |
| glass.medio.bright | 1.03 | --g-bright | hb-glass--medio |
| glass.medio.edge | 1 | --g-edge | hb-glass--medio |
| glass.medio.rim | 0.62 | --g-rim | hb-glass--medio |
| glass.medio.sheen | 0.35 | --g-sheen | hb-glass--medio |
| glass.medio.nightAlpha | 0.72 | --gn-alpha | hb-glass--medio |
| glass.medio.nightBlur | 26px | --gn-blur | hb-glass--medio |
| glass.intenso.top | 0.2 | --g-top | hb-glass--intenso |
| glass.intenso.bottom | 0.08 | --g-bottom | hb-glass--intenso |
| glass.intenso.blur | 14px | --g-blur | hb-glass--intenso |
| glass.intenso.sat | 250% | --g-sat | hb-glass--intenso |
| glass.intenso.bright | 1.08 | --g-bright | hb-glass--intenso |
| glass.intenso.edge | 1 | --g-edge | hb-glass--intenso |
| glass.intenso.rim | 0.75 | --g-rim | hb-glass--intenso |
| glass.intenso.sheen | 0.6 | --g-sheen | hb-glass--intenso |
| glass.intenso.nightAlpha | 0.58 | --gn-alpha | hb-glass--intenso |
| glass.intenso.nightBlur | 20px | --gn-blur | hb-glass--intenso |
Links como /foundations/tokens#color.primary caem direto na linha. Cada página de componente aponta para cá.