# @filipgutica/design-system

> Filip's design language: tokens, component specs, and a component catalogue in plain CSS and HTML, for any framework. Version 1.0.16.

Install it with `pnpm add @filipgutica/design-system`, then import `@filipgutica/design-system/fonts.css` and `@filipgutica/design-system/tokens.css` before your own styles. `cssVar()` from the package gives typed `var()` references.

Read DESIGN.md first: it holds the selection rules and acceptance checks. Copy component markup and styles from components.html, and follow each component's spec in components.md.

## Docs

- [DESIGN.md](https://filipgutica.github.io/design-system/DESIGN.md): the design language, selection rules, and acceptance checks
- [components.md](https://filipgutica.github.io/design-system/components.md): one spec per component: anatomy, states, Do and Don't, keyboard, motion, and forced colors
- [decisions.md](https://filipgutica.github.io/design-system/decisions.md): why each decision was made, and the 2.0.0 token rename table
- [index.json](https://filipgutica.github.io/design-system/index.json): every component with its layer, purpose, Do and Don't lines, page, and spec

## Pages

- [Overview](https://filipgutica.github.io/design-system/): install paths for plain HTML, React, and agents, and the package exports
- [Foundations](https://filipgutica.github.io/design-system/foundations.html): every token with its light and dark value and its role
- [Components](https://filipgutica.github.io/design-system/components.html): every component in each state, with markup to copy
- [tokens.css](https://filipgutica.github.io/design-system/tokens.css): every token as a CSS variable, light and dark

## Components

- [Button](https://filipgutica.github.io/design-system/components.html#button): The main action control: primary, secondary, ghost, danger, and text.
- [Quiet action](https://filipgutica.github.io/design-system/components.html#quiet-action): A small transparent action inside a component, such as Copy or Close.
- [Checkbox and radio](https://filipgutica.github.io/design-system/components.html#checkbox-and-radio): Pick several options, or one from a short list.
- [Radio card group](https://filipgutica.github.io/design-system/components.html#radio-card-group): Pick one option that needs a description.
- [Switch](https://filipgutica.github.io/design-system/components.html#switch): Turn a setting on or off at once.
- [Toggle button](https://filipgutica.github.io/design-system/components.html#toggle-button): A labelled card that latches on, with a switch inside.
- [Segmented control](https://filipgutica.github.io/design-system/components.html#segmented-control): Two to five short options that apply at once.
- [Text input and textarea](https://filipgutica.github.io/design-system/components.html#text-input-and-textarea): Type a short value or a longer note.
- [Select](https://filipgutica.github.io/design-system/components.html#select): Choose from a longer list.
- [Field wrapper](https://filipgutica.github.io/design-system/components.html#field-wrapper): Label, description, and error text around a field.
- [Slider](https://filipgutica.github.io/design-system/components.html#slider): Set a value in a range.
- [Progress](https://filipgutica.github.io/design-system/components.html#progress): Show how far a task has got.
- [Score](https://filipgutica.github.io/design-system/components.html#score): Show a value out of a maximum.
- [Badge](https://filipgutica.github.io/design-system/components.html#badge): A short status label.
- [Alert](https://filipgutica.github.io/design-system/components.html#alert): A real caveat or status message in the page.
- [Surface and card](https://filipgutica.github.io/design-system/components.html#surface-and-card): Panels and cards for parallel, comparable content.
- [Figure](https://filipgutica.github.io/design-system/components.html#figure): An image or diagram with a caption.
- [Dialog](https://filipgutica.github.io/design-system/components.html#dialog): A modal task that needs an answer before the page continues.
- [Drawer](https://filipgutica.github.io/design-system/components.html#drawer): A side panel, such as phone navigation.
- [Navigation list](https://filipgutica.github.io/design-system/components.html#navigation-list): Rows of links with current page and current location.
- [Section rail](https://filipgutica.github.io/design-system/components.html#section-rail): A sticky list of sections that moves into a drawer on phones.
- [Find field](https://filipgutica.github.io/design-system/components.html#find-field): Filter a navigation list as you type.
- [Breadcrumbs](https://filipgutica.github.io/design-system/components.html#breadcrumbs): The path from the site to this page.
- [Pager](https://filipgutica.github.io/design-system/components.html#pager): Previous and next pages in a sequence.
- [Tabs](https://filipgutica.github.io/design-system/components.html#tabs): Switch panels about one object, without leaving the page.
- [Skip link](https://filipgutica.github.io/design-system/components.html#skip-link): Jump past the header to the content.
- [Keyboard key](https://filipgutica.github.io/design-system/components.html#keyboard-key): Show a key or shortcut in text.
- [Code block](https://filipgutica.github.io/design-system/components.html#code-block): Source code with an optional header and Copy, and a live example above it.
- [Command plate](https://filipgutica.github.io/design-system/components.html#command-plate): A shell command on a hue-tinted plate.
- [Terminal capture](https://filipgutica.github.io/design-system/components.html#terminal-capture): A recorded terminal screen with a status line.
- [Site header](https://filipgutica.github.io/design-system/components.html#site-header): The ~/name header with project switcher and appearance.
- [Page type and helpers](https://filipgutica.github.io/design-system/components.html#page-type-and-helpers): Mono headings, steps, definitions, facts, and the footer.