# Simbolik Design System

> Design tokens, foundations and components for the web: CSS classes, React components and DTCG design tokens. Version 0.2.2 alpha (0.2.2-alpha). The code is under the MIT License and the Figma file under CC BY 4.0.

Every page on https://design.simbolik.ai/ is rendered from the design system's own source. Each foundation and component page has a markdown copy at its address without the closing slash, plus .md: https://design.simbolik.ai/components/button/ is https://design.simbolik.ai/components/button.md.

The catalog of every component, with its Status, classes, props and the choices each takes, is one JSON file: https://design.simbolik.ai/components.json. It is made from the components' variant manifests at every build.

## Docs

- [Introduction](https://design.simbolik.ai/docs/): What the Simbolik Design System is, what it holds, and where to start. As markdown at https://design.simbolik.ai/docs.md
- [Quick start](https://design.simbolik.ai/docs/quick-start/): A page drawn with the design system in four steps, with nothing but a browser and a text editor. As markdown at https://design.simbolik.ai/docs/quick-start.md
- [Installation](https://design.simbolik.ai/docs/installation/): Build the design-system folder from the code, and set up a React site to use its components. As markdown at https://design.simbolik.ai/docs/installation.md
- [Theme and density](https://design.simbolik.ai/docs/theme-and-density/): The switches that change how the components look, and how your own CSS follows them. As markdown at https://design.simbolik.ai/docs/theme-and-density.md
- [Tokens in Tailwind and code](https://design.simbolik.ai/docs/tokens/): The design tokens as Tailwind utilities, and read from TypeScript and JSON. As markdown at https://design.simbolik.ai/docs/tokens.md
- [Check your site](https://design.simbolik.ai/docs/check-your-site/): The conformance checker lists every value written by hand and every component rebuilt by hand. As markdown at https://design.simbolik.ai/docs/check-your-site.md
- [Version and Status](https://design.simbolik.ai/docs/status/): What the version number promises, and how ready each foundation and component is. As markdown at https://design.simbolik.ai/docs/status.md
- [Working with AI assistants](https://design.simbolik.ai/docs/ai/): Every page as markdown, the component catalog, and Open in Claude. As markdown at https://design.simbolik.ai/docs/ai.md

## Foundations

- [Color](https://design.simbolik.ai/foundations/color/): Colors named by the job they do, each with a light and a dark value, so one stylesheet serves both themes.
- [Typography](https://design.simbolik.ai/foundations/typography/): The typefaces, text sizes and named text styles that every component sets its words in.
- [Spacing](https://design.simbolik.ai/foundations/space/): The distances inside and between things, from a control's padding to the rhythm between sections of a page.
- [Size](https://design.simbolik.ai/foundations/size/): How big things are: control heights, icon boxes, touch targets and the widths content may grow to.
- [Radius](https://design.simbolik.ai/foundations/radius/): How corners are rounded, so controls, containers and capsules each keep their own shape.
- [Border width](https://design.simbolik.ai/foundations/border-width/): How thick a line is: hairlines that separate and edge, two-pixel lines for emphasis, and thick rules for accents.
- [Elevation](https://design.simbolik.ai/foundations/elevation/): Shadows that show how far a surface seems to sit above the page.
- [Blur](https://design.simbolik.ai/foundations/blur/): The frosted blur behind see-through surfaces, so a panel can show what lies behind it.
- [Opacity](https://design.simbolik.ai/foundations/opacity/): The fade for a whole element that should read as unavailable, such as a disabled picture.
- [Focus](https://design.simbolik.ai/foundations/focus/): How thick the keyboard focus ring is and how far it sits from the control it marks.
- [Stacking order](https://design.simbolik.ai/foundations/layer/): Named layers that decide what sits on top when things overlap, such as a dialog above a menu.
- [Motion](https://design.simbolik.ai/foundations/motion/): How long a change takes and how it speeds up and slows down, chosen by why something moves.
- [Breakpoints](https://design.simbolik.ai/foundations/breakpoint/): The screen widths at which text grows, components take their wide form and a page makes room for its side columns.

## Components

- [Accordion](https://design.simbolik.ai/components/accordion/): A stack of headings that each open to reveal their content, as separate cards or as a flat list divided by rules.
- [Alert](https://design.simbolik.ai/components/alert/): An inline message that stays on the page: an icon, a title, a description, and an optional action or dismiss control.
- [Alert dialog](https://design.simbolik.ai/components/alert-dialog/): A modal that asks before something that cannot be undone: a title, what will happen, and a cancel and a confirm action. It closes only on them and Escape.
- [App bar](https://design.simbolik.ai/components/app-bar/): The top bar of an application: brand, navigation links, then search, action buttons, the theme switch and the user, in five looks; the links fold into a menu when they do not fit.
- [Avatar](https://design.simbolik.ai/components/avatar/): A person or thing as a circle: initials, an icon, or a picture, in six sizes.
- [Avatar group](https://design.simbolik.ai/components/avatar-group/): Overlapping avatars for the people on a project or a thread, and a count of the rest.
- [Avatar with name](https://design.simbolik.ai/components/avatar-with-name/): A person's avatar with their name beside it and an optional second line, such as their role.
- [Badge](https://design.simbolik.ai/components/badge/): A small status marker: a soft or flat pill with a label and optional icons.
- [Banner](https://design.simbolik.ai/components/banner/): A one-line announcement across the top of a site or app: a short message, an optional link and an optional dismiss control, on a full-width strip.
- [Bar chart](https://design.simbolik.ai/components/bar-chart/): Amounts side by side, such as a week of days or a month: plain bars, or bars stacked by kind with a legend, over a value axis and light grid lines.
- [Board](https://design.simbolik.ai/components/board/): Columns of cards, side by side on a wide screen in a frame that scrolls sideways, and stacked on a phone.
- [Board column](https://design.simbolik.ai/components/board-column/): A lane of cards on a board: a title with a capacity meter and an action, then groups of cards, each with a label and a count.
- [Breadcrumbs](https://design.simbolik.ai/components/breadcrumbs/): The trail of pages above this one, each a link, ending on the page the reader is on.
- [Button](https://design.simbolik.ai/components/button/): The action control: five tones, three sizes, with optional leading and trailing icons or an icon alone, a small avatar before the label or a count after it.
- [Button group](https://design.simbolik.ai/components/button-group/): Several buttons acting as one control: spaced apart, or segmented into one bar with dividers.
- [Button note](https://design.simbolik.ai/components/button-note/): A button with a short line of quiet words that says what pressing it will do, or why it cannot be pressed now.
- [Calendar](https://design.simbolik.ai/components/calendar/): A month of days to choose a date or a range of dates from, with buttons to the months before and after; it spreads its columns across the width it is given.
- [Capacity meter](https://design.simbolik.ai/components/capacity-meter/): A row of two to four short bars, as many filled as places are taken, with the same in words, such as "1 of 2 places".
- [Card](https://design.simbolik.ai/components/card/): A bounded box about one thing: an optional picture, a header, a body and a footer, on one of five surfaces and in one of five layouts.
- [Checkbox](https://design.simbolik.ai/components/checkbox/): A box that is ticked or not, with its label beside it and an optional line under the label, for choices that are independent of each other.
- [Chip](https://design.simbolik.ai/components/chip/): A small selectable token — a filter, a choice, a person — that can carry an avatar and be removed.
- [Choice card](https://design.simbolik.ai/components/choice-card/): One choice drawn as a card, with a label and a line under it: picked like a radio, or ticked like a checkbox.
- [Code block](https://design.simbolik.ai/components/code-block/): Code in a well, colored by kind and numbered by line, with a top bar for a file name or language tabs and small icon actions such as copy.
- [Collapsible](https://design.simbolik.ai/components/collapsible/): One row that shows or hides the content under it, for detail most readers can skip.
- [Color area](https://design.simbolik.ai/components/color-area/): Picks two channels of a color at once, saturation across and brightness up, by dragging a thumb in a square of the colors of one hue.
- [Color field](https://design.simbolik.ai/components/color-field/): A text field for a color code, such as #3E63DD, with the color shown at its start.
- [Color picker](https://design.simbolik.ai/components/color-picker/): A field or a swatch that opens a panel to choose a color: by dragging in a square and along strips, by typing its code, or by picking a saved swatch.
- [Color range](https://design.simbolik.ai/components/color-range/): The steps of one color range in a strip, each with its swatch, its name and its contrast against white, with the step in use ringed.
- [Color slider](https://design.simbolik.ai/components/color-slider/): Picks one channel of a color, its hue, opacity, saturation or lightness, by dragging along a strip that shows the colors it moves through.
- [Color swatch](https://design.simbolik.ai/components/color-swatch/): One color shown as a small square or dot, over a checkerboard so a see-through color shows, or crossed out when no color is set.
- [Color swatch picker](https://design.simbolik.ai/components/color-swatch-picker/): A set of colors to pick one from, such as saved colors or colors to try, in rows that wrap.
- [Combobox](https://design.simbolik.ai/components/combobox/): A box to type in that suggests matches from a list, for one choice or several: the input’s well, the dropdown panel under it, and each pick a chip.
- [Command palette](https://design.simbolik.ai/components/command-palette/): A search-first panel of commands: type to filter, arrow keys to move, Enter to run, with groups under small labels and key hints at the foot.
- [Contrast pair](https://design.simbolik.ai/components/contrast-pair/): Two colors drawn as text on its background, with their contrast ratio and the mark it earns: AAA, AA, AA large or fails.
- [Corner sample](https://design.simbolik.ai/components/corner-sample/): One corner drawn at one radius, for a list of corner steps or roles beside their names and sizes.
- [Curve editor](https://design.simbolik.ai/components/curve-editor/): A motion curve to shape by dragging its two handles, moving them with the arrow keys, or typing its four numbers.
- [Date and time picker](https://design.simbolik.ai/components/date-picker/): A date, a time, or both, typed the reader’s own way or, for a date, chosen from a small calendar that opens under the field.
- [Description list](https://design.simbolik.ai/components/description-list/): The facts about one thing, as rows of a name and its value, such as an account’s details or a record’s fields, with an optional action on each.
- [Diff stat](https://design.simbolik.ai/components/diff-stat/): How much a change touched: the lines added and removed, such as "+128 −12", and a row of five small squares that shows the balance.
- [Divider](https://design.simbolik.ai/components/divider/): A two-line rule — a shade line over a highlight line — that separates content, optionally with a word in the middle.
- [Donut chart](https://design.simbolik.ai/components/donut-chart/): Two to eight parts of a whole as a ring, with the total in the middle and a legend beside it that names each part with its value.
- [Drawer](https://design.simbolik.ai/components/drawer/): A panel that slides in from one edge of the window over a scrim, with a header, a scrolling body and a footer of actions.
- [Dropdown](https://design.simbolik.ai/components/dropdown/): A raised list of actions or links that opens from a button: grouped items with an icon, a label, a key hint, an optional tick box or single-choice tick, items that open a second menu beside them, and a red one for the destructive action, in two item heights; it can also open at the pointer as a right-click menu.
- [Empty state](https://design.simbolik.ai/components/empty-state/): The words that fill an area when what belongs there is missing or failed to load, naming the cause and offering the next step.
- [Error summary](https://design.simbolik.ai/components/error-summary/): A box at the top of a form after a failed send, listing every mistake as a link that moves focus to its field.
- [Field](https://design.simbolik.ai/components/field/): The frame around one form control: its label with an optional required mark, and help text or an error message under the control.
- [Field group](https://design.simbolik.ai/components/field-group/): Several radios, checkboxes or choice cards under one question: a fieldset with its legend, help, and one error message for the group.
- [Field message](https://design.simbolik.ai/components/field-message/): The line under a field or a group of choices: help that says what to enter, a warning to notice, or an error that says what is wrong.
- [File row](https://design.simbolik.ai/components/file-row/): One chosen file: its name, size and state, its progress while it uploads, and what can be done with it.
- [File upload](https://design.simbolik.ai/components/file-upload/): A place to choose files or drop them, with what is accepted said first, and each chosen file in a row below with its progress and result.
- [Filter bar](https://design.simbolik.ai/components/filter-bar/): Search, filters, sort and Clear all together above a list or a table, with the filters applied as chips and the number of results they leave.
- [Footer](https://design.simbolik.ai/components/footer/): The foot of a website in six looks: the brand, page links in columns or a row, and a legal strip; on a phone the columns fold into rows that open.
- [Header](https://design.simbolik.ai/components/header/): The top of a website: brand, page links, a call to action and the theme switch, in five looks; the links fold into a menu when they do not fit.
- [Heatmap](https://design.simbolik.ai/components/heatmap/): A grid of days, a column for each week, each day shaded by how much happened, with the months above, a summary and a scale from less to more.
- [Icon](https://design.simbolik.ai/components/icon/): A Phosphor glyph in one of the system icon sizes, inheriting the color of the text beside it.
- [Image placeholder](https://design.simbolik.ai/components/image-placeholder/): A flat block that stands where a picture will go, for empty states and mockups.
- [Input](https://design.simbolik.ai/components/input/): A single-line text field: a sunken well with an optional icon at either end, room for content before the value and an action after it, in three sizes.
- [Kbd](https://design.simbolik.ai/components/kbd/): A keyboard key: a small raised square with the key's symbol in the label face.
- [Label](https://design.simbolik.ai/components/label/): A field label: the text, an optional required mark, and an optional info icon that carries a tooltip.
- [Legend item](https://design.simbolik.ai/components/legend-item/): Names one series of a chart: a swatch in its color, its name, and its value if shown. A list of them is the chart's legend.
- [Line chart](https://design.simbolik.ai/components/line-chart/): A trend over time: one line, or the same with a soft area under it, or this period against the last as a dashed line, with a value axis, light grid lines and one marked point.
- [Link](https://design.simbolik.ai/components/link/): Text that goes somewhere, in three sizes or the size of the text around it, with an optional icon; underlined, unless it stands on its own. As a button it stays in the color of the words around it and opens something where it stands.
- [List](https://design.simbolik.ai/components/list/): Rows of the same kind, one thing each: plain, bulleted or numbered text, or rows with an icon, a title and a quiet line that go somewhere, do something or can be chosen.
- [Log](https://design.simbolik.ai/components/log/): What a program prints as it runs: wrapped lines in a well that keeps the newest in view until the reader scrolls up.
- [Logo](https://design.simbolik.ai/components/logo/): The Simbolik brand mark: the full logo, the mark alone, or the wordmark alone, colored by the text roles; or a site's own logo as shapes or as a picture file.
- [Menubar](https://design.simbolik.ai/components/menubar/): A row of menu titles, as at the top of a desktop app (File, Edit, View), each opening a dropdown menu; the arrow keys move along the bar and from one open menu to the next.
- [Meter](https://design.simbolik.ai/components/meter/): A short bar showing how full something is inside a known range, such as storage used, with an optional label and value.
- [Modal](https://design.simbolik.ai/components/modal/): A centered dialog over a scrim for a short interruption: an icon and title, a body, and a footer of actions.
- [Navigation item](https://design.simbolik.ai/components/nav-item/): One link in a navigation list, with an optional leading icon, an optional count or dot, and a caret when it opens a group of further links.
- [Navigation menu](https://design.simbolik.ai/components/navigation-menu/): A site header's links, where an item with a caret opens a wide panel of described links and a featured column.
- [Number field](https://design.simbolik.ai/components/number-field/): A text field for a quantity or a measure, with its unit and minus and plus buttons that step it between its limits.
- [One-time code input](https://design.simbolik.ai/components/one-time-code-input/): Six boxes in two groups of three that act as one field, for a code sent by email or text message.
- [Page header](https://design.simbolik.ai/components/page-header/): The top of one page or one object: the breadcrumbs, the page’s one main heading, a short introduction, its status, and the few actions for the whole page.
- [Pagination](https://design.simbolik.ai/components/pagination/): Moves between the pages of a long list: numbered buttons in a bar, Previous and Next around a select of pages, or a range readout for a table.
- [Password field](https://design.simbolik.ai/components/password-field/): A text field for a password or a passphrase, with a button at its end that shows and hides what is typed.
- [Picture tile](https://design.simbolik.ai/components/picture-tile/): A pressable tile with a picture and a short label under it, for choosing among looks, presets or templates in a gallery.
- [Popover](https://design.simbolik.ai/components/popover/): A small raised panel that opens from a button and stays beside it, holding a title, a few lines or a field, and actions, without blocking the page.
- [Progress bar](https://design.simbolik.ai/components/progress/): A track with a fill showing how far something has got, with an optional label and value above it; it can say the work failed, or that its end is not known.
- [Progress ring](https://design.simbolik.ai/components/progress-ring/): A ring that fills clockwise from the top to show how far something has got, with the value in the middle.
- [Radio](https://design.simbolik.ai/components/radio/): One of several choices, only one of which can be chosen, with its label beside it and an optional line under the label.
- [Ruler](https://design.simbolik.ai/components/ruler/): A width ruler for a preview: the layout states and breakpoints along one band, the screen widths, and a handle for the width now.
- [Search field](https://design.simbolik.ai/components/search-field/): A text field for filtering or searching, with a magnifier before the text, a clear control after it and an optional key hint at the end.
- [Section heading](https://design.simbolik.ai/components/section-heading/): The heading row of a section or a panel: its title, how many it holds, a quiet line such as how fresh it is, and one action at its end.
- [Segmented control](https://design.simbolik.ai/components/segmented-control/): A row of named choices in one bar, one of which is selected, with the selected one raised.
- [Select](https://design.simbolik.ai/components/select/): A choice from a list: the input well with a caret, opening the dropdown panel with one item per choice, in groups under a heading if wanted, each choice with a picture or an icon and a second line if wanted.
- [Shadow editor](https://design.simbolik.ai/components/shadow-editor/): Edits one shadow: a preview card drawn with it, its layers with their offsets, blur, spread, color and opacity, and a button to add a layer.
- [Sidebar](https://design.simbolik.ai/components/sidebar/): The side panel of an application: the logo, search, labeled groups of links with children, the user, and at the foot a button that keeps it open, keeps it a column of icons, or lets it open over the page when pointed at.
- [Skeleton](https://design.simbolik.ai/components/skeleton/): A placeholder shown while the real content loads: lines of text, a title, a label, an icon, an avatar, a badge, a button, an input, a media box, a list item, a card or a table row, or the shape of any component it wraps.
- [Slider](https://design.simbolik.ai/components/slider/): Chooses a number, or a lowest and highest number, along a range by dragging, clicking or the arrow keys: fine lines that turn red up to a narrow thumb, a thin line with a round thumb, a filled bar, or a tall filled bar with its label and value inside; a number box beside it takes a typed value.
- [Sparkline](https://design.simbolik.ai/components/sparkline/): A small line beside a figure that shows how it moved: rising, falling, steady or spiky. The figure carries the meaning.
- [Spinner](https://design.simbolik.ai/components/spinner/): A small turning ring that says something is being worked on, for a wait with no known end: alone, beside its words, or inside a busy button.
- [Split button](https://design.simbolik.ai/components/split-button/): One safe default action with a menu of related ones: a button and a caret button joined into one bar, the caret opening the menu.
- [Splitter](https://design.simbolik.ai/components/splitter/): The line between two panes that the reader drags, or moves with the arrow keys, to give one pane more room and the other less.
- [Stat](https://design.simbolik.ai/components/stat/): One figure with its name and a line of what it means, plain or as a link to where the figure comes from.
- [Status dot](https://design.simbolik.ai/components/status-dot/): A small colored dot that marks a status, with the status in words beside it.
- [Stepper](https://design.simbolik.ai/components/stepper/): Where the reader is in a form or task of three or more ordered steps: each step's mark, name and status in words, joined by a line; or "Step 2 of 4" with the step's name and a slim track.
- [Switch](https://design.simbolik.ai/components/switch/): An on-or-off control that takes effect at once: a filled track with a light thumb that slides to the on side.
- [Table](https://design.simbolik.ai/components/table/): Rows of data under headings that sort, filter and explain, with rows that open, pin or group, optional selection and a foot for the pagination.
- [Table of contents](https://design.simbolik.ai/components/table-of-contents/): A box listing the sections of the page, children indented, the one in view marked; in a narrow space its heading row opens and closes the list.
- [Tabs](https://design.simbolik.ai/components/tabs/): A bar of named views, one shown at a time, each tab in front of its own panel.
- [Tag](https://design.simbolik.ai/components/tag/): A small label naming a category, with an optional leading icon or picture and remove control; pressable, it opens something about what it names.
- [Text area](https://design.simbolik.ai/components/text-area/): A text box for several lines: the input well grown tall, with a grip at its corner to make it taller.
- [Theme switch](https://design.simbolik.ai/components/theme-switch/): The light-or-dark switch: two icon segments in one bar, the active one raised.
- [Timeline](https://design.simbolik.ai/components/timeline/): Things that happened, one after another: each event a dot for its kind, what happened, when, and who or what did it, joined by a line.
- [Toast](https://design.simbolik.ai/components/toast/): A short-lived message that floats above the page: the alert's anatomy, raised, arriving in a corner and leaving on its own after a few seconds unless someone is reading it.
- [Toggle button](https://design.simbolik.ai/components/toggle-button/): A button that stays on or off, such as bold text, a map layer or a filter: the outline or ghost button when off, sunken into the page when on.
- [Toolbar](https://design.simbolik.ai/components/toolbar/): A labelled bar of related tools for a view, a selection or an editor: what it acts on, groups of tools, and its main action, moved through with the arrow keys as one Tab stop.
- [Tooltip](https://design.simbolik.ai/components/tooltip/): A small floating label with an arrow, shown on hover or focus to name or explain the thing under it.
- [Tree view](https://design.simbolik.ai/components/tree-view/): Folders and files, or any list that nests, opened and closed level by level: one row each, with a caret, an icon and the label.
- [Uptime bar](https://design.simbolik.ai/components/uptime-bar/): A strip of days, one bar each, colored by whether a site or service was up, had an incident or was down, with the share up in words.

## Blocks

- [Agent card](https://design.simbolik.ai/blocks/agent-card/): One agent's job at a glance: its state in words, how far along it is, and the one thing to do next. Copyable examples built from the components, with their code and their stylesheet.
- [Bar list](https://design.simbolik.ai/blocks/bar-list/): A ranked list of names and figures, each over a bar that shows its share. Copyable examples built from the components, with their code and their stylesheet.
- [Diagram node](https://design.simbolik.ai/blocks/diagram-node/): One box of a how-it-works diagram: its kind, its name and what it does, with the dots its arrows meet. Copyable examples built from the components, with their code and their stylesheet.
- [File tree](https://design.simbolik.ai/blocks/file-tree/): A project's files in a panel, with the line it shows, a count of changes and when it was read. Copyable examples built from the components, with their code and their stylesheet.
- [Goal row](https://design.simbolik.ai/blocks/goal-row/): A goal's title and count over a bar of how much is done, with a line of details and its status in words. Copyable examples built from the components, with their code and their stylesheet.
- [Price card](https://design.simbolik.ai/blocks/price-card/): One plan at a glance: its name, its price, what it includes and the button that chooses it. Copyable examples built from the components, with their code and their stylesheet.
- [Project card](https://design.simbolik.ai/blocks/project-card/): One project at a glance: its stage in words, three figures, its recent work and how many places are taken. Copyable examples built from the components, with their code and their stylesheet.
- [Quote card](https://design.simbolik.ai/blocks/quote-card/): What a customer said, in their own words, under a quotation mark, with who said it. Copyable examples built from the components, with their code and their stylesheet.
- [Settings panel](https://design.simbolik.ai/blocks/settings-panel/): A column of settings beside what they change: a choice at the top, groups that open and close, and a footer to count and reset changes. Copyable examples built from the components, with their code and their stylesheet.
- [Site card](https://design.simbolik.ai/blocks/site-card/): One site at a glance: whether it answers, in words, the version it shows, its last thirty days and three figures. Copyable examples built from the components, with their code and their stylesheet.
- [Stat strip](https://design.simbolik.ai/blocks/stat-strip/): A row of stats in one frame, or none, that wraps to fewer columns as its space narrows. Copyable examples built from the components, with their code and their stylesheet.
- [Usage meter](https://design.simbolik.ai/blocks/usage-meter/): How much of an allowance is used, as short meters with their values and when it starts again, in a toolbar or stacked. Copyable examples built from the components, with their code and their stylesheet.

## Optional

- [Releases](https://design.simbolik.ai/releases/): what each version holds, what breaks, and what is known to be missing; every release's notes as markdown at https://design.simbolik.ai/releases.md
- [0.2.2 alpha release notes](https://design.simbolik.ai/releases/0.2.2-alpha/): The release notes for version 0.2.2-alpha. As markdown at https://design.simbolik.ai/releases/0.2.2-alpha.md
- [0.2.1 alpha release notes](https://design.simbolik.ai/releases/0.2.1-alpha/): The release notes for version 0.2.1-alpha. As markdown at https://design.simbolik.ai/releases/0.2.1-alpha.md
- [0.2 alpha release notes](https://design.simbolik.ai/releases/0.2.0-alpha/): The release notes for version 0.2.0-alpha. As markdown at https://design.simbolik.ai/releases/0.2.0-alpha.md
- [0.1.2 alpha release notes](https://design.simbolik.ai/releases/0.1.2-alpha/): Version 0.1.2-alpha, a small step after 0.1.1 alpha, much of it for phones. A tapped control no longer keeps its mouse-over look or flashes the browser's gray box. The app bar can slide away as the reader scrolls, and the browser's own bar can take the page's color. A site can draw its own logo, and the footer can open a link in a new tab. The conformance checker gains a rule that finds mouse-over looks a phone would keep. What breaks says what to change. As markdown at https://design.simbolik.ai/releases/0.1.2-alpha.md
- [0.1.1 alpha release notes](https://design.simbolik.ai/releases/0.1.1-alpha/): Version 0.1.1-alpha, a small step after 0.1 alpha. Screen readers get names they were missing, Safari gets two fixes, and a page can load every font from one stylesheet. The segmented control and the badge now match the Figma file, and the conformance checker reads more of a project. What breaks says what to change. As markdown at https://design.simbolik.ai/releases/0.1.1-alpha.md
- [0.1 alpha release notes](https://design.simbolik.ai/releases/0.1.0-alpha/): Version 0.1.0-alpha, the first Release of the design system. As markdown at https://design.simbolik.ai/releases/0.1.0-alpha.md
- [Licenses](https://design.simbolik.ai/licenses/): what the code, the Figma file, the fonts and the icons are under, and how to credit them
- [The code on GitHub](https://github.com/simbolik-lab/simbolik-design-system)
- [The Figma file on Figma Community](https://www.figma.com/community/file/1688324308358870630): the design the code is built from, to open and copy under CC BY 4.0