Meiro UI Kit – a Live Design System Catalog

Color

One theme/ collection. The primitive, legacy, and loose variables are folded in: Neutral/100 became theme/muted, meiro-CDP/BE folds into theme/primary, Light-blue is dropped. Chips follow the mode toggle.

Semantic theme/ · light → dark

theme/primary#ff5f19#70ad52follows the active brand

theme/primary-foreground#ffffff

theme/background#ffffff→#0f0f10

theme/foreground#232e43→#e4e5e7

theme/card#ffffff→#1e1d20

theme/card-foreground#232e43→#ffffff

theme/muted#f5f5f5→#202124from Neutral/100 · dark confirmed

theme/border#e5e5e5→#313235

theme/input#ffffff→#313235

theme/input-border#d4d4d4→#45474a

theme/accent#e5e5e5→#26282c

theme/accent-foreground#585b5f→#bcbec2

theme/muted-foreground#6e7177→#d7d8db

theme/disabled#27282a

theme/disabled-foreground#a3a3a3

Status new · benchmarked against Geist

theme/success#15803d→#34d399

theme/warning#b45309→#fbbf24

theme/danger#dc2626→#f87171

theme/info#2563eb→#60a5fa

Alpha new · neutral, adapts to any surface

alpha-1foreground · 6%

alpha-2 · borderforeground · 12%

alpha-3foreground · 22%

scrimblack · 45%

Data viz new · categorical order is CVD-validated (min adjacent ΔE ≥ 12) · light slots 3/5/6 need direct labels

chart-1#ff5f19→#d95926follows the active brand

chart-2#2a78d6→#3987e5

chart-3#1baf7a→#199e70

chart-4#4a3aa7→#9085e9

chart-5#eda100→#c98500

chart-6#e87ba4→#d55181

Sequential magnitude · one hue from primary · color-mix steps

Contrast computed WCAG ratios · AA ≥ 4.5 · large text/UI ≥ 3

Pair	Light	Dark	Verdict
foreground on background	13.6	15.2	AA
card-foreground on card	13.6	16.8	AA
muted-foreground on card	4.9	11.8	AA
accent-foreground on accent	5.4	7.9	AA
status colors on card	3.3–5.2	6.1–10.1	AA · success light is large/UI
primary-foreground on primary	3.0	3.0	large/UI only — button text is 14px medium
primary-foreground on primary · BetterPipes	2.7	2.7	△ brand call — pair with icons, never small text
background on danger (error strip)	4.8	6.5	AA
disabled-foreground on muted	2.3	6.4	exempt — disabled controls

Surfaces follow Geist's two-background model: theme/background is Background 1 (the page), theme/card is Background 2 (raised panels).

Typography

The kit shipped three Inter body sizes (1.35 line-height). Extended with a heading scale and a mono style for IDs and metrics — the Sans + Mono pairing Geist relies on.

Heading / xlInter · Semibold · 24 / 1.15 · new

Real-time customer segments.

Heading / lgInter · Semibold · 20 / 1.2 · new

Real-time customer segments.

Heading / mdInter · Semibold · 16 / 1.3 · new

Real-time customer segments.

UI-text-largeInter · Regular · 16 / 1.35

Segment customers by behaviour in real time.

UI-text-defaultInter · Regular · 14 / 1.35

Segment customers by behaviour in real time.

UI-text-smallInter · Regular · 12 / 1.35 · casing fixed

Segment customers by behaviour in real time.

UI-monoMono · 13 / 1.4 · new

seg_id: 8f29a0 · 1,204 users · +12.4%

Components

Live and token-driven — everything responds to input and to both toggles. Switch the brand to BetterPipes and the whole set restyles to squared borders, #70AD52, and Space Grotesk.

Meiro Pipes

acme-corp · eu-central-1

jiri.hejl@meiro.io

Button sizes

Button states

Checkbox

Radio group

Toggle

