meridian/ui

THE SHARED SYSTEM

One language.
Many places.

Meridian is the Flutter design system behind Northspline, CrossProton, Mimameidr, Nibluma, ShotLama, and VaultLama. A common set of tokens and controls, tuned to each app's character.

Explore components How Meridian works
6 brands242 iconsLight + darkDesktop + touch

01 / PRINCIPLES

Designed to make
room for the work.

Meridian began with Northspline's desktop interface. The shared system keeps its underlying decisions consistent while letting each product set its own tone.

01

Islands on a ground

Work lives on distinct surfaces over a tinted canvas. Structure comes from placement and weight.

02

Accent means intent

One accent marks the active choice, the main action, and keyboard focus.

03

Focus has a place

Pointer, keyboard, and touch states are part of each control, with touch targets sized for fingers.

04

Weight before size

Hierarchy comes from weight and colour. Desktop text stays between 11 and 17 pixels, so dense screens remain calm.

05
AaAa

Contrast is checked

The token generator fails when text, an icon, a control edge, or the focus ring drops below its contrast floor in any brand or theme.

06

Motion explains

Durations, curves, and springs are tokens. Every animation has a reduced-motion fallback.

02 / THE LIBRARY

Built once.
Ready to use.

Buttons, inputs, navigation, feedback, containers, data, and document controls share the same token system. Open Widgetbook to inspect live states across brands, themes, and densities.

COMPONENT STUDY01 / ACTIONS + INPUTS
PROJECT SETTINGS

Make it yours.

A few familiar controls, with Meridian's quieter rhythm.

All changes saved
Automatic updatesKeep this workspace current in the background.
Changes are saved locally.Explore in Widgetbook
OPEN WIDGETBOOK TO TRY THE FLUTTER WIDGETS.

Actions

  • Button
  • Split button
  • Icon button
  • Toolbar button
  • Floating button
Open actions

Inputs

  • Shortcut field
  • Text field
  • Checkbox
  • Switch
  • Radio
  • Segmented
  • Slider
  • Range slider
  • Select
  • Color swatch
  • Color picker
  • Color well
  • Color choice row
  • Find bar
  • Calendar
  • Drop zone
  • Suggestions
Open inputs

Navigation

  • List row
  • Sidebar rows
  • Tabs
  • Tab strip
  • App bar
  • Pagination
  • Steps
  • Selection bar
Open navigation

Feedback

  • Banner
  • Toast
  • Progress bar
  • Meter
  • Spinner
  • Skeleton
  • Empty state
  • Busy overlay
Open feedback

Containers

  • Island
  • Section header
  • Split pane
  • Dialog
  • Sheet
  • Menu
  • Popover
  • Panel
  • Disclosure
  • Settings
  • Settings dialog
  • Drawer
  • Scrollbar
Open containers

03 / LIVE

The real widgets.
In this page.

This is the Flutter library itself, running in your browser. Pick a component, a brand, and a theme. In Widgetbook, knobs expose each property.

The preview downloads the Flutter engine, a few megabytes.

Open it in Widgetbook

04 / TOKENS

One source.
Every surface.

Colour, type, spacing, shape, and motion live in one token file. A generator writes the Dart constants and the design documentation from it.

Surfaces and ink

Light values shown. Each token has a dark counterpart.

  • ground#E8ECEE
  • pane#FFFFFF
  • pane-alt#F6F8F9
  • canvas#DCE2E5
  • ink#0F1B21
  • ink-muted#52616A
  • ink-faint#8795A0
  • line-strong#C3CCD1

Status

Shared by every brand, so a warning looks the same in each app.

  • success#16733A
  • warning#9A5B00
  • attention#B03A08
  • danger#B42318

Series

Eight categorical colours for charts, labels, and avatars.

Type scale

Desktop sizes. Touch density uses a larger scale.

  • display 26 / 600Open a mailbox
  • title 17 / 600Delete 3 notebooks
  • heading 15 / 600Quarterly report draft
  • body 13 / 400Recover the connection after a disconnect
  • label 12 / 500Display name
  • caption 11 / 500Edited 2 hours ago

Density

A brand picks its density. Row height in pixels:

compact24
regular28
comfortable32
touch48
242Lucide icons, one version
10spacing steps, 2 to 48 px
48 pxminimum touch target
2 pxfocus ring on every control

05 / BRANDS

A shared core.
Six signatures.

Each brand brings its own accent, typography, and density. The same components follow along without a second widget library.

N
01 / NORTHSPLINE

Cerulean focus.

Desktop Git with a calm, clear focus.

Accent
#056CB3
Density
regular
Type
Platform face
C
02 / CROSSPROTON

Violet precision.

Private mail with a violet accent.

Accent
#6D4AFF
Density
regular
Type
Inter
M
03 / MIMAMEIDR

Signal green.

A process explorer where data leads.

Accent
#0E7C59
Density
compact
Type
Geist
N
04 / NIBLUMA

Space to write.

Notebooks with paper, ink, and petrol.

Accent
#0B6477
Density
touch
Type
Literata
C
05 / SHOTLAMA

Graphite and magenta.

Capture pixels with quiet desktop chrome.

Accent
#B8338F
Density
regular
Type
Platform face
V
06 / VAULTLAMA

Midnight and masked.

Passwords that stay hidden until asked.

Accent
#463878
Density
regular
Type
Platform face

06 / IN CODE

A theme,
then widgets.

An app chooses its brand once. Widgets read colours, type, and spacing from the theme, so no screen names a colour itself.

Apply a brand
MaterialApp(
  theme: buildMeridianTheme(
    brand: MeridianBrands.northspline,
    brightness: Brightness.light,
  ),
  darkTheme: buildMeridianTheme(
    brand: MeridianBrands.northspline,
    brightness: Brightness.dark,
  ),
  home: const MeridianGround(
    child: InboxScreen(),
  ),
);
Build from primitives
MeridianIsland(
  title: 'Inbox',
  child: MeridianListRow(
    title: 'Quarterly report draft',
    subtitle: 'Anna Berg',
    meta: '09:41',
    selected: true,
    onTap: open,
  ),
);
Read tokens from the theme
final m = context.meridian;

Text('Inbox', style: m.text.bodyStrong);
ColoredBox(color: m.colors.paneAlt);
BorderRadius.circular(m.radius.lg);
const SizedBox(width: MeridianSpace.space4);

SEE IT IN CONTEXT

Every detail,
ready to inspect.

Browse isolated Flutter components, switch brands and themes, and try the controls yourself.

Open Widgetbook