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

sursa = JSON · generat de scripts/build-catalog.py

Culori

Foundation page — referință tokens.

Suprafețe

White · lifted
#FFFFFF
--c-white
bej-0 · page bg unic
#FBFAF7
--c-bej-0
bej-1 · universal
#EFEBE4
--c-bej-1
Danger · destructive fill only
#110D10
--c-danger
Dark grad · decorative dark surfaces
#2F081A → #09041D
--c-dark-grad

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. · Darkacț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

Pink
#EE4379
--c-pink
Pink deep
#C9255B
--c-pink-deep
Pink tint
#FDE7F0
--c-pink-tint

Text · un singur ink închis

Ink — primary
#110D10
--c-ink
Fog — meta minor
#7A7570
--c-fog
Mist — placeholder
#ABA59E
--c-mist
White text · pe Dark
#FFFFFF · 65%
on dark surface

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.

Rule card
ink @ 12%
--c-rule-card
Input border
ink @ 30%
--c-input-border
Rule
ink @ 10%
--c-rule
Rule soft
ink @ 6%
--c-rule-soft
Rule · solid fallback
#DDD6C9
--c-rule-solid
Rule soft · solid fallback
#EAE3D5
--c-rule-soft-solid
Regulă · Lines sunt scoped, nu universale
✓ 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ță.

Success · status pozitiv
Fill
#1F7A3A
--c-success
Text
#076E26
--c-success-text
Tint
#EBF7EF
--c-success-bg
Warning · status de atenție
Fill
#B8580A
--c-warn
Text
#A95109
--c-warn-text
Tint
#FBF1E2
--c-warn-bg
Error · mesagerie de eroare
Fill
#DC2626
--c-error
Text
#CE2222
--c-error-text
Tint
#FDF1F1
--c-error-bg
Read · status „citit / văzut"
Fill
#5C6BC0
--c-read
Text
#5461AF
--c-read-text
Tint
#ECEFFE
--c-read-bg
Fără culoare de status
Pink ultra
pink @ 6%
--c-pink-ultra
AI gradient
#EE4379 → #7B2A6E
--c-ai-grad

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:

Gradient · fill
--c-ai-grad
badge filled, icon container, sparkle bg
Solid · text/icon
#A8336E · --c-ai
badge tonal text, icon stroke, link AI
Tint · background
#F4E4EE · --c-ai-bg
badge tonal bg, AI feed inline bg

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

SurfaceHeadingBody
White card--c-ink--c-fog
bej-0 (page)--c-ink--c-fog
bej-1 (tonal)--c-ink--c-fog
Dark surface#FFFFFFrgba(255,255,255,0.65)

Status badges — tonal vs filled

Tonal · text colorat pe tint Warn tonal Error tonal AI tonal Filled · text alb pe solid Warn filled Error filled AI 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-ink pe 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-grad pe filled.ai badge bg.

Preview · cele 4 contexte

WHITE
Heading aici

Body & emphasis stă pe ink #110D10.

BEJ-0 · PAGE BG
Heading aici

Body & emphasis stă pe ink #110D10.

BEJ-1 · TONAL
Heading aici

Body & emphasis stă pe ink #110D10.

DARK
Heading aici

Body stă pe white 65%.