Colors
Patru suprafețe. Două bej-uri (calde, cu o tentă imperceptibilă spre roz), plus alb și un singur dark. Un singur ink închis peste toate suprafețele light — variația vine din ierarhie (size + weight), nu din schimbarea darkness-ului per surface.
Markup canonic · components/foundation-colors.json
Culori
Foundation page — referință tokens.
Suprafețe
White — KPI, table, all inputs (lifted), table card body. · bej-0 — page bg unic, peste tot (Landing, Dublin, Blog), cu dot grid (ink @ 15%, 32px). · bej-1 — sidebar, rail „De făcut", action cards (input hosts), thead tabel, tip badges. Identic în Dublin + Landing + Blog. · Dark — acțiuni distructive (buton ștergere) + text primar (ink). Nu mai e o suprafață decorativă generală; pentru accent tare folosește bej-1 sau brand. Card-urile dark existente rămân (decizie separată).
Brand
Text · un singur ink închis
Lines · ink-alpha
Bordurile folosesc ink (#110D10) cu alpha, nu o nuanță de bej. Avantaj: aceeași vizibilitate relativă pe white, bej-0, bej-1 sau dark — nu trebuie scală separată pe fundal.
✓ Card alb / KPI → border 1px --c-rule-card (ink @ 12%) ✓ Input / Select / controale mici → border 1px --c-input-border (ink @ 30%) ✓ Input / Select .tonal → border 1px --c-input-border-tonal (ink @ 46%) — fundalul bej-0 nu separă câmpul de cardul alb, deci conturul duce singur limita: treapta minimă peste 3:1 (WCAG 1.4.11), doar pe gazdă albă sau bej-0 ✓ Dividers interni / tabel → --c-rule-soft (ink @ 6%) ✓ Hairline secundar → --c-rule (ink @ 10%) ✗ Card bej-1 pe bej-0 → FĂRĂ border (diferențiere prin culoare) ✗ Card dark → FĂRĂ border ✗ KPI tonal (bej-1) → FĂRĂ border
Cum se folosesc: rgba peste tot — inputs, cards albe, dividers, tabele. Solid hex doar când alpha nu poate fi compus (ex: peste imagini sau gradient bg).
Status
Fiecare familie de status are trei tokeni: fill (bordură, iconiță, punct, fundal de .badge.filled), tint (fundal de badge tonal, alert, banner) și text. Fill-ul nu se folosește niciodată ca text: măsurat pe tintul propriu dă 4.38 (error), 4.23 (warn), 4.25 (read) — la sau sub AA. Tokenul de text există pentru contrast, nu pentru nuanță.
Pink ultra — fundal pentru cards „brand emphasis" (insight cards, alerts brand). Rolul: notice fără culoare de status.
AI e singura familie fără token de text, deliberat: --c-ai trece ca text pe toate cele patru suprafețe DS (cel mai rău 5.11 pe tintul propriu). Nu completa setul din simetrie — vezi blocul AI mai jos.
Brandul nu apare în stări de eroare. Nu punem identitatea pe un sens negativ, iar pink lângă roșu pe un tint roșu e și greu de deosebit. Pe .field.input-em.error label-ul iese din brand și devine --c-ink.
AI · sistem complet
AI nu mai e o culoare separată — e un treatment derivat din pink Bono. Pink → magenta (135°). Singura familie de status fără token de text: solidul trece ca text peste tot, deci face ambele treburi. Variante de uz în UI:
Reguli de mapare text
Pe White cards → Ink #110D10 Pe bej-0 page → Ink #110D10 Pe bej-1 tonal → Ink #110D10 Pe Dark surface → #FFFFFF (heading) + rgba(255,255,255,0.65) (body)
Text per surface
| Surface | Heading | Body |
|---|---|---|
| White card | --c-ink | --c-fog |
| bej-0 (page) | --c-ink | --c-fog |
| bej-1 (tonal) | --c-ink | --c-fog |
| Dark surface | #FFFFFF | rgba(255,255,255,0.65) |
Status badges — tonal vs filled
DON'T — culori
- Niciodată pink pe text body. Excepție:
.t-actor+ T-em pe T60/T48/T40, eyebrow brand, logo „em", drop-cap. - Niciodată
--c-inkpe surface dark — folosește#fff/rgba(255,255,255,0.65). - Niciun hex hardcoded — toate culorile vin din tokens (
var(--c-*)). Excepție: swatch demo + valori în comentarii. - Status badges: tonal = text colorat pe tint, filled = text alb pe solid. Niciodată green-on-green sau red-on-red pentru categorii non-status.
- Niciodată gradient pe text. Singurul gradient permis e
--c-ai-gradpe filled.ai badge bg.
Preview · cele 4 contexte
Body & emphasis stă pe ink #110D10.
Body & emphasis stă pe ink #110D10.
Body & emphasis stă pe ink #110D10.
Body stă pe white 65%.