Monarch

Getting Started

Install and configure the Monarch Design System in your project.

Installation

Monarch ships as both a Tailwind CSS preset and standalone CSS custom properties. Choose the approach that fits your stack.

Option 1: Tailwind Preset

If your project uses Tailwind CSS, import the Monarch preset for full utility class support.

// tailwind.config.js
import monarchPreset from 'monarch-design-system/tailwind-preset';

export default {
  presets: [monarchPreset],
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
};

Option 2: CSS Tokens Only

For non-Tailwind projects, import the CSS custom properties directly.

/* Import all tokens */
@import 'monarch-design-system/tokens';

/* Or import selectively */
@import 'monarch-design-system/tokens/colors.css';
@import 'monarch-design-system/tokens/typography.css';
@import 'monarch-design-system/tokens/spacing.css';
@import 'monarch-design-system/tokens/shadows.css';
@import 'monarch-design-system/tokens/animations.css';

Dark Mode

Monarch is dark-first. Dark mode is the default — no attribute needed. For light mode, add data-theme="light" to your <html> element.

<!-- Dark mode (default) -->
<html>

<!-- Light mode -->
<html data-theme="light">

All color tokens automatically switch between dark and light values. Your components don't need to change — just toggle the attribute.

Design Principles

Design is Function

The aesthetic serves the experience, not the other way around. Beautiful, yes — but never at the cost of clarity or ease.

Intentional Restraint

Every element earns its place. No feature bloat, no competing calls-to-action — just a clean path to the thing you're trying to do.

Premium by Default

Gradient accents, glassmorphism, smooth animations. The emotional positioning through UI that most products ignore.

Composable Architecture

Atomic Design: Atoms → Molecules → Organisms → Templates. Every piece snaps together predictably.

Atomic Design Structure

Based on Brad Frost's Atomic Design methodology, Monarch organizes components into five levels of increasing complexity:

A

Atoms

The smallest building blocks — buttons, badges, inputs, toggles, avatars, icons. Indivisible UI elements.

M

Molecules

Simple combinations of atoms — stat cards, search bars, health indicators, navigation items.

O

Organisms

Complex components built from molecules — sidebars, data tables, kanban boards, agent feeds, chat interfaces.

T

Templates

Full page layouts composed from organisms — dashboards, list views, detail screens.