Design System

The visual language for mdit — built on the "Paper Engine" identity. Light-first, typographically confident, deliberately restrained.

Geist Type Family Ink & Paper Light-first Developer-ready tokens

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

--gradient-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 with layered shadows. Multi-layer shadows create softer, more natural elevation. Accent glows highlight interactive elements.

Surfaces

Base --color-bg

Inset --color-bg-inset

Surface --color-bg-surface

Elevated --color-bg-elevated

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

Accent Glow

--shadow-accent-sm Primary buttons at rest

--shadow-accent-md Buttons on hover, focus glow

--shadow-accent-lg Hero CTAs, spotlight

Accent Glow (Dark Mode)

Luminous glow rings — most vivid in dark mode.

--glow-accent-xs Micro glow for inputs

--glow-accent-sm Small glow for buttons

--glow-accent-md Medium glow for hover

--glow-accent-lg Large glow for hero CTAs

Inset Shadows (Dark Mode)

Carved/recessed areas — code blocks, input wells.

--shadow-inset-sm Light inset for inputs

--shadow-inset Deep inset for code blocks

Accent-Tinted Surface

--color-bg-accent-tint Selected / active state

Gradient Borders

Shimmer Border

Gradient border via mask-composite technique. Used for elevated, premium card styles.

Borders

--color-border-subtle Barely-there dividers

--color-border Default

--color-border-strong Strong

--color-border-accent Accent (focus)

Components

Core UI patterns built from design tokens. Enhanced with gradient accents, layered shadows, and glass effects inspired by shadcn/ui.

Buttons

Variants

Sizes

States

Cards

Default Card

Surface background with layered shadow. The standard container for grouped content.

Interactive Card

Hover to see the lift effect. Shadow deepens and card rises with smooth easing.

Inset Card

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

Elevated Card

Premium shimmer border with deeper shadow. Used for feature highlights and pricing.

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

Skeleton Loading

Motion

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

Timing

--duration-fast

100ms

--duration-normal

200ms

--duration-moderate

300ms

--duration-slow

500ms

--duration-slower

600ms

Easing Curves

--ease-default Smooth deceleration

--ease-in Accelerating exit

--ease-out Decelerating enter

--ease-bounce Overshoot settle

--ease-spring Subtle spring

New Animations

glow-pulse Accent shadow breathing

float Gentle vertical hover

shimmer Skeleton loading sweep

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.

Settings

Code

Copy

Check