Segmented control

Input states

Work email

Value is empty

Input sizes

Small · 32

Default · 40

Large · 48

Disabled

Verification code

Invitation code

Select

Channel

Slider

Monthly budget

Tabs

AI input

Date range

Reporting window

Tooltip

Avatar stack

Notification

New version of the app is out

Status badges

Active Pending Failed Queued

Alert

Payment failed. Update your card to keep exports running.

Textarea

Notes

Code snippet

// filter high-intent users const segment = meiro.query({ event: 'app_open', within: '7d', converted: false, })

Keyboard

⌘K ⇧⌘P

Combobox

Country

Actions menu

Modal

Table

Segment	Users	Δ 7d	Status
Churn risk	1,204	+12.4%	Pending
New signups	3,890	+4.1%	Active
Dormant	642	−2.0%	Failed

Pagination

Empty state

No segments yet

Create your first segment to start targeting users.

Note

Heads up. Segment changes take up to 5 minutes to sync across channels.

Skeleton

Progress

Prompts0%

Status

All systems operational

Segment preview · carousel

Segment preview

Average Lifetime Value

229 882out of 1 494 233

$250

+20% vs overall

$45

−5% vs overall

1.8 orders/month

+10% above average

22 281

+2.5% vs overall

$7 283

+26.8% vs average performance

Attribute insight · rings

Demographics

Most
common

Attribute is known for32k (49% out of segmented customers)

Materials

Radius and elevation as named scales — Geist's "materials" model. The single loose Border-radius becomes a four-step scale; the radius token is the lever BetterPipes flips to 0.

Radius Meiro rounds · BetterPipes squares every step to 0 — switch the brand to watch it flatten

radius-sm · 6 → 0

radius-md · 8 → 0 · default

radius-lg · 12 → 0

radius-full · pill → 0

Elevation named

elevation-inset
inset 0 1 2 · #000 20%

elevation-1 · button
0 1 2 · 0 4 8 · #27272A

elevation-2 · overlay
0 1 2 · 0 8 16 · #27272A

Motion new · transform/opacity only · hover the dots

duration-fast · 120ms
hover, press, small fades

duration-base · 200ms
popovers, toggles, reveals

duration-slow · 320ms
panels, toasts, carousels

ease-out · .23 1 .32 1 — enter/exit
ease-in-out · .77 0 .175 1 — on-screen moves

Layers new · z-index scale

layer-popover30selects, menus, calendars

layer-nav40sticky top bar

layer-toast90toaster stack

layer-modal100scrim + dialog

Breakpoints documented · used in media queries

560phonebento collapses to one column

620phone-lapp-shell content pane hides

720tabletgutter numbers move inline, type rows stack

960desktop-sbento drops to two columns

Spacing

The 4-based ramp, extended upward for layout-scale gaps. space-1,5 keeps its half-step (rename the comma); everything else steps in 4s.

space-14

space-1,56

space-28

space-312

space-416

space-520

space-624

space-832

space-1040

space-1248

space-1664

Icons

The 2px line set used across the components — tuned for developer-tool density, sized on a 24px grid.

arrow-right

chevron

check

mail

lock

calendar

copy

arrow-up

info

alert

plus

layers

clock

Code

The semantic layer as CSS custom properties — copy straight into a stylesheet. The full set (both modes, BetterPipes, spacing, type, elevation) ships as a Tokens Studio file: exports/meiro-tokens.json — import it via the Tokens Studio plugin to create Figma variables.

