Mandara
Concept
IBM Carbon · Mandara
Mandara
Dark Editorial · IBM Plex Typefaces · Orange Accent · 8px Base Grid
00 — Overview

Approach

A concept exploring how an open enterprise system can be adapted into a distinctive editorial brand, without throwing away the engineering rigour that makes it dependable.

Mandara keeps Carbon's structure and changes its voice: dark editorial surfaces, a serif display face and a warm orange accent, then closes the accessibility gaps that a re-theme tends to open.

Inherited from IBM Carbon

  • Token architecture: primitives feed semantic tokens (--interactive, --focus, --support-*), and components only reference the semantic layer.
  • Foundations: 8px base grid, IBM Plex typefaces, a Carbon-aligned type scale.
  • Motion model: productive vs expressive easing with Carbon-style durations.
  • Status palette: Carbon's dark-theme support colours for success, warning, error and info.

Added by Mandara

  • Editorial identity: near-black surfaces with warm cream light surfaces, and an orange brand accent in place of Carbon blue.
  • Serif display voice: IBM Plex Serif for headlines, Sans for UI, Mono for data and labels.
  • Brand effects: brand gradient, mesh gradient and glow shadows.
  • Event patterns: countdown, programme schedule rows and programme cards.
  • Audited contrast: every text and fill pair measured against WCAG 2.2 AA, with fixes applied (see Accessibility).
  • Usage guidelines for buttons, forms, alerts and cards, and downloadable tokens (JSON and CSS).
01 — Foundation

Colors

Semantic tokens map to a fixed palette of primitives. Always reference semantic tokens in components — never raw hex values.

Brand gradient
Orange — Primary brand palette
orange-50
#FFF3ED
orange-100
#FFD9C2
orange-200
#FFB08A
orange-300
#FF7D45
orange-400
#FF5722
orange-500 ★
#E84700 · primary
orange-600
#C43B00
orange-700
#9E2F00
Neutral — Backgrounds, surfaces, borders
black
#0A0A0A
black-100
#111111
black-200
#1A1A1A
black-300
#252525
black-400
#333333
cream-50
#FDFAF5
cream-100
#F5F0E8
cream-200
#EDE6D8
Support — Semantic status colors
success
#42BE65
warning
#F1C21B
error
#FA4D56
info
#4589FF
Gradients
--gradient-brand
135deg · orange spectrum
--gradient-mesh
Multi-radial mesh · hero bg
--gradient-card
Subtle card accent fill
02 — Foundation

Typography

Three IBM Plex families create a clear hierarchy — Serif for display, Sans for UI, Mono for data and labels.

Typefaces
Aa IBM Plex Serif
--font-serif
Display · Headlines · Editorial
Aa IBM Plex Sans
--font-sans
Body · UI · Labels
Aa IBM Plex Mono
--font-mono
Data · Code · Overlines
Type scale
Visual
Role display
Size 8rem / 128px
Font IBM Plex Serif Bold
Leading 1.1
Tracking -0.03em
Design Talk 2021
Role heading-01
Size 5.75rem / 92px
Font IBM Plex Serif Bold
Tracking -0.02em
Visual Design
Role heading-02
Size 3.375rem / 54px
Font IBM Plex Serif Bold
Design News & Highlights
Role heading-03
Size 2rem / 32px
Font IBM Plex Serif Semibold
Tips and Tricks — Ryan Herwitz
Role heading-04
Size 1.25rem / 20px
Font IBM Plex Sans Semibold
Design is the intermediary between information and understanding. Good design makes complexity feel simple, guides the eye, and creates meaning through deliberate visual choices.
Role body-large
Size 1.125rem / 18px
Font IBM Plex Sans Light
Leading 1.625
Session recordings will be available for all registered attendees. Make sure to subscribe to the newsletter to receive updates about future events and speaker announcements.
Role body
Size 1rem / 16px
Font IBM Plex Sans Regular
Leading 1.5
Session / 20:00 — 22:00
Role caption
Size 0.75rem / 12px
Font IBM Plex Mono Regular
Tracking 0.06em
Design Talk · Event Series
Role overline
Size 0.75rem / 12px
Font IBM Plex Mono Regular
Color --text-brand
03 — Foundation

Spacing

8px base grid. All spacing tokens are multiples of 4px. Use --space-N tokens exclusively — never raw pixel values.

--space-1 · 4px
--space-2 · 8px
--space-3 · 12px
--space-4 · 16px
--space-5 · 20px
--space-6 · 24px
--space-7 · 32px
--space-8 · 40px
--space-9 · 48px
--space-10 · 64px
--space-11 · 80px
--space-12 · 96px
--space-13 · 128px
04 — Foundation

Motion

Carbon-aligned durations with expressive easing curves. Productive motion is subtle; expressive is intentional.

100ms
--duration-fast
Micro interactions
200ms
--duration-base
Standard transitions
400ms
--duration-slow
Page transitions
700ms
--duration-slower
Hero / reveal
--ease-standard
cubic-bezier(0.2,0,0.38,0.9)
--ease-entrance
cubic-bezier(0,0,0.38,0.9)
--ease-exit
cubic-bezier(0.2,0,1,0.9)
--ease-expressive
cubic-bezier(0.4,0.14,0.3,1)
05 — Foundation

Grid

12-column grid with 16px gutters. Use .ds-grid-2 through .ds-grid-4 helpers or custom CSS grid with the column token set.

4-column grid
col 1
col 2
col 3
col 4
3-column grid
col 1
col 2–3 (span 2)
Sidebar layout (240px + 1fr)
sidebar
main content
06 — Foundation

Accessibility

Every text and fill pair was measured against WCAG 2.2 contrast (4.5:1 for text, 3:1 for large text and UI). A re-theme to dark with a saturated orange accent broke several pairs inherited from the default styling; the fixes below are now in the tokens.

Fixed in this version
PairBeforeAfterResult
Primary button labelWhite on #E84700 · 3.94:1Near-black on #E84700 · 5.03:1Fixed
Primary button hoverWhite on #FF5722 · 3.16:1Near-black on #FF5722 · 6.26:1Fixed
Danger button labelWhite on #FA4D56 · 3.35:1Near-black on #FA4D56 · 5.90:1Fixed
Gradient button label (worst stop)White on #FFD166 · 1.44:1Near-black on #FF5722 (darkest stop) · 6.26:1Fixed
Input placeholder · dark#555555 on #1A1A1A · 2.33:1#9A9A9A on #1A1A1A · 6.19:1Fixed
Input placeholder · light#BBBBBB on #EDE6D8 · 1.55:1#5F5F5F on #EDE6D8 · 5.14:1Fixed
Verified passing
PairColoursRatioResult
Body text · dark#FDFAF5 on #0A0A0A19.01:1Pass AA
Secondary text · dark#D9CFC0 on #1A1A1A11.30:1Pass AA
Brand text · dark#FF5722 on #0A0A0A6.26:1Pass AA
Brand text on card · dark#FF5722 on #1A1A1A5.50:1Pass AA
Brand text · light#C43B00 on #FDFAF55.08:1Pass AA
Success / error / info · dark#42BE65 · #FA4D56 · #4589FF on #0A0A0A8.28 · 5.90 · 5.92:1Pass AA
Usage rules from the audit
PairColoursRatioRule
Orange-500 as text on a card#E84700 on #1A1A1A4.42:1Rule Use orange-400 for orange text on dark surfaces; keep orange-500 for fills.
Orange-500 as text on cream#E84700 on #FDFAF53.78:1Rule On light surfaces use orange-600 (5.08:1) for orange text.

A new token, --text-on-interactive, holds the dark label colour used on every orange or red fill. Disabled text is exempt from WCAG but is kept above 3:1 so it stays legible.

07 — Components

Buttons

Seven variants, four sizes, icon-only, and disabled state. All respect focus ring and active press feedback.

Variants
Sizes
Icon buttons
States
08 — Components

Badges & Tags

Badges
Live Published Draft Error New Archived Featured
Badges with dot indicator
Broadcasting Online Offline Pending
Tags (interactive)
Visual Design Motion Typography Editorial Grid Systems Brand Identity
09 — Components

Forms

As it appears on your ID.
This field is required.
Controls
Enable notifications
Dark mode (system)
10 — Components

Cards

Card variants
20
21
Design Talk
Visual Design 2021
Annual design conference exploring the boundaries of visual communication and editorial aesthetics.
Live
Buy Tickets
Join Design Events
Early bird pricing available. Limited spots for the in-person experience.
Speaker
Ryan Herwitz
Senior Design Lead covering the latest in design news, tools, and industry trends.
Design News 20:00
Stat cards
Attendees
12K
↑ 24% vs last year
Speakers
48
↑ 8 new additions
Sessions
32
↑ 6 workshops
Hours
16
↓ 2h shorter
12 — Components

Alerts

🔥
Event is live now
Design News session has started. Join the live stream to watch Ryan Herwitz.
✓
Registration confirmed
Your ticket has been sent to hello@mandara.io
⚠
Limited availability
Only 12 VIP seats remaining. Book before 18:00.
✕
Payment failed
Your card was declined. Please update your payment method.
ℹ
Session recording available
The Design News recording is now available in your dashboard.
13 — Components

Feedback

Progress indicators, loading states, and skeleton placeholders.

Progress bars
Session capacity78%
Ticket sales42%
Spinners
Skeleton loaders
14 — Components

Overlays

Modal
Confirm Registration
You're about to register for Visual Design 2021 — VIP session. Your ticket will be sent to the email on file. This action cannot be undone.
Tooltips
Open in new tab
Settings
IBM Plex Mono · 11px
15 — Components

Usage Guidelines

Rules of thumb for the four components used most. Each pairs what to do with what to avoid, so the system stays consistent across teams.

Buttons
Do
  • One primary action per view; everything else is secondary or ghost.
  • Start labels with a verb that says the outcome ("Save changes", "Send invite").
  • Keep the focus ring visible, and confirm before a Danger action runs.
Don't
  • Put two primary buttons side by side; the user can't tell what matters most.
  • Use the gradient button for routine actions. Reserve it for one hero call to action per page.
  • Use Danger for anything that isn't destructive or irreversible.
Forms
Do
  • Give every field a persistent label above the input.
  • Write errors that say what went wrong and how to fix it, next to the field.
  • Group related fields and keep a single column on small screens.
Don't
  • Use the placeholder as the label; it disappears as soon as the user types.
  • Disable the submit button without explaining why.
  • Signal an error with colour alone. Add an icon and text.
Alerts
Do
  • Match the severity: info, success, warning or error.
  • Keep to one sentence and, where it helps, one clear action.
  • Pair colour with an icon and text so meaning survives for colour-blind users.
Don't
  • Stack more than two alerts on a screen.
  • Auto-dismiss errors or warnings; the user may not have read them.
  • Use error styling for something the user can ignore.
Cards
Do
  • Give each card one primary action.
  • Keep title, metadata and action in the same positions across a set.
  • Use surface steps (01 → 02 → 03) to show depth rather than borders alone.
Don't
  • Nest cards inside cards.
  • Make the whole card clickable and also add links inside it.
  • Run body copy beyond about three lines; link out to the detail view.
16 — Patterns

Event UI

Countdown, schedule rows, and programme cards — the core event page pattern from the Mandara theme.

Countdown timer
DaysHoursMinutesSeconds
10 : 22 : 19 : 37
Programme schedule
20:00
Ryan Herwitz
Design News
→
22:00
Adison Vetrovs
Tips and Tricks
→
23:30
TBA
Closing Keynote
Soon
17 — Reference

Token Reference

Copy this :root block into your project. All tokens are available globally via CSS custom properties.

↓ Download tokens.json ↓ Download tokens.css Dark default + light overrides · references use {alias} syntax in JSON 
/* ── Mandara — copy into your project ── */

:root {
  /* Color */
  --background:         #0A0A0A;
  --surface-01:        #111111;
  --surface-02:        #1A1A1A;
  --text-primary:      #FDFAF5;
  --text-secondary:    #D9CFC0;
  --text-brand:        #FF5722;
  --interactive:       #E84700;
  --text-on-interactive: #0A0A0A;
  --border-subtle:     rgba(255,255,255,0.08);
  --border-brand:      #E84700;
  --gradient-brand:    linear-gradient(135deg,#FF5722,#FF9A3C,#FFD166);

  /* Typography */
  --font-serif:        'IBM Plex Serif', Georgia, serif;
  --font-sans:         'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:         'IBM Plex Mono', monospace;

  /* Spacing */
  --space-1: 0.25rem;  --space-2: 0.5rem;
  --space-3: 0.75rem;  --space-4: 1rem;
  --space-6: 1.5rem;   --space-7: 2rem;
  --space-8: 2.5rem;   --space-10: 4rem;

  /* Motion */
  --duration-fast:     100ms;
  --duration-base:     200ms;
  --ease-standard:     cubic-bezier(0.2,0,0.38,0.9);
  --ease-expressive:   cubic-bezier(0.4,0.14,0.3,1);

  /* Radius */
  --radius-md:  4px;   --radius-lg:  8px;
  --radius-xl:  12px;  --radius-2xl: 20px;
  --radius-full: 9999px;
}