# Meridian

> Meridian is the open-source design system behind every Efolusi product: 104 accessible React components, 161 design tokens (light, dark, compact), blocks, charts, and full product demos — served browser-native with zero build step. MIT licensed.

Live docs: https://meridian.efolusi.com · Source: https://github.com/efolusi/meridian · License: MIT

The layout is Meridian's own, organized by purpose: /site is the docs website; /components and /blocks hold the library; /showcases are product demos; /starters are copyable journeys; the stylesheet, tokens, assets, and compiled bundle stay at the root (see /ARCHITECTURE.md).

## Start here

- /README.md — overview, principles, content fundamentals
- /skills/SKILL.md — the agent skill: how to build Efolusi-branded interfaces with Meridian
- /styles.css — stylesheet entry (imports /tokens/*)
- /_ds_bundle.js — compiled component bundle (all components on one global namespace)
- /_ds_manifest.json — machine-readable manifest of components, tokens, cards
- /site/registry.json — machine-readable registry index; per-item install files in /site/registry/

## Components

104 components in /components/<group>/ across 12 groups: forms, display, navigation, feedback, data, overlay, ai, code, files, dates, finance, icons.

Every component ships three per-component flat files (plus a shared per-group specimen card HTML):

- <Name>.jsx — the source (vendor it freely)
- <Name>.d.ts — typed props interface
- <Name>.prompt.md — usage guidance for humans and LLMs

## Usage

Load the stylesheet and bundle, then read components off the namespace:

    const { Button } = window.EfolusiDesignSystem_4ffc3d;

Or load both from the hosted site (no install):

    <link rel="stylesheet" href="https://meridian.efolusi.com/styles.css">
    <script src="https://meridian.efolusi.com/_ds_bundle.js"></script>

Dark mode: set data-theme="dark" on any subtree. Compact density: data-density="compact". Semantic tokens only — never raw ramp values.

## More

- /guidelines/ — accessibility, forms, governance
- /site/ — the documentation site (open /index.html)
- /blocks/ — pre-composed sections; /showcases/ — product demos (lift screen code); /starters/ — starter journeys (copy the folder)
- /CHANGELOG.md, /CONTRIBUTING.md, /SECURITY.md, /LICENSE