Proposta — TASK-030 e TASK-034
A proporção, desenhada
Uma fileira de amostras do mesmo tamanho mente sobre a identidade: sugere que o acento e a dominante pesam igual, quando a regra é 3–6% contra 75–85%. A banda abaixo desenha o peso de cada papel. Ela mostra o meio da faixa, e a legenda escreve a faixa inteira — proporção é intervalo, e fingir precisão de um número só seria mentira.
Toda razão de contraste desta página é medida pelo mesmo código que reprova cor no portão, nunca estimada. A escala é WCAG 2.2 AA: 4,5 para texto e 3,0 para superfície e borda.
cactarus
Sem desvio: este tema é a régua da proporção.
base-100: oklch(97.50% 0.006 75)base-content: oklch(24.00% 0.020 75)primary: oklch(50.00% 0.140 45)secondary: oklch(45.00% 0.060 235)
| Papel | Token | Faixa declarada | Desenhado | Onde |
|---|---|---|---|---|
| Dominante | base-100 / 200 / 300 | 75–85% | 78.8% | fundo de página, de seção e de cartão. É o papel do sertão. |
| Apoio | base-content e neutral | 12–20% | 15.8% | tinta, títulos, faixas escuras, rodapé. É o que dá a autoridade. |
| Acento | primary | 3–6% | 4.4% | um CTA por seção, links, estado ativo. |
| Resto | secondary e accent | 0–2% | 1.0% | ver § 1.4. Se a página fica igual sem eles, eles não deviam estar lá. |
| Estado | info / success / warning / error | 0% | 0% | só aparece quando há um estado para comunicar. Se aparece sem estado, é decoração e sai. |
| Frente | Fundo | Razão medida | WCAG 2.2 AA |
|---|---|---|---|
base-content | base-100 | 15.32 | passa — mín. 4.5 |
base-content | base-200 | 14.02 | passa — mín. 4.5 |
base-content | base-300 | 12.22 | passa — mín. 4.5 |
primary-content | primary | 5.83 | passa — mín. 4.5 |
secondary-content | secondary | 6.74 | passa — mín. 4.5 |
accent-content | accent | 6.72 | passa — mín. 4.5 |
neutral-content | neutral | 13.01 | passa — mín. 4.5 |
info-content | info | 6.73 | passa — mín. 4.5 |
success-content | success | 6.59 | passa — mín. 4.5 |
warning-content | warning | 7.08 | passa — mín. 4.5 |
error-content | error | 6.45 | passa — mín. 4.5 |
primary | base-100 | 5.92 | passa — mín. 3.0 |
secondary | base-100 | 6.83 | passa — mín. 3.0 |
accent | base-100 | 6.81 | passa — mín. 3.0 |
error | base-100 | 6.56 | passa — mín. 3.0 |
cactarus-escuro
Sem desvio: este tema é a régua da proporção.
base-100: oklch(20.00% 0.014 75)base-content: oklch(93.00% 0.010 75)primary: oklch(72.00% 0.130 45)secondary: oklch(72.00% 0.060 235)
| Papel | Token | Faixa declarada | Desenhado | Onde |
|---|---|---|---|---|
| Dominante | base-100 / 200 / 300 | 75–85% | 78.8% | fundo de página, de seção e de cartão. É o papel do sertão. |
| Apoio | base-content e neutral | 12–20% | 15.8% | tinta, títulos, faixas escuras, rodapé. É o que dá a autoridade. |
| Acento | primary | 3–6% | 4.4% | um CTA por seção, links, estado ativo. |
| Resto | secondary e accent | 0–2% | 1.0% | ver § 1.4. Se a página fica igual sem eles, eles não deviam estar lá. |
| Estado | info / success / warning / error | 0% | 0% | só aparece quando há um estado para comunicar. Se aparece sem estado, é decoração e sai. |
| Frente | Fundo | Razão medida | WCAG 2.2 AA |
|---|---|---|---|
base-content | base-100 | 14.73 | passa — mín. 4.5 |
base-content | base-200 | 13.39 | passa — mín. 4.5 |
base-content | base-300 | 11.5 | passa — mín. 4.5 |
primary-content | primary | 7.02 | passa — mín. 4.5 |
secondary-content | secondary | 7.37 | passa — mín. 4.5 |
accent-content | accent | 7.39 | passa — mín. 4.5 |
neutral-content | neutral | 10.33 | passa — mín. 4.5 |
info-content | info | 7.38 | passa — mín. 4.5 |
success-content | success | 7.52 | passa — mín. 4.5 |
warning-content | warning | 9.15 | passa — mín. 4.5 |
error-content | error | 6.43 | passa — mín. 4.5 |
primary | base-100 | 6.99 | passa — mín. 3.0 |
secondary | base-100 | 7.39 | passa — mín. 3.0 |
accent | base-100 | 7.42 | passa — mín. 3.0 |
error | base-100 | 6.39 | passa — mín. 3.0 |
partida-camara
Desvio declarado: Portal público vive de comunicar estado — prazo de edital, situação de processo. Ali o estado não é exceção, é conteúdo.
base-100: oklch(99.00% 0.002 250)base-content: oklch(21.00% 0.018 250)primary: oklch(40.00% 0.100 250)secondary: oklch(42.00% 0.070 150)
| Papel | Token | Faixa declarada | Desenhado | Onde |
|---|---|---|---|---|
| Dominante | base-100 / 200 / 300 | 75–85% | 80.0% | fundo de página, de seção e de cartão. É o papel do sertão. |
| Apoio | base-content e neutral | 12–20% | 16.0% | tinta, títulos, faixas escuras, rodapé. É o que dá a autoridade. |
| Acento | primary | 2–4% | 3.0% | um CTA por seção, links, estado ativo. |
| Resto | secondary e accent | 0–2% | 1.0% | ver § 1.4. Se a página fica igual sem eles, eles não deviam estar lá. |
| Estado | info / success / warning / error | 0% | 0% | só aparece quando há um estado para comunicar. Se aparece sem estado, é decoração e sai. |
| Frente | Fundo | Razão medida | WCAG 2.2 AA |
|---|---|---|---|
base-content | base-100 | 17.2 | passa — mín. 4.5 |
base-content | base-200 | 15.76 | passa — mín. 4.5 |
base-content | base-300 | 13.77 | passa — mín. 4.5 |
primary-content | primary | 8.44 | passa — mín. 4.5 |
secondary-content | secondary | 7.52 | passa — mín. 4.5 |
accent-content | accent | 7.13 | passa — mín. 4.5 |
neutral-content | neutral | 14.64 | passa — mín. 4.5 |
info-content | info | 7.05 | passa — mín. 4.5 |
success-content | success | 6.87 | passa — mín. 4.5 |
warning-content | warning | 7.49 | passa — mín. 4.5 |
error-content | error | 7.04 | passa — mín. 4.5 |
primary | base-100 | 8.94 | passa — mín. 3.0 |
secondary | base-100 | 7.96 | passa — mín. 3.0 |
accent | base-100 | 7.57 | passa — mín. 3.0 |
error | base-100 | 7.48 | passa — mín. 3.0 |
partida-camara-escuro
Desvio declarado: Portal público vive de comunicar estado — prazo de edital, situação de processo. Ali o estado não é exceção, é conteúdo.
base-100: oklch(18.00% 0.012 250)base-content: oklch(94.00% 0.006 250)primary: oklch(72.00% 0.090 250)secondary: oklch(72.00% 0.070 150)
| Papel | Token | Faixa declarada | Desenhado | Onde |
|---|---|---|---|---|
| Dominante | base-100 / 200 / 300 | 75–85% | 80.0% | fundo de página, de seção e de cartão. É o papel do sertão. |
| Apoio | base-content e neutral | 12–20% | 16.0% | tinta, títulos, faixas escuras, rodapé. É o que dá a autoridade. |
| Acento | primary | 2–4% | 3.0% | um CTA por seção, links, estado ativo. |
| Resto | secondary e accent | 0–2% | 1.0% | ver § 1.4. Se a página fica igual sem eles, eles não deviam estar lá. |
| Estado | info / success / warning / error | 0% | 0% | só aparece quando há um estado para comunicar. Se aparece sem estado, é decoração e sai. |
| Frente | Fundo | Razão medida | WCAG 2.2 AA |
|---|---|---|---|
base-content | base-100 | 15.77 | passa — mín. 4.5 |
base-content | base-200 | 14.52 | passa — mín. 4.5 |
base-content | base-300 | 12.63 | passa — mín. 4.5 |
primary-content | primary | 7.62 | passa — mín. 4.5 |
secondary-content | secondary | 7.77 | passa — mín. 4.5 |
accent-content | accent | 7.61 | passa — mín. 4.5 |
neutral-content | neutral | 12.23 | passa — mín. 4.5 |
info-content | info | 7.65 | passa — mín. 4.5 |
success-content | success | 7.84 | passa — mín. 4.5 |
warning-content | warning | 9.59 | passa — mín. 4.5 |
error-content | error | 6.67 | passa — mín. 4.5 |
primary | base-100 | 7.62 | passa — mín. 3.0 |
secondary | base-100 | 7.8 | passa — mín. 3.0 |
accent | base-100 | 7.57 | passa — mín. 3.0 |
error | base-100 | 6.62 | passa — mín. 3.0 |
partida-cartorio
Desvio declarado: Peça de contador e advogado é lida como documento. Acento acima disso lê como propaganda, e propaganda derruba a confiança que é o produto.
base-100: oklch(98.00% 0.003 265)base-content: oklch(22.00% 0.020 265)primary: oklch(42.00% 0.110 265)secondary: oklch(45.00% 0.060 210)
| Papel | Token | Faixa declarada | Desenhado | Onde |
|---|---|---|---|---|
| Dominante | base-100 / 200 / 300 | 75–85% | 80.0% | fundo de página, de seção e de cartão. É o papel do sertão. |
| Apoio | base-content e neutral | 12–20% | 16.0% | tinta, títulos, faixas escuras, rodapé. É o que dá a autoridade. |
| Acento | primary | 2–4% | 3.0% | um CTA por seção, links, estado ativo. |
| Resto | secondary e accent | 0–2% | 1.0% | ver § 1.4. Se a página fica igual sem eles, eles não deviam estar lá. |
| Estado | info / success / warning / error | 0% | 0% | só aparece quando há um estado para comunicar. Se aparece sem estado, é decoração e sai. |
| Frente | Fundo | Razão medida | WCAG 2.2 AA |
|---|---|---|---|
base-content | base-100 | 16.35 | passa — mín. 4.5 |
base-content | base-200 | 14.97 | passa — mín. 4.5 |
base-content | base-300 | 13.05 | passa — mín. 4.5 |
primary-content | primary | 7.89 | passa — mín. 4.5 |
secondary-content | secondary | 6.66 | passa — mín. 4.5 |
accent-content | accent | 6.09 | passa — mín. 4.5 |
neutral-content | neutral | 13.84 | passa — mín. 4.5 |
info-content | info | 6.75 | passa — mín. 4.5 |
success-content | success | 6.58 | passa — mín. 4.5 |
warning-content | warning | 7.57 | passa — mín. 4.5 |
error-content | error | 6.74 | passa — mín. 4.5 |
primary | base-100 | 8.12 | passa — mín. 3.0 |
secondary | base-100 | 6.85 | passa — mín. 3.0 |
accent | base-100 | 6.28 | passa — mín. 3.0 |
error | base-100 | 6.96 | passa — mín. 3.0 |
partida-cartorio-escuro
Desvio declarado: Peça de contador e advogado é lida como documento. Acento acima disso lê como propaganda, e propaganda derruba a confiança que é o produto.
base-100: oklch(19.00% 0.012 265)base-content: oklch(93.00% 0.008 265)primary: oklch(72.00% 0.100 265)secondary: oklch(72.00% 0.060 210)
| Papel | Token | Faixa declarada | Desenhado | Onde |
|---|---|---|---|---|
| Dominante | base-100 / 200 / 300 | 75–85% | 80.0% | fundo de página, de seção e de cartão. É o papel do sertão. |
| Apoio | base-content e neutral | 12–20% | 16.0% | tinta, títulos, faixas escuras, rodapé. É o que dá a autoridade. |
| Acento | primary | 2–4% | 3.0% | um CTA por seção, links, estado ativo. |
| Resto | secondary e accent | 0–2% | 1.0% | ver § 1.4. Se a página fica igual sem eles, eles não deviam estar lá. |
| Estado | info / success / warning / error | 0% | 0% | só aparece quando há um estado para comunicar. Se aparece sem estado, é decoração e sai. |
| Frente | Fundo | Razão medida | WCAG 2.2 AA |
|---|---|---|---|
base-content | base-100 | 15.03 | passa — mín. 4.5 |
base-content | base-200 | 13.75 | passa — mín. 4.5 |
base-content | base-300 | 11.88 | passa — mín. 4.5 |
primary-content | primary | 7.4 | passa — mín. 4.5 |
secondary-content | secondary | 7.58 | passa — mín. 4.5 |
accent-content | accent | 7.93 | passa — mín. 4.5 |
neutral-content | neutral | 11.1 | passa — mín. 4.5 |
info-content | info | 7.51 | passa — mín. 4.5 |
success-content | success | 7.69 | passa — mín. 4.5 |
warning-content | warning | 9.39 | passa — mín. 4.5 |
error-content | error | 6.55 | passa — mín. 4.5 |
primary | base-100 | 7.39 | passa — mín. 3.0 |
secondary | base-100 | 7.61 | passa — mín. 3.0 |
accent | base-100 | 7.91 | passa — mín. 3.0 |
error | base-100 | 6.51 | passa — mín. 3.0 |
partida-comercio
Desvio declarado: É o único tema em que chamar atenção é a função e não o vício.
base-100: oklch(98.00% 0.004 60)base-content: oklch(22.00% 0.020 50)primary: oklch(52.00% 0.160 32)secondary: oklch(45.00% 0.090 265)
| Papel | Token | Faixa declarada | Desenhado | Onde |
|---|---|---|---|---|
| Dominante | base-100 / 200 / 300 | 75–85% | 76.2% | fundo de página, de seção e de cartão. É o papel do sertão. |
| Apoio | base-content e neutral | 12–20% | 15.2% | tinta, títulos, faixas escuras, rodapé. É o que dá a autoridade. |
| Acento | primary | 6–10% | 7.6% | um CTA por seção, links, estado ativo. |
| Resto | secondary e accent | 0–2% | 1.0% | ver § 1.4. Se a página fica igual sem eles, eles não deviam estar lá. |
| Estado | info / success / warning / error | 0% | 0% | só aparece quando há um estado para comunicar. Se aparece sem estado, é decoração e sai. |
| Frente | Fundo | Razão medida | WCAG 2.2 AA |
|---|---|---|---|
base-content | base-100 | 16.39 | passa — mín. 4.5 |
base-content | base-200 | 15.0 | passa — mín. 4.5 |
base-content | base-300 | 12.87 | passa — mín. 4.5 |
primary-content | primary | 5.44 | passa — mín. 4.5 |
secondary-content | secondary | 6.89 | passa — mín. 4.5 |
accent-content | accent | 5.75 | passa — mín. 4.5 |
neutral-content | neutral | 14.28 | passa — mín. 4.5 |
info-content | info | 6.73 | passa — mín. 4.5 |
success-content | success | 6.58 | passa — mín. 4.5 |
warning-content | warning | 7.88 | passa — mín. 4.5 |
error-content | error | 6.79 | passa — mín. 4.5 |
primary | base-100 | 5.62 | passa — mín. 3.0 |
secondary | base-100 | 7.09 | passa — mín. 3.0 |
accent | base-100 | 5.9 | passa — mín. 3.0 |
error | base-100 | 7.0 | passa — mín. 3.0 |
partida-comercio-escuro
Desvio declarado: É o único tema em que chamar atenção é a função e não o vício.
base-100: oklch(19.00% 0.014 50)base-content: oklch(93.00% 0.010 50)primary: oklch(72.00% 0.140 32)secondary: oklch(72.00% 0.090 265)
| Papel | Token | Faixa declarada | Desenhado | Onde |
|---|---|---|---|---|
| Dominante | base-100 / 200 / 300 | 75–85% | 76.2% | fundo de página, de seção e de cartão. É o papel do sertão. |
| Apoio | base-content e neutral | 12–20% | 15.2% | tinta, títulos, faixas escuras, rodapé. É o que dá a autoridade. |
| Acento | primary | 6–10% | 7.6% | um CTA por seção, links, estado ativo. |
| Resto | secondary e accent | 0–2% | 1.0% | ver § 1.4. Se a página fica igual sem eles, eles não deviam estar lá. |
| Estado | info / success / warning / error | 0% | 0% | só aparece quando há um estado para comunicar. Se aparece sem estado, é decoração e sai. |
| Frente | Fundo | Razão medida | WCAG 2.2 AA |
|---|---|---|---|
base-content | base-100 | 15.02 | passa — mín. 4.5 |
base-content | base-200 | 13.76 | passa — mín. 4.5 |
base-content | base-300 | 11.9 | passa — mín. 4.5 |
primary-content | primary | 7.08 | passa — mín. 4.5 |
secondary-content | secondary | 7.41 | passa — mín. 4.5 |
accent-content | accent | 7.98 | passa — mín. 4.5 |
neutral-content | neutral | 11.51 | passa — mín. 4.5 |
info-content | info | 7.53 | passa — mín. 4.5 |
success-content | success | 7.69 | passa — mín. 4.5 |
warning-content | warning | 9.7 | passa — mín. 4.5 |
error-content | error | 6.51 | passa — mín. 4.5 |
primary | base-100 | 7.05 | passa — mín. 3.0 |
secondary | base-100 | 7.42 | passa — mín. 3.0 |
accent | base-100 | 8.04 | passa — mín. 3.0 |
error | base-100 | 6.48 | passa — mín. 3.0 |
partida-consultorio
Desvio declarado: Cartão de horário, convênio e especialidade é o conteúdo principal. Precisa de superfície levantada, e superfície levantada come área da dominante.
base-100: oklch(98.50% 0.005 195)base-content: oklch(25.00% 0.020 220)primary: oklch(48.00% 0.080 195)secondary: oklch(50.00% 0.070 160)
| Papel | Token | Faixa declarada | Desenhado | Onde |
|---|---|---|---|---|
| Dominante | base-100 / 200 / 300 | 70–80% | 77.7% | fundo de página, de seção e de cartão. É o papel do sertão. |
| Apoio | base-content e neutral | 12–20% | 16.6% | tinta, títulos, faixas escuras, rodapé. É o que dá a autoridade. |
| Acento | primary | 3–6% | 4.7% | um CTA por seção, links, estado ativo. |
| Resto | secondary e accent | 0–2% | 1.0% | ver § 1.4. Se a página fica igual sem eles, eles não deviam estar lá. |
| Estado | info / success / warning / error | 0% | 0% | só aparece quando há um estado para comunicar. Se aparece sem estado, é decoração e sai. |
| Frente | Fundo | Razão medida | WCAG 2.2 AA |
|---|---|---|---|
base-content | base-100 | 15.28 | passa — mín. 4.5 |
base-content | base-200 | 14.01 | passa — mín. 4.5 |
base-content | base-300 | 12.23 | passa — mín. 4.5 |
primary-content | primary | 5.77 | passa — mín. 4.5 |
secondary-content | secondary | 5.31 | passa — mín. 4.5 |
accent-content | accent | 5.78 | passa — mín. 4.5 |
neutral-content | neutral | 12.1 | passa — mín. 4.5 |
info-content | info | 6.44 | passa — mín. 4.5 |
success-content | success | 6.58 | passa — mín. 4.5 |
warning-content | warning | 7.64 | passa — mín. 4.5 |
error-content | error | 6.46 | passa — mín. 4.5 |
primary | base-100 | 6.03 | passa — mín. 3.0 |
secondary | base-100 | 5.55 | passa — mín. 3.0 |
accent | base-100 | 6.06 | passa — mín. 3.0 |
error | base-100 | 6.77 | passa — mín. 3.0 |
partida-consultorio-escuro
Desvio declarado: Cartão de horário, convênio e especialidade é o conteúdo principal. Precisa de superfície levantada, e superfície levantada come área da dominante.
base-100: oklch(21.00% 0.014 220)base-content: oklch(93.00% 0.008 220)primary: oklch(74.00% 0.080 195)secondary: oklch(74.00% 0.070 160)
| Papel | Token | Faixa declarada | Desenhado | Onde |
|---|---|---|---|---|
| Dominante | base-100 / 200 / 300 | 70–80% | 77.7% | fundo de página, de seção e de cartão. É o papel do sertão. |
| Apoio | base-content e neutral | 12–20% | 16.6% | tinta, títulos, faixas escuras, rodapé. É o que dá a autoridade. |
| Acento | primary | 3–6% | 4.7% | um CTA por seção, links, estado ativo. |
| Resto | secondary e accent | 0–2% | 1.0% | ver § 1.4. Se a página fica igual sem eles, eles não deviam estar lá. |
| Estado | info / success / warning / error | 0% | 0% | só aparece quando há um estado para comunicar. Se aparece sem estado, é decoração e sai. |
| Frente | Fundo | Razão medida | WCAG 2.2 AA |
|---|---|---|---|
base-content | base-100 | 14.41 | passa — mín. 4.5 |
base-content | base-200 | 13.0 | passa — mín. 4.5 |
base-content | base-300 | 11.06 | passa — mín. 4.5 |
primary-content | primary | 7.89 | passa — mín. 4.5 |
secondary-content | secondary | 7.88 | passa — mín. 4.5 |
accent-content | accent | 7.45 | passa — mín. 4.5 |
neutral-content | neutral | 10.29 | passa — mín. 4.5 |
info-content | info | 7.49 | passa — mín. 4.5 |
success-content | success | 7.65 | passa — mín. 4.5 |
warning-content | warning | 9.5 | passa — mín. 4.5 |
error-content | error | 6.53 | passa — mín. 4.5 |
primary | base-100 | 7.92 | passa — mín. 3.0 |
secondary | base-100 | 7.9 | passa — mín. 3.0 |
accent | base-100 | 7.37 | passa — mín. 3.0 |
error | base-100 | 6.47 | passa — mín. 3.0 |