# Darwin

Coframe's design system. Brand, foundations, tokens and React components for building consistent, accessible product experiences — for people and for the agents that build with us.

- [Getting started](https://darwin.coframe.com/getting-started.md): Install the package and render your first component
- [Brand](https://darwin.coframe.com/brand.md): Logo, marks, colour and voice
- [Foundations](https://darwin.coframe.com/foundations/colors.md): Colour, type, space, materials, motion
- [Icons](https://darwin.coframe.com/foundations/icons.md): One icon set, sized and weighted by tokens
- [Components](https://darwin.coframe.com/components/overview.md): Self-styled React primitives and patterns
- [For agents](https://darwin.coframe.com/agents.md): Markdown pages, design.md, tokens.json

## Principles

| Principle | What it means |
| --- | --- |
| **One source of truth** | Every Coframe surface — Jarvis, AlphaCRO, the editor — renders the same Darwin components. A fix in Darwin ships everywhere. |
| **Tokens are the API** | Colour, radius, shadow, type and motion come from tokens in `tailwind.json`. Components never use raw hex, px or palette utilities. |
| **Renders the same in any host** | Styles are compiled and `dw-` prefixed, with no global resets. A Tailwind v3 app and a Tailwind v4 app get identical pixels. |
| **Light and dark by default** | Every semantic token has a light and a dark value. `ThemeProvider` flips a subtree; nothing else needs to know. |
| **Built for agents too** | Every page here is also Markdown, and the whole system is summarized in one `design.md`, so AI tools can build on-brand. |

## At a glance

```tsx
import "@coframe/darwin/styles.css";
import { Button, ThemeProvider } from "@coframe/darwin";

export function App() {
  return (
    <ThemeProvider theme="dark">
      <Button variant="primary">Launch experiment</Button>
    </ThemeProvider>
  );
}
```

Current release: `@coframe/darwin@0.117.0`. Every component in the catalog is also browsable, with all of its states, in [Storybook](/storybook/).

---

Source: https://darwin.coframe.com