Colors

A constrained palette built on the ink & paper principle. Opacity-based borders adapt to any surface. Accent blue is reserved for interactive elements.

Neutrals

White #FFFFFF white

Zinc 50 #FAFAFA zinc-50

Zinc 100 #F4F4F5 zinc-100

Zinc 200 #E4E4E7 zinc-200

Zinc 300 #D4D4D8 zinc-300

Zinc 400 #A1A1AA zinc-400

Zinc 500 #71717A zinc-500

Zinc 700 #3F3F46 zinc-700

Zinc 800 #27272A zinc-800

Zinc 850 #18181B zinc-850

Zinc 900 #111113 zinc-900

Zinc 950 #09090B zinc-950

Accent — Blue

Blue 50 #EFF6FF blue-50

Blue 100 #DBEAFE blue-100

Blue 200 #BFDBFE blue-200

Blue 400 #60A5FA blue-400

Blue 500 #3B82F6 blue-500

Blue 600 #2563EB blue-600

Blue 700 #1D4ED8 blue-700

Blue 800 #1E40AF blue-800

Feedback

Error #EF4444 red-500

Error BG #FEF2F2 red-50

Warning #F59E0B amber-500

Warning BG #FFFBEB amber-50

Success #22C55E green-500

Success BG #F0FDF4 green-50

Semantic Tokens (Live)

Text on Background

--color-bg / --color-text

Text on Surface

--color-bg-surface

Secondary on Muted

--color-bg-muted

Text on Accent

--color-accent

Inverse

--color-bg-inverse

Accent on Subtle

--color-accent-subtle

Typography

Geist Sans for UI, Geist Mono for brand and code. Type does the work that chrome usually does — oversized headlines, tight tracking, deliberate weight contrast.

Type Scale

xs Markdown, powered up. 12px

sm Markdown, powered up. 14px

base Markdown, powered up. 16px

lg Markdown, powered up. 18px

xl Markdown, powered up. 20px

2xl Markdown, powered up. 24px

3xl Markdown, powered up. 30px

4xl Markdown, powered up. 36px

5xl Markdown, powered up. 48px

6xl Markdown, powered up. 60px

Heading Hierarchy

Hero

Markdown, powered up.

H1

Page heading

H2

Section heading

H3

Subsection heading

H4

Small heading

Body & Code

Lead paragraph — mdit turns plain markdown into rich, interactive content with a single line of syntax.

Body text — Write one line of markdown syntax and it renders into charts, cards, diagrams, videos. No build step, no framework, just URLs that render. Works anywhere markdown works.

Secondary text — Used for supporting information, descriptions, and metadata.

Inline code: mdit.run/chart?type=bar

markdown

![chart](https://mdit.run/chart?type=bar&data=10,25,15,30)

![repo](https://mdit.run/repo?repo=vercel/next.js)

![diagram](https://mdit.run/diagram?type=flowchart&def=A-->B-->C)

Font Families

Geist Sans — UI & Headings ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Geist Mono — Brand & Code ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Spacing

4px base unit. Generous whitespace — content breathes. When in doubt, go larger.

Scale

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-6

24px

--space-8

32px

--space-12

48px

--space-16

64px

--space-24

96px

--space-32

128px

Border Radius

sm 4px

md 6px

lg 8px

xl 12px

2xl 16px

full 9999px

Elevation & Surfaces

Paper-inspired depth. Shadows whisper, borders are pencil-thin. Surfaces stack like sheets of paper on a desk.

Surfaces

Base --color-bg

Surface --color-bg-surface

Muted --color-bg-muted

Inverse --color-bg-inverse

Shadow Scale

--shadow-xs Interactive rest

--shadow-sm Cards, panels

--shadow-md Dropdowns, popovers

--shadow-lg Modals, dialogs

--shadow-xl Floating elements

Borders

--color-border Default (0.08 opacity)

--color-border-strong Strong (0.15 opacity)

--color-border-accent Accent (focus)

Components

Core UI patterns built from the design tokens. Each component composition is defined by its surface, shadow, border, and radius.

Buttons

Variants

Sizes

States

Cards

Default Card

Surface background, subtle border, light shadow. The standard container for grouped content.

Interactive Card

Hover to see the lift effect. Shadow deepens and card translates up 2px.

Inset Card

Muted background, no shadow. Used for nested or subordinate content areas.

Feature Card

Larger radius and padding. Used for marketing highlights and key features.

Inputs

Text Input Helper text goes here

Focus State

Error State Please enter a valid value

Disabled

Badges

Default Accent Success Warning Error

Code Block

javascript

const widget = await mdit.render('chart', {
  type: 'bar',
  data: [10, 25, 15, 30],
  // One line in. Rich visual out.
});

Toasts

Widget rendered successfully.

Changes saved.

API rate limit approaching.

Failed to render widget.

Widget Output Card

Motion

Quick, purposeful, restrained. Every animation communicates a state change. All motion respects prefers-reduced-motion.

Timing

--duration-fast

100ms Color, opacity, border

--duration-normal

200ms Hover lifts, scale, focus

--duration-moderate

300ms Dropdowns, panels

--duration-slow

500ms Page transitions

--duration-slower

600ms Logo animation

Easing Curves

--ease-default Smooth deceleration

--ease-in Accelerating exit

--ease-out Decelerating enter

--ease-bounce Overshoot settle

--ease-spring Subtle spring

Logo Animation

600ms reveal: letter m fades in (200ms), down arrow draws (0–300ms), up arrow draws with bounce (300–600ms).

Iconography

The m↓↑ Transform Glyph is the brand mark. Custom-drawn SVG arrows — never Unicode. UI icons use Lucide (24px, 1.5px stroke).

Logo Color Modes

Light (primary)

Dark

Mono Light

Mono Dark

Logo Sizing

40px — Minimum

80px — Nav

160px — Standard

320px — Hero

Favicon

16px 32px 64px

UI Icon Style

Lucide Icons — 24px grid, 1.5px stroke, round caps and joins.

Search

Settings

Code

Copy

Check

X

Design System