Sapphire UI

A design system with editorial character and practical controls. Navy and gold, shared CSS, typed React components and native elements.

Design foundations

Brand, surfaces and status. Light and dark values together.

Three font families, the full type scale and reading rhythm.

The 4px grid, control density, corners and elevation.

Tokens, typography and shared component styles. Use plain HTML or your preferred framework.

import "@kongmy-dev/sapphire-ui/foundations.css";
import "@kongmy-dev/sapphire-ui/button.css";

Browser behaviour for site chrome, announcements and consent. Register only the elements you need.

import "@kongmy-dev/sapphire-ui/elements/banner";
import "@kongmy-dev/sapphire-ui/banner.css";

Typed component entries with the same CSS contract. Install behaviour peers only where required.

import { Button } from "@kongmy-dev/sapphire-ui/button";

bun add @kongmy-dev/sapphire-ui

Load foundations once, then the styles and entry points on each component page. Read the setup guide →

Choose a component for setup, live examples with a page theme control, and supported props.