Tema
Paleta
Os valores soltos dos tokens. Nenhum componente usa a paleta direto: cada linha diz quais papéis de Tokens e temas tiram o valor dela. As tabelas se leem como as de lá: o valor, quando usar e quando não usar.
Marca
Medida no portal tjes.jus.br: o azul-marinho do cabeçalho, o azul do logo, o rosa e o azul de ação. O navy 200 e 300 são os tons claros do texto sobre o cabeçalho.
| Token | Valor | Quando usar | Quando não usar |
|---|---|---|---|
--tj-navy-950 | #070625 | Reserva da escala; nenhum papel usa hoje. | Direto num componente: use o papel. |
--tj-navy-900 | #0c0a39 | Dá o valor de --tj-avatar-text, --tj-background-brand, --tj-background-inverse e --tj-text-brand. | Direto num componente: use o papel. |
--tj-navy-800 | #16144f | Reserva da escala; nenhum papel usa hoje. | Direto num componente: use o papel. |
--tj-navy-700 | #222066 | Reserva da escala; nenhum papel usa hoje. | Direto num componente: use o papel. |
--tj-navy-300 | #8e93c4 | Dá o valor de --tj-text-on-brand-placeholder. | Direto num componente: use o papel. |
--tj-navy-200 | #b8bfe0 | Dá o valor de --tj-text-on-brand-secondary. | Direto num componente: use o papel. |
--tj-blue-50 | #ecf2fd | Dá o valor de --tj-layer-selected-01 e --tj-support-info-subtle. | Direto num componente: use o papel. |
--tj-blue-100 | #dbe7fb | Dá o valor de --tj-avatar-bg, --tj-avatar-text e --tj-layer-selected-hover-01. | Direto num componente: use o papel. |
--tj-blue-200 | #b9cff7 | Dá o valor de --tj-border-selected-subtle, --tj-link-primary-hover, --tj-support-info-border e --tj-support-info-strong. | Direto num componente: use o papel. |
--tj-blue-300 | #8cb1f2 | Dá o valor de --tj-icon-interactive, --tj-link-primary e --tj-support-info-text. | Direto num componente: use o papel. |
--tj-blue-400 | #5a8cf2 | Dá o valor de --tj-border-interactive. | Direto num componente: use o papel. |
--tj-blue-500 | #2d66f5 | Dá o valor de --tj-border-interactive, --tj-icon-interactive, --tj-interactive e --tj-support-info. | Direto num componente: use o papel. |
--tj-blue-600 | #1f52d4 | Dá o valor de --tj-interactive-hover, --tj-link-primary e --tj-support-info-text. | Direto num componente: use o papel. |
--tj-blue-700 | #1a43ab | Dá o valor de --tj-interactive-active e --tj-link-primary-hover. | Direto num componente: use o papel. |
--tj-blue-800 | #173a8a | Dá o valor de --tj-support-info-strong. | Direto num componente: use o papel. |
--tj-blue-logo | #1e84ff | Dá o valor de --tj-brand-accent-blue e --tj-logo-blue. | Direto num componente: use o papel. |
--tj-pink-50 | #fdf2f7 | Reserva da escala; nenhum papel usa hoje. | Direto num componente: use o papel. |
--tj-pink-100 | #fbd9e8 | Dá o valor de --tj-avatar-alt-bg e --tj-avatar-alt-text. | Direto num componente: use o papel. |
--tj-pink-300 | #f6adcd | Dá o valor de --tj-brand-accent-pink e --tj-logo-pink. | Direto num componente: use o papel. |
--tj-pink-700 | #a3326a | Reserva da escala; nenhum papel usa hoje. | Direto num componente: use o papel. |
--tj-pink-800 | #6e1f47 | Dá o valor de --tj-avatar-alt-text. | Direto num componente: use o papel. |
--tj-tjes-black | #100b20 | Preto TJES do manual de marca; dá o valor de --tj-logo-endorsement. | Direto num componente: use o papel. |
--tj-tjes-white | #fef8fb | Branco TJES do manual de marca; dá o valor de --tj-logo-endorsement-on-dark. | Direto num componente: use o papel. |
Cinzas e cores de situação
Os cinzas e as escalas de sucesso, aviso, perigo e laranja não foram medidos no portal. Vêm do protótipo v3, aprovado em 21/10/2026; os cinzas puxam para o azul-marinho da marca. O teste de contraste confere cada par de texto e de controle que sai delas.
| Token | Valor | Quando usar | Quando não usar |
|---|---|---|---|
--tj-gray-0 | #ffffff | Dá o valor de --tj-field-01, --tj-layer-01, --tj-text-inverse, --tj-text-on-brand e --tj-text-on-color. | Direto num componente: use o papel. |
--tj-gray-25 | #fbfbfe | Dá o valor de --tj-layer-02. | Direto num componente: use o papel. |
--tj-gray-50 | #f6f7fb | Dá o valor de --tj-background, --tj-field-disabled e --tj-layer-hover-01. | Direto num componente: use o papel. |
--tj-gray-100 | #eef0f6 | Dá o valor de --tj-border-subtle-01 e --tj-layer-accent-01. | Direto num componente: use o papel. |
--tj-gray-200 | #e2e5ef | Dá o valor de --tj-border-subtle-02 e --tj-layer-accent-02. | Direto num componente: use o papel. |
--tj-gray-300 | #cdd2e1 | Reserva da escala; nenhum papel usa hoje. | Direto num componente: use o papel. |
--tj-gray-400 | #878da8 | Dá o valor de --tj-border-strong-01, --tj-icon-secondary e --tj-text-placeholder. | Direto num componente: use o papel. |
--tj-gray-500 | #5d6484 | Dá o valor de --tj-border-strong-02 e --tj-text-helper. | Direto num componente: use o papel. |
--tj-gray-700 | #363b5c | Dá o valor de --tj-text-secondary. | Direto num componente: use o papel. |
--tj-gray-900 | #15173a | Dá o valor de --tj-icon-primary, --tj-text-inverse e --tj-text-primary. | Direto num componente: use o papel. |
--tj-success-50 | #e6f4ec | Dá o valor de --tj-support-success-subtle. | Direto num componente: use o papel. |
--tj-success-200 | #a9dcc0 | Dá o valor de --tj-support-success-border. | Direto num componente: use o papel. |
--tj-success-300 | #5fd49b | Dá o valor de --tj-support-success-on-inverse. | Direto num componente: use o papel. |
--tj-success-500 | #22a06b | Dá o valor de --tj-support-success. | Direto num componente: use o papel. |
--tj-success-700 | #16794a | Dá o valor de --tj-support-success-text. | Direto num componente: use o papel. |
--tj-success-900 | #0f5434 | Dá o valor de --tj-support-success-on-inverse e --tj-support-success-strong. | Direto num componente: use o papel. |
--tj-warning-25 | #fffaf0 | Reserva da escala; nenhum papel usa hoje. | Direto num componente: use o papel. |
--tj-warning-50 | #fdf0d9 | Dá o valor de --tj-support-warning-subtle. | Direto num componente: use o papel. |
--tj-warning-100 | #fae5bf | Dá o valor de --tj-button-warning-active. | Direto num componente: use o papel. |
--tj-warning-200 | #f2cf8f | Dá o valor de --tj-support-warning-border. | Direto num componente: use o papel. |
--tj-warning-300 | #e2b46a | Dá o valor de --tj-button-warning-border. | Direto num componente: use o papel. |
--tj-warning-500 | #e8a317 | Dá o valor de --tj-support-warning. | Direto num componente: use o papel. |
--tj-warning-700 | #9a5800 | Dá o valor de --tj-support-warning-text. | Direto num componente: use o papel. |
--tj-warning-800 | #7d4700 | Dá o valor de --tj-button-warning-hover-text. | Direto num componente: use o papel. |
--tj-warning-900 | #6b3d00 | Dá o valor de --tj-support-warning-strong. | Direto num componente: use o papel. |
--tj-danger-50 | #fdebea | Dá o valor de --tj-support-error-subtle. | Direto num componente: use o papel. |
--tj-danger-200 | #f5b9b6 | Dá o valor de --tj-support-error-border. | Direto num componente: use o papel. |
--tj-danger-500 | #e5484d | Dá o valor de --tj-support-error. | Direto num componente: use o papel. |
--tj-danger-700 | #bf2e29 | Dá o valor de --tj-button-danger e --tj-support-error-text. | Direto num componente: use o papel. |
--tj-danger-800 | #a52622 | Dá o valor de --tj-button-danger-hover. | Direto num componente: use o papel. |
--tj-danger-900 | #8c1f1c | Dá o valor de --tj-button-danger-active e --tj-support-error-strong. | Direto num componente: use o papel. |
--tj-orange-600 | #e8590c | Dá o valor de --tj-support-attention. | Direto num componente: use o papel. |
Tema escuro
As superfícies do tema escuro (escala night, azul-marinho escuro) e as cores de situação clareadas para fundo escuro. Também vêm do protótipo v3. Quanto menor o número, mais clara a cor.
| Token | Valor | Quando usar | Quando não usar |
|---|---|---|---|
--tj-night-50 | #f1f2fa | Dá o valor de --tj-icon-primary, --tj-text-brand e --tj-text-primary. | Direto num componente: use o papel. |
--tj-night-100 | #e7e9f6 | Dá o valor de --tj-background-inverse. | Direto num componente: use o papel. |
--tj-night-200 | #cfd2ea | Dá o valor de --tj-text-secondary. | Direto num componente: use o papel. |
--tj-night-300 | #a9adcf | Dá o valor de --tj-text-helper. | Direto num componente: use o papel. |
--tj-night-400 | #9a9dc8 | Dá o valor de --tj-border-strong-02. | Direto num componente: use o papel. |
--tj-night-420 | #8f93bb | Dá o valor de --tj-text-placeholder. | Direto num componente: use o papel. |
--tj-night-440 | #8d91b8 | Dá o valor de --tj-icon-secondary. | Direto num componente: use o papel. |
--tj-night-500 | #7d80b3 | Dá o valor de --tj-border-strong-01. | Direto num componente: use o papel. |
--tj-night-700 | #46458a | Dá o valor de --tj-layer-accent-02. | Direto num componente: use o papel. |
--tj-night-740 | #3b3a75 | Dá o valor de --tj-layer-accent-01. | Direto num componente: use o papel. |
--tj-night-760 | #3a3972 | Dá o valor de --tj-border-subtle-02. | Direto num componente: use o papel. |
--tj-night-800 | #2e2d62 | Dá o valor de --tj-border-subtle-01. | Direto num componente: use o papel. |
--tj-night-840 | #252359 | Dá o valor de --tj-layer-hover-01. | Direto num componente: use o papel. |
--tj-night-860 | #211f52 | Dá o valor de --tj-layer-02. | Direto num componente: use o papel. |
--tj-night-880 | #1f1e4d | Dá o valor de --tj-field-01. | Direto num componente: use o papel. |
--tj-night-900 | #1a1948 | Dá o valor de --tj-field-disabled e --tj-layer-01. | Direto num componente: use o papel. |
--tj-night-950 | #08071f | Dá o valor de --tj-background. | Direto num componente: use o papel. |
--tj-blue-night-700 | #2c43a0 | Dá o valor de --tj-layer-selected-hover-01. | Direto num componente: use o papel. |
--tj-blue-night-720 | #2d4590 | Dá o valor de --tj-border-selected-subtle e --tj-support-info-border. | Direto num componente: use o papel. |
--tj-blue-night-760 | #25398a | Dá o valor de --tj-layer-selected-01. | Direto num componente: use o papel. |
--tj-blue-night-800 | #26376f | Dá o valor de --tj-avatar-bg. | Direto num componente: use o papel. |
--tj-blue-night-900 | #1a2a5c | Dá o valor de --tj-support-info-subtle. | Direto num componente: use o papel. |
--tj-pink-night-800 | #4c2340 | Dá o valor de --tj-avatar-alt-bg. | Direto num componente: use o papel. |
--tj-success-night-200 | #a7ecc8 | Dá o valor de --tj-support-success-strong. | Direto num componente: use o papel. |
--tj-success-night-300 | #6fdba6 | Dá o valor de --tj-support-success-text. | Direto num componente: use o papel. |
--tj-success-night-700 | #1f5c43 | Dá o valor de --tj-support-success-border. | Direto num componente: use o papel. |
--tj-success-night-900 | #12382a | Dá o valor de --tj-support-success-subtle. | Direto num componente: use o papel. |
--tj-warning-night-200 | #f9dca3 | Dá o valor de --tj-button-warning-hover-text e --tj-support-warning-strong. | Direto num componente: use o papel. |
--tj-warning-night-300 | #f5c56b | Dá o valor de --tj-support-warning-text. | Direto num componente: use o papel. |
--tj-warning-night-600 | #8a6420 | Dá o valor de --tj-button-warning-border. | Direto num componente: use o papel. |
--tj-warning-night-700 | #6a4c14 | Dá o valor de --tj-support-warning-border. | Direto num componente: use o papel. |
--tj-warning-night-850 | #4a3510 | Dá o valor de --tj-button-warning-active. | Direto num componente: use o papel. |
--tj-warning-night-900 | #3a2a0c | Dá o valor de --tj-support-warning-subtle. | Direto num componente: use o papel. |
--tj-danger-night-200 | #ffc6c2 | Dá o valor de --tj-support-error-strong. | Direto num componente: use o papel. |
--tj-danger-night-300 | #ff9a95 | Dá o valor de --tj-support-error-text. | Direto num componente: use o papel. |
--tj-danger-night-700 | #74302f | Dá o valor de --tj-support-error-border. | Direto num componente: use o papel. |
--tj-danger-night-900 | #431a1d | Dá o valor de --tj-support-error-subtle. | Direto num componente: use o papel. |
Canais e transparências
Os canais de cor (-rgb) servem para rgba() e para as variáveis *-rgb do Bootstrap. As transparências (-a08 é 8% de opacidade) dão o véu do modal, o halo de foco e os brilhos do cabeçalho.
| Token | Valor | Quando usar | Quando não usar |
|---|---|---|---|
--tj-white-rgb | 255, 255, 255 | Dá o valor de --tj-white-a08, --tj-white-a12 e --tj-white-a18. | Direto num componente: use o papel. |
--tj-black-rgb | 0, 0, 0 | Dá o valor de --tj-shadow-rgb e --tj-black-a60. | Direto num componente: use o papel. |
--tj-navy-900-rgb | 12, 10, 57 | Dá o valor de --tj-shadow-rgb e --tj-navy-900-a48. | Direto num componente: use o papel. |
--tj-blue-200-rgb | 185, 207, 247 | Dá o valor de --bs-link-hover-color-rgb. | Direto num componente: use o papel. |
--tj-blue-300-rgb | 140, 177, 242 | Dá o valor de --bs-link-color-rgb e --tj-blue-300-a45. | Direto num componente: use o papel. |
--tj-blue-500-rgb | 45, 102, 244 | Dá o valor de --bs-primary-rgb e --tj-blue-500-a28. | Direto num componente: use o papel. |
--tj-blue-600-rgb | 31, 82, 212 | Dá o valor de --bs-link-color-rgb. | Direto num componente: use o papel. |
--tj-blue-700-rgb | 26, 67, 171 | Dá o valor de --bs-link-hover-color-rgb. | Direto num componente: use o papel. |
--tj-danger-700-rgb | 191, 46, 41 | Dá o valor de --tj-danger-700-a22. | Direto num componente: use o papel. |
--tj-white-a08 | rgba(255, 255, 255, .08) | Dá o valor de --tj-layer-on-brand. | Direto num componente: use o papel. |
--tj-white-a12 | rgba(255, 255, 255, .12) | Dá o valor de --tj-border-on-brand. | Direto num componente: use o papel. |
--tj-white-a18 | rgba(255, 255, 255, .18) | Dá o valor de --tj-border-on-brand. | Direto num componente: use o papel. |
--tj-black-a60 | rgba(0, 0, 0, .6) | Dá o valor de --tj-overlay. | Direto num componente: use o papel. |
--tj-navy-900-a48 | rgba(12, 10, 57, .48) | Dá o valor de --tj-overlay. | Direto num componente: use o papel. |
--tj-blue-500-a28 | rgba(45, 102, 244, .28) | Dá o valor de --tj-focus. | Direto num componente: use o papel. |
--tj-blue-300-a45 | rgba(140, 177, 242, .45) | Dá o valor de --tj-focus. | Direto num componente: use o papel. |
--tj-danger-700-a22 | rgba(191, 46, 41, .22) | Dá o valor de --tj-ring-danger. | Direto num componente: use o papel. |