# Palette

> Palette is a design language for interfaces where people and AI write together: three layers, four laws and fifteen live components, built mobile first by helikos.

Palette separates every screen into three layers: ink for the person, lapis for the interface, and pigment for the model (the AI). Four laws govern it: Colour (three layers, three inks), Motion (only the model's live work moves), Reach (every control shows what the model may do) and Rest (one tempo, one off-switch).

## Start

- [Home](https://palette.helikos.dev/): Palette at a glance: three layers, four laws, fifteen components.
- [Laws](https://palette.helikos.dev/laws/): Colour, motion, reach and rest: the four rules every component follows.

## Foundations

- [Foundations](https://palette.helikos.dev/foundations/): The tokens and rules underneath every component: colour, type, motion, layout, marks, writing and accessibility.
- [Colour](https://palette.helikos.dev/foundations/colour/): Three inks for three authors: ink for people, lapis for the interface, pigment for the model.
- [Typography](https://palette.helikos.dev/foundations/typography/): Three families, one scale, and how model text stays readable.
- [Motion](https://palette.helikos.dev/foundations/motion/): One tempo, what may move, and what motion costs.
- [Layout](https://palette.helikos.dev/foundations/layout/): Mobile first: thumb zones, safe areas, grids and spacing.
- [Marks](https://palette.helikos.dev/foundations/marks/): Reach marks, the model mark and the model caret.
- [Writing](https://palette.helikos.dev/foundations/writing/): Two voices on one screen: the interface’s and the model’s.
- [Accessibility](https://palette.helikos.dev/foundations/accessibility/): Still, contrast, screen readers, keyboard paths and text size.
- [Tokens](https://palette.helikos.dev/foundations/tokens/): Every colour, type, space, form and motion token, resolved live.

## Patterns

- [Patterns](https://palette.helikos.dev/patterns/): Recurring situations in AI-rich interfaces, and the components that solve them together.
- [Provenance](https://palette.helikos.dev/patterns/provenance/): Show who wrote what, before and after a person accepts it.
- [Streaming](https://palette.helikos.dev/patterns/streaming/): Show live model output without moving the page under the reader.
- [Review](https://palette.helikos.dev/patterns/review/): Accept, edit or reject what the model drafts, a word or a section at a time.
- [Delegation](https://palette.helikos.dev/patterns/delegation/): Hand work to an agent, see what it did, and take it back.
- [Confirmation](https://palette.helikos.dev/patterns/confirmation/): Seal actions that can’t be undone, so only people can take them.
- [Asking](https://palette.helikos.dev/patterns/asking/): Ask people for decisions, and let them ask the model about anything.

## Components

- [Components](https://palette.helikos.dev/components/): Fifteen live components. Each one follows all four laws and is built as a framework-free custom element.
- [Flux](https://palette.helikos.dev/components/flux/): Text that shows the model wrote it: flowing until accepted, still pigment after.
- [Caret](https://palette.helikos.dev/components/caret/): Fields that show who may write in them, with a caret in each writer’s colour.
- [Shift](https://palette.helikos.dev/components/shift/): Tables that show what the model changed since you last looked.
- [Rail](https://palette.helikos.dev/components/rail/): A scrollbar that maps who wrote each part of a document.
- [Lasso](https://palette.helikos.dev/components/lasso/): Select anything and ask the model about it, right where it sits.
- [Ask](https://palette.helikos.dev/components/ask/): The model asks with a few answers instead of an empty box.
- [Ring](https://palette.helikos.dev/components/ring/): A compact circular keyboard on demand, built for one-thumb swiping.
- [Tide](https://palette.helikos.dev/components/tide/): A field whose edge shows what the model is doing.
- [Morph](https://palette.helikos.dev/components/morph/): One button, five intents, chosen by the direction you drag.
- [Seal](https://palette.helikos.dev/components/seal/): Buttons that show what the model may press; irreversible ones need a hold.
- [Quorum](https://palette.helikos.dev/components/quorum/): Irreversible actions that need two different people.
- [Murmur](https://palette.helikos.dev/components/murmur/): The snackbar for model work: it streams, proposes and undoes.
- [Reel](https://palette.helikos.dev/components/reel/): A model summary that plays once, like a short film.
- [Bloom](https://palette.helikos.dev/components/bloom/): Decoration that grows with the value it decorates.
- [X-ray](https://palette.helikos.dev/components/xray/): Reveal what the model can read, write and do on any screen.

## Resources

- [Built for agents](https://palette.helikos.dev/resources/agents/): How this site reads to AI agents: prerendered pages, llms.txt and reach annotations.
- [Roadmap](https://palette.helikos.dev/resources/roadmap/): Components in design next, and what changed in each release.

## Optional

- [Full text](https://palette.helikos.dev/llms-full.txt): every page as plain text.
- [Sitemap](https://palette.helikos.dev/sitemap.xml)