مرجع داخلي — Internal reference

Color System

The unified color token system for BrightAI. Every visual surface, border, text color, and glow effect in production is bound to one of the tokens shown on this page. Zero hex values in components — everything resolves through CSS custom properties. Page is fully indexable (REPORTS-SEO-FOUNDATION).

نظام الألوان الموحّد في BrightAI. كل سطح وحد ونص وتأثير بصري في الإنتاج مربوط بأحد الـ tokens المعروضة هنا. صفر hex في المكونات — كله عبر CSS variables. الصفحة الصفحة قابلة للفهرسة بالكامل — مرجع مفتوح للألوان والـ tokens.

القسم الأول

Surface Layers

4 layered backgrounds that establish visual depth. .surface-1 → .surface-4 = page → card → elevated → hover.

.surface-1

--surface-1

#0a0e1a (--bg-base)

body · sections · page-wide

.surface-2

--surface-2

#0f1525 (--bg-surface)

default cards · most surfaces

.surface-3

--surface-3

#151c30 (--bg-elevated)

elevated cards · modals · popovers

.surface-4

--surface-4

#1c2540

hover/active surface · interactive

القسم الثاني

Border Scale

3 emphasis levels — soft for resting state, strong for hover, brand for focus.

.border-soft

--border-soft

rgba(148,163,184,0.1)

default card border

.border-strong

--border-strong

rgba(148,163,184,0.2)

hover/active state

.border-brand

--border-brand

var(--interactive-primary)

focus ring · selected

القسم الثالث

Text Colors

4 semantic text colors. Brand for CTAs/links, accent sparingly, success/danger for status only.

أبجد هوز

.text-brand

var(--interactive-primary)

#2a8a7e

CTAs · links · brand emphasis

أبجد هوز

.text-accent

var(--accent-warm)

#c08a5a

sparingly · warm highlights

أبجد هوز

.text-success

var(--status-success)

#22c55e

confirmed · compliance pass

أبجد هوز

.text-danger

var(--status-danger)

#ef4444

tier-3 risks · errors · blocking

القسم الرابع

Glow Backgrounds

Tinted backgrounds for hero highlights and featured moments. Use sparingly — never as page-wide backgrounds.

.bg-brand-glow

rgba(42,138,126,0.12)

var(--brand-soft)

hero highlights · featured CTAs

.bg-accent-glow

var(--accent-warm-soft)

rgba(192,138,90,0.15)

warm featured moments · quotes

القسم الخامس

Brand Scale (Deep Teal)

10 stops from --brand-50 to --brand-900. Migrated from Cyan to Deep Teal in DEC-SovB-001 for the "Sovereign Calm" direction. Primary CTAs use --brand-500.

--brand-50 #e6f3f2 lightest wash · badges on dark
--brand-100 #c2e1de hover backgrounds
--brand-200 #87c3bd borders on tinted cards
--brand-300 #4ba69c secondary CTAs · chip text
--brand-400 #3ba395 decorative focus
--brand-500 #2a8a7e PRIMARY · buttons · links
--brand-600 #1f6f64 hover on primary · depth
--brand-700 #19574f pressed · active · borders
--brand-800 #14433d tinted dark backgrounds
--brand-900 #0a201e deepest brand-tinted dark
القسم السادس

Status Colors

4 semantic colors. Each has a specific meaning — do not mix.

success

var(--status-success)

#22c55e

Use: confirmations · compliance pass

Don't: NEVER for marketing copy

warning

var(--status-warning)

#f59e0b

Use: tier-2 risks · cautions

Don't: NEVER for blocking actions

danger

var(--status-danger)

#ef4444

Use: tier-3 risks · blocking · destructive

Don't: NEVER for general emphasis

info

var(--status-info)

#6366f1

Use: informational tips · neutral notes

Don't: NEVER for warnings/errors

القسم السابع

Live Component Examples

Real components using the new token system. Hover the cards and buttons to see state transitions.

Cards (.surface-2 → .surface-3 on hover)

Brand

Sample feature card

Rests on surface-2, lifts to surface-3 on hover with brand-tinted glow.

Info

Elevated card

Permanent surface-3, used for popovers and featured panels.

Buttons

This is a brand link Copper accent Success message Danger alert

Glow Backgrounds

.bg-brand-glow Teal-tinted featured area
.bg-accent-glow Copper-tinted warm moment

Focus Ring (Tab into the next field to see)