Getting started

Introduction

A small design system for Ops Forward — warm, magenta-forward, plain-spoken.

Ops Forward Design System is a set of CSS tokens, visual guidelines, and components for building Ops Forward products and pages. Inspired by Kumo in structure — semantic tokens, light-dark()-driven theming — with our own visual identity.

What's included

The system ships in three layers:

• Tokens — CSS custom properties for every color, type size, spacing step, radius, shadow, and motion value. Import once; use everywhere.
• Components — Button, Badge, Card, Input, Tabs. Class-based so they work in any framework or plain HTML.
• Guidelines — Voice and tone, logo usage, accessibility patterns.

Philosophy

Small is intentional. Every component has one clear purpose. Copy is action-forward. Neutrals are warm so they harmonize with the magenta rather than fight it. Dark mode is automatic — no JavaScript, no toggle required for the base case.

Quick start

npm install @ops-forward/ui

Import the token stylesheet once at your project root:

import '@ops-forward/ui/css/tokens.css';

See Installation for fonts, dark-mode setup, and framework-specific notes.