02 · Color System
Color: a blue-led global system
The first principle of global financial branding: blue is the only color that carries no negative meaning in any major market — the same reason Citi, Visa, AmEx, and PayPal all chose it. Green, meanwhile, means "falling" in the securities conventions of mainland China, Hong Kong, Taiwan, Japan, and Korea (red up, green down — the reverse of the West). The system therefore runs in four layers: core blues carry the brand, monochrome guarantees a safe fallback in every culture and medium, the extended palette adds energy and texture, and functional colors stay purely semantic — with gain/loss switching by market convention. Click any swatch to copy its hex.
Core bluesFour colors do 90% of the brand's identifying work
Monochrome + GoldThe most serious layer — contracts, regulatory filings, single-color print, and the premium tier's safe fallback
Extended palettev3, calibrated to 2026–27 trend keys (digital adaptations of WGSN × Coloro) — semantics are fixed, never interchangeable
Trend basis (researched 2026-06): WGSN × Coloro name Transformative Teal for 2026 and Luminous Blue for 2027 — the industry is converging on Omninal's home ground, so the primary does not move; the extended palette takes the four trend keys compatible with financial semantics (teal / violet / orange / pink). Pantone's 2026 Cloud Dancer (white) confirms the paper-white, white-space-as-authority ground strategy. Gradients have shifted from decoration to structural systems: blue→teal (hero emphasis text) and blue→violet→pink (campaign) are the only two structural gradients.
Functional colorsAligned with international semantic conventions (same lineage as Tailwind/shadcn) — three levels per meaning: primary / text / tint
Success Green#16A34A · #15803D · #F0FDF4Token --positive; graphics use the primary, text on white must use the text level (5.0 AA).
Destructive Red#DC2626（4.8 AA）· #FEF2F2Token --negative / shadcn --destructive; errors, dangerous actions; the rising color in APAC convention.
Warning Amber#F59E0B · #B45309 · #FFFBEBToken --warning; the primary is for graphics/icons only — text on white always uses the text level (5.0 AA).
Info Blue#155DFC · #15439E · #E9F0FFToken --info; neutral information, in-progress — same value as brand blue, text level = Blue Dark.
The three-level structure (standard practice at scale): the primary (500/600 range) for icons, badge dots, graphics; the text level (700 range) for text on white, guaranteeing ≥ 4.5:1; the tint (50 range) for hint containers. Gain/loss colors switch by market convention via token (table below), and functional colors never participate in brand identification.
NeutralsSix steps of order, from ink to paper
Global market color disciplineThis section is why this standard exists
| Market | Gain / profit | Loss / decline | Meaning |
|---|---|---|---|
| US · Europe · most of Southeast Asia | Green ▲ | Red ▼ | Western convention: green = go |
| Mainland China · HK & Taiwan · Japan · Korea | Red ▲ | Green ▼ | Red is festive and rising, green falls — the exact reverse |
Three disciplines: ① Gain/loss colors are defined as semantic tokens (--positive / --negative) and switch by the user's market convention — never hardcoded. ② Brand identification never depends on green or red — the period and primary actions are blue only, and blue is neutral in both conventions. ③ Monochrome is the final fallback: in any culture, faith, single-color print, or compliance context, a Carbon + White identity and layout always stand.
GradientsLayouts allow these four only (angle 132°); the fifth — the radial Halo — belongs to the identity alone: mark only, never a background. See chapter 01
Deep Trust · covers, fundraising material, keynotes
Royal Flow · product marketing and growth narratives
Midnight Gold · premium clients and top tiers
Vivid Signal · campaigns and social (use sparingly)
Three structural uses of gradientGradient is a structural system, not decoration — these three roles only
Q2 Review
One architecture,
four products.
four products.
① Container · the field
A gradient fills an entire container (cover, card face, KV), giving the content a field to sit in. One gradient container per layout, angle locked at 132°.
settles.
② Text-level · emphasis
A blue→teal linear gradient (100°) reserved for H1-scale emphasis words (2–6 characters inside hero and KV headlines); forbidden on body text and button labels; one per screen at most.
③ Glow · the light source
A radial gradient as a single light source, set behind the mark, a number, or the focal content; opacity ≤ 40%, light position = visual focus, one source per screen.
Gradient bans: buttons, inputs, badges, and all components stay solid (in product UI, gradient exists only in the Halo icon and empty-state illustration); two gradients never share a screen; linear is 132° only (hero text 100°); no gradient text on gradient grounds; the gold gradient belongs to black-and-gold contexts alone.
Six standard recipesFixed ratios of seriousness to energy — pick by context, never improvise the mix
① Global Corporate · 65 / 20 / 15
The default: site body, product docs, sales material — safe in any market
Paper 65%
Navy 20%
Blue 15%
② Deep Trust · 70 / 20 / 10
Fundraising decks, investor communication, regulator and bank-partner material — the dark authority field
Navy 70%
White 20%
Sky 10%
③ Premium Mono · 75 / 15 / 10
Premium client programs, the black card, anniversaries and executive events — monochrome plus one accent
Carbon 75%
White 15%
Gold 10%
④ Energy · 45 / 25 / 18 / 12
Launches, social media, employer brand, developer events — energetic, still anchored in blue
Navy 45%
Sky 25%
Iris 18%
Orange 12%
⑤ Product UI · 60 / 25 / 10 / 5
Dashboard, app, console — white-ground order, blue for primary actions only, functional colors by semantics
White 60%
Neutrals 25%
Blue 10%
Func. 5%
⑥ Data Viz · fixed sequence
Charts and reports — Omninal always leads the sequence in blue; gain/loss switches by market token
Blue
Teal
Iris
Orange
Gold
Mist
Contrast discipline: body text vs. ground ≥ 4.5:1 (WCAG AA). Sky #6E9BFF is a dark-ground highlight and period color only — never body text on light. Gold pairs only with monochrome, ≤ 10%. Amounts and numerals are always Ink / Navy / White — color belongs to state and change, never to the value itself.
Measured contrast matrixWCAG 2.1 · computed values — read the table, skip the guesswork
| Foreground ↓ / Ground → | White / Paper | Ice #E9F0FF | Navy #0B0F1E | Blue #155DFC | Carbon #0D0D12 |
|---|---|---|---|---|---|
| Ink / Navy text | 14.6 · AAA | 12.7 · AAA | — | — | — |
| White text | — | — | 19.1 · AAA | 5.2 · AA | 19.5 · AAA |
| Omninal Blue #155DFC | 5.2 · AA | 4.6 · AA | 3.7 · Large/graphics only | — | 3.7 · Large/graphics only |
| Blue Dark #15439E | 9.0 · AAA | 7.9 · AAA | ✕ 1.7 | — | ✕ 1.8 |
| Sky #6E9BFF | ✕ 2.7 | ✕ 2.4 | 7.1 · AAA | ✕ 2.2 | 7.2 · AAA |
| Gold #E3B341 | ✕ 1.9 | ✕ 1.7 | 9.8 · AAA | — | 10.0 · AAA |
| Slate #5D6478 | 5.9 · AA | 5.2 · AA | — | — | — |
| Mist #8B91A5 | 3.1 · Large/decor only | ✕ 2.8 | 6.1 · AA | — | 6.2 · AA |
Grading: AAA ≥ 7:1 (best for body) · AA ≥ 4.5:1 (body passes) · 3:1–4.5:1 for bold text ≥ 18.5px only · ✕ no text (graphics still allowed). "—" marks meaningless pairs.
Contrast checkerPick any foreground and background for a live WCAG 2.1 ratio — for pairs outside the matrix, compute before you commit
19.1:119.1 · AAA · best for body
Graded on the same standard as the measured matrix: AAA ≥ 7 · AA ≥ 4.5 · 3–4.5 for bold text ≥ 18.5px only · below that, no text (graphics still allowed).
Display sample: Every payment settles.Body sample: Omninal holds, moves, and controls money on one architecture — across currencies, stablecoins, and every payment rail.$2,485,302.18 · +4.2% · 2026-06-07
Dark mode mappingThe same component in both modes — tokens change value, relationships stay fixed
Light
Available Balance
$2,485,302.18
New paymentDark
Available Balance
$2,485,302.18
New payment| Token | Light | Dark | Notes |
|---|---|---|---|
| --surface | Paper #FAFBFD | Navy #0B0F1E | Page grounds mirror each other |
| --card | White #FFFFFF | #131A32 | Dark containers step one level brighter — never pure black |
| --text | Ink #181D33 | #E9EDF6 | Dark-mode text desaturates to avoid glaring pure white |
| --text-muted | #5D6478 | #8A93AD | |
| --primary | Blue #155DFC | Sky #6E9BFF (dark label) | Dark-mode primary buttons switch to Sky with Navy labels — ratios in the matrix above |
| --line | #E6E9F1 | #26304A | |
| --tint | Ice #E9F0FF | rgba(110,155,255,.14) | Dark mode uses translucent Sky, not a solid fill |