Open source · React + Tailwind v4

Tokens, not hardcoded values. Components made for AI interfaces. AA contrast in every theme.

View on GitHub Open the live gallery

40+ components·5 palettes × light/dark·Two dependencies

Live components

Everything here is real, go ahead and touch it

Principles

Opinionated where it matters

Four rules do most of the work. Stack them, spread them, or list them out.

Components

Built for AI products, not adapted to them

The AI-specific surface is first-class, highlighted below, and the everyday controls around it match to the pixel.

Quick start

Copy in, compose, ship

Formic is vendored, not installed. Copy styles/ and the components you need, import one CSS stack, and compose. Two peer dependencies: React and Tabler icons.

Terminal · pull the files into your project

# styles and components, no git history
npx degit eyosiyasketema1/formic-design-system/styles     src/styles
npx degit eyosiyasketema1/formic-design-system/components src/components

npm install react react-dom @tabler/icons-react

globals.css · Tailwind v4

@import "tailwindcss";
@import "./tokens.css";          /* source of truth */
@import "./themes.css";          /* 5 palettes, optional */
@import "./tailwind-theme.css";  /* → text-ink, bg-hover, … */

App.tsx

import ChatThread from "./components/ChatThread";
import PromptBar from "./components/PromptBar";

export default function Chat() {
  return (
    <>
      <ChatThread messages={messages} />
      <PromptBar onSend={send} />
    </>
  );
}

Build with your AI tool

The repo ships an installable skill and a rules file, so your agent follows the token rules, the type ramp, and the component patterns without being told twice.

Claude desktop or claude.ai

Download the skill file and open it in a chat, then click Save skill.

Download the skill

Claude Code

Drop SKILL.md into your skills folder and it loads automatically.

Terminal

mkdir -p ~/.claude/skills/formic-design-system
curl -o ~/.claude/skills/formic-design-system/SKILL.md \
  https://raw.githubusercontent.com/eyosiyasketema1/formic-design-system/main/skill/SKILL.md

Cursor, Copilot, any other agent

These read a rules file instead. Keep AGENTS.md at your project root, or paste it into your tool's rules setting.

Terminal

curl -o AGENTS.md \
  https://raw.githubusercontent.com/eyosiyasketema1/formic-design-system/main/AGENTS.md

Read SKILL.md Read AGENTS.md

40+

Components

Themes (5 palettes × 2 modes)

Contrast, machine-verified

Easing curve