/* theme · light */ :root { --primary: #ff5f19; --primary-foreground: #ffffff; --background: #ffffff; --foreground: #232e43; --card: #ffffff; --card-foreground: #232e43; --muted: #f5f5f5; --muted-foreground: #6e7177; --border: #e5e5e5; --input: #ffffff; --input-border: #d4d4d4; --accent: #e5e5e5; --accent-foreground: #585b5f; --disabled: #27282a; --disabled-foreground: #a3a3a3; --success: #16a34a; --warning: #b45309; --danger: #dc2626; --info: #2563eb; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px; } /* theme · dark */ [data-theme="dark"] { --background: #0f0f10; --foreground: #e4e5e7; --card: #1e1d20; --card-foreground: #ffffff; --muted: #202124; --muted-foreground: #d7d8db; --border: #313235; --input: #313235; --input-border: #45474a; --accent: #26282c; --accent-foreground: #bcbec2; --success: #34d399; --warning: #fbbf24; --danger: #f87171; --info: #60a5fa; } /* brand · betterpipes */ [data-brand="betterpipes"] { --primary: #70ad52; --primary-foreground: #ffffff; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-full: 0; --chart-1: var(--primary); --chart-3: #eda100; --chart-5: #1baf7a; } /* data viz · CVD-validated order */ :root { --chart-1: #ff5f19; --chart-2: #2a78d6; --chart-3: #1baf7a; --chart-4: #4a3aa7; --chart-5: #eda100; --chart-6: #e87ba4; } [data-theme="dark"] { --chart-1: #d95926; --chart-2: #3987e5; --chart-3: #199e70; --chart-4: #9085e9; --chart-5: #c98500; --chart-6: #d55181; } /* motion & layers */ :root { --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --layer-popover: 30; --layer-nav: 40; --layer-toast: 90; --layer-modal: 100; }

Proposed changes

The edit list to mirror back into Figma — flatten to a single semantic layer and repoint every deleted variable to its theme/ equivalent.

Synced with Figma · July 11, 2026: the file still matches the original pull — all items below are pending. Fastest route: import exports/meiro-tokens.json via Tokens Studio, which creates the whole target structure (semantic collection, both modes, status + chart colors, scales) in one step; the list below then reduces to deleting the old collections and repointing layers.

Result: one semantic theme/ collection (19 tokens × Light/Dark, incl. status) plus Space, Type, and Radius scales. No primitives, no legacy brand set, no loose root variables — and the single primary / radius / font tokens are the exact levers the BetterPipes brand overrides.

Delete & repoint · resolved

Loose Primary color → theme/primary

Exact duplicate #ff5f19. Repoint layers, delete the root variable.

Neutral/200 → theme/border · theme/accent; Neutral/400 → theme/disabled-foreground

Same hexes; the primitives add nothing once the semantic tokens hold the value per mode.

Neutral/100 → new theme/muted

Your call. #f5f5f5 becomes the semantic muted surface (loading button, subtle fills). Dark value #202124 — confirmed; create the token with both modes in Figma.

meiro-CDP/BE → theme/primary

Your call. Fold the orange tint into the primary token; delete BE.

meiro-CDP/White → theme/card; delete Grey CC & Light-blue

Your call on Light-blue — removed. theme/background light stays #ffffff. Grey CC was unused.

Type · Spacing · Radius · housekeeping

Rename UI-Text-small → UI-text-small · done here

Lowercase to match the other two styles — fixed in the Type section above; apply the same rename to the Figma variable.

Expand the spacing ramp · reflected

This is spacing, not type. Add space-5 (20), space-8 (32), space-10 (40), space-12 (48), space-16 (64), and rename space-1,5 → space-1-5 (the comma breaks CSS/JSON export). Shown in the Spacing section.

Empty the root — re-home loose variables

Move UI font → Type/ and Border-radius → Radius/ so nothing floats at the top level. Type/ now also holds the heading + mono styles; Radius/ holds the sm/md/lg/full scale.

Add to Figma · new · benchmarked against Geist

Create the tokens this sheet added

Status — theme/success · warning · danger · info (Light/Dark). Materials — the radius-sm/md/lg/full scale and named elevation-inset/1/2. Type — the Heading xl/lg/md scale and a UI-mono style. They live here but aren’t in the Figma file yet.