Barion design system
A living reference for Barion's brand foundations and UI components. Source of truth: the Figma Brand Guidelines & Design System. Where a component can't be reproduced 1:1 here (real system icons, illustrations), follow the Figma link in that section.
1 · Color Figma ↗
All swatches reference tokens. Every primitive and semantic alias from brand-tokens.css is listed below with its intended usage.
| Token | Hex | Usage | |
|---|---|---|---|
| --barion-blue / --blue-500 | #0097DB | Primary brand, buttons, links, active states | |
| --blue-gray / --grey-900 | #2C3446 | Primary text, sidebar surfaces — never pure black | |
| --white-gray | #F9F9F9 | Canvas background — never pure white for large fills |
| Token | Hex | Usage | |
|---|---|---|---|
| --blue-50 | #EEFAFF | Sidebar active background, menu-item selected | |
| --blue-100 | #C8EDFF | Secondary button hover tint, light surfaces | |
| --blue-200 / --focus-blue | #99D5F1 | Input focus border (Archita audit), light divider | |
| --blue-300 | #33ACE2 | Secondary icon brand | |
| --blue-500 | #0097DB | Same as Barion Blue — primary brand | |
| --blue-700-deep | #0074C7 | Primary button gradient start (158°) | |
| --blue-700 | #0772CF | Link color, button hover, active tab underline | |
| --blue-800 | #007FDB | Brand gradient start (180°) | |
| --blue-900 | #045691 | Deep brand accent |
| Token | Hex | Usage | |
|---|---|---|---|
| --grey-200 / --border-secondary / --surface-disabled | #ECEDF1 | Default border, disabled surfaces | |
| --grey-300 / --border-primary | #DCDFE5 | Stronger border | |
| --grey-400 / --border-strong | #C4CAD7 | Heavy border (rare) | |
| --grey-500 / --text-disabled | #BABFCC | Disabled text | |
| --grey-600 / --text-inactive | #979FB2 | Placeholder text, inactive labels | |
| --grey-700 / --text-tertiary | #525F7F | Tertiary body text | |
| --grey-800 / --text-secondary | #46516D | Secondary body text | |
| --grey-900 / --text-primary | #2C3446 | Primary body text |
| Token | Hex | Usage | |
|---|---|---|---|
| --marketing-blue | #087FE7 | Half-step between --blue-700 and --blue-500 — marketing layouts only | |
| --marketing-ink | #252D3C | Deeper than --blue-gray — marketing backgrounds only |
| Token | Hex | Usage | |
|---|---|---|---|
| --accent-200 / Accent-300 | #F89C63 | Status accent — Figma Accent/300 | |
| --icon-success | #207811 | Success icon fill (snackbar) — Figma value | |
| --text-error / --border-error | #C32D48 | Error states, validation — Figma value | |
| --icon-error | #D1314F | Error icon fill — Figma value |
| Token | Hex | Usage | |
|---|---|---|---|
| --surface-alert-success | #EDFFEA | Success snackbar background | |
| --surface-alert-error | #FFE8ED | Error snackbar background, delete button | |
| --surface-alert-warning | #FFF1E4 | Warning snackbar background | |
| --surface-alert-message | #FFFFFF | Neutral message snackbar background |
| Token | Hex | Usage | |
|---|---|---|---|
| --surface-status-success | #D8FFD1 | Active/completed chip fill | |
| --surface-status-error | #FFE0E6 | Rejected/failed chip fill | |
| --surface-status-warning | #FFE8D3 | Inactivated/pending chip fill | |
| --surface-status-neutral | #ECEDF1 | Draft chip fill |
--grey-* retain British spelling for back-compat with the barion-design skill and downstream consumers. User-facing copy uses "gray". A coordinated rename to --gray-* is a follow-up across all consumers.2 · Typography Figma ↗
WeblySleek UI → system fallback. Body is Semilight (300). Buttons and headings are Semibold (600). H1 is Semibold at 32px per Figma brand-guideline spec. Caption and Body SM both 14px Semilight per Archita audit.
--fs-title-lg 64 / --fs-title-md 48). The --fs-display-* tokens (100 / 60 / 42) are a marketing-only extension — not part of the Figma product scale and never used in product UI.3 · Logo Figma ↗
The wordmark is the primary logo; the circular-arrow mark is its standalone icon. Both come from one form — never redraw, stretch, rotate, recolour off-palette, or add effects.
Wordmark — primary logo
Mark — app tile, avatar, favicon only
1 · White on Barion Blue gradient — preferred2 · Barion Blue on white3 · White on blue-gray
Minimum height — digital 36px · print 6 mm. Clear space = the cap-height of the “b” on all four sides.
Accept. Automate. Grow.1:865 → Brand icons) and are intentionally out of scope for this reference.4 · Shape Figma ↗
Each radius maps to specific components per Archita audit. Pill (999) is a contingency reserved for the onboarding-entry surface.
--shadow-modal), dropdowns/popovers (--shadow-overlay), tooltips (--shadow-tooltip), keyboard focus (--shadow-focus).5 · Spacing Figma ↗
Modular scale — tighter control at smaller values, broader spatial jumps at larger ones. Not a strict 4pt grid.
6 · Motion Figma ↗
Hover the tiles. Buttons use 300ms ease-in-out per Figma spec. No bounce.
7 · Gradients Figma ↗
Brand vertical = hero/marketing only. Button gradient = primary CTA.
--gradient-brand · 180°
--gradient-brand-button · 158° · #0074C7 → #0097DB
--gradient-brand-horiz is deprecated — kept only for back-compat, never use it in new UI.8 · Icons Figma ↗
This page is a reference, not the icon set. The Barion Figma System-icon library is the single source of truth — go there for the actual glyphs. The example below illustrates how icons behave technically, not which icons exist.
node 1-865 ↗. To avoid confusion this page intentionally does not reproduce the set — the single glyph shown is an illustrative stand-in (Lucide, the sanctioned substitution) for behaviour only. Always pull the real exports from Figma.currentColor — default · brand · success · errorcurrentColor, inherited from context. That's why active sidebar & tab icons turn blue.
9 · Buttons Figma ↗
8px radius for in-app product UI. Never use a drop shadow on a button (the pressed state uses a subtle inset shadow only).
:active state — it darkens with a subtle inset shadow, no movement or bounce..btn--loading while an async action runs. Pointer events are disabled automatically. Spinner color inherits from the button variant.aria-label describing the action since the visible icon alone isn't accessible.10 · Tertiary links Figma ↗
Links are a distinct component family from tertiary buttons. Use for inline calls-to-action that sit in body text — "See all", "Read the docs", "Forgot password". No padding, no background, just underlined-on-hover text.
11 · Inputs Figma ↗
6px radius, 10×12 padding, 16px Semilight body. Border #ECEDF1. Focus = border #99D5F1 + 4px --shadow-focus halo (Archita audit). Helper text is 16px to match field content.
12 · Dropdowns & selectors Figma ↗
Trigger button + popover menu. Default trigger height matches input field (44–46 px). Menu items follow Single-selector (Figma 8543:4049) — 5 states × 4 sizes. Leading icons sit in 16×16 slots.
13 · Date pickers Figma ↗
Input field with calendar icon trigger and popover calendar grid. Built from brand tokens.
14 · Chips Figma ↗
Chips use saturated --surface-status-* for persistent state on entities — tables, cards, lists. Alerts use the pastel --surface-alert-* family — see section 15.
15 · Alerts & snackbars Figma ↗
Two transient-feedback components. Alerts / notifications use the pastel --surface-alert-* family (one- or two-line, light + dark themes in Figma). The snackbar is a plain white toast — text + optional action, no sentiment colour. Both are distinct from chips, which are persistent.
8496:11886). The snackbar (node 10223:6803) is a plain white toast: text plus an optional action link, no sentiment colour. Don't conflate them.17 · Tables Figma ↗
Header: 14px Semibold, NOT uppercase caption. Row height: ~48px (compact) up to 69px (activity). Subtle zebra: even rows white, odd transparent.
| Action | To / from | Date | Amount | Status |
|---|---|---|---|---|
| Bank card topup | VISA •••• 5559 | May 21 14:32 | +€100.00 | Completed |
| Card topup fee | Barion | May 21 14:32 | −€1.23 | Fee |
| Send money | Acme Webshop | May 21 12:15 | −€12.50 | Pending |
| Card payment | Coffee Bean | May 20 09:00 | −€3.90 | Failed |
18 · Avatars & transaction lists Figma ↗
Avatars are circular profile containers. Three sizes (32 · 40 · 48). The default is the profile (user) avatar; a small corner badge can carry a status indicator. Transaction list pairs an avatar with name, secondary line, and right-aligned amount.
19 · Overlays — shadow is allowed here Figma ↗
Modals, dropdowns, tooltips. Only these get elevation tokens. Modal cancel uses tertiary button (flat) per Archita audit.
Confirm payout
Transfer €1,240.00 to your linked bank account ending in 4592.
Confirm payout
Transfer €1,240.00 to your linked bank account ending in 4592. This usually arrives within 1–2 business days.
Delete this authentication method?
You'll need to set up a new passkey before you can sign in again on this device.
Your session will expire soon
For your security, you'll be signed out when the timer runs out. Stay signed in to keep working.
20 · Sentiment indicators Figma ↗
Confirmation badges for transaction outcomes. Coloured circle + white glyph + soft halo. Animated in production with haptic feedback paired.
prefers-reduced-motion.21 · Selectors (list) Figma ↗
Continuous vertical list of options — each row a circle indicator + title + subtitle. Stays open so every option is visible at once (account picker, payment-method picker, KYC document type). Distinct from Dropdowns (§12). One row per state below, labelled on the right: default · pressed · selected · disabled. Selected = light-blue surface + blue ring + blue label. Sizes: Profiles 36 · Default 24 · Mobile 20 · Web 16 px (see Figma).
22 · Progress indicators Figma ↗
Determinate progress bars for known-length tasks; indeterminate spinners for indefinite loading. Blue fill / arc on a light blue track. No bounce — spinners rotate linearly.
23 · Hard rules Figma ↗
Cross-cutting principles. Per-component specs (radii, focus colors, typography sizes) live in their own sections above.
rgba(44, 52, 70, …)rgba(0, 0, 0, …)--text-disabled, --surface-disabled)opacity: 0.5--gradient-brand-horiz is deprecated)