Mandara
v1.0.0
IBM Carbon · Mandara
Mandara
Dark Editorial · IBM Plex Typefaces · Orange Accent · 8px Base Grid
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 — Components

Buttons

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

Variants
Sizes
Icon buttons
States
07 — 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
08 — Components

Forms

As it appears on your ID.
This field is required.
Controls
Enable notifications
Dark mode (system)
09 — 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
11 — 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.
12 — Components

Feedback

Progress indicators, loading states, and skeleton placeholders.

Progress bars
Session capacity78%
Ticket sales42%
Spinners
Skeleton loaders
13 — 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
14 — 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
15 — Reference

Token Reference

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

/* ── 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;
  --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;
}