# Oymyakon DS

> InDriver design system. Figma is the source of truth. This index links the markdown source
> of every component and foundation the design system publishes.

Read the source before you write any value. The design system forbids raw px, raw hex and
invented motion — every value is a token declared in the files below. A component page carries
its spec, its accessibility contract and its machine-readable capabilities in one file.

## Components

- [BaseTextLine](https://super-dollop-pzmo65r.pages.github.io/base-text-line.md): The core single-line text input the text-field family is assembled on — optional prefix, the input (placeholder + caret), optional suffix in a row; X/9 input masks; developer-facing (no Figma master — designers use the assembled fields). (3.0.0 · 🔄 In progress)
- [Button](https://super-dollop-pzmo65r.pages.github.io/button.md): The primary action control — a hug-width pill assembled from one customButton base: a label column between two swappable side slots. Four locked configurations (L, M, S, Main CTA), six styles. (3.3.13 · 🔄 In progress)
- [Card](https://super-dollop-pzmo65r.pages.github.io/card.md): Vertical content surface — StartSlot / StartText / EndSlot stack on OnWhite with an optional CornerSlot (Checkbox) overlay; customCard base preset, ready-made presets assembled from it. (3.3.22 · ✅ Ready)
- [Cell](https://super-dollop-pzmo65r.pages.github.io/cell.md): List row — a universal clickable element for displaying structured content in vertical lists. (3.4.7 · 🔄 In progress)
- [Checkbox](https://super-dollop-pzmo65r.pages.github.io/checkbox.md): Binary selection control — a 24 box carrying a check glyph when selected, wrapped in a 48 touch target; State x Disabled matrix, one size. (3.1.2 · ✅ Ready)
- [Decorate Container](https://super-dollop-pzmo65r.pages.github.io/decorate-container.md): A wrapper that decorates any component: the hosted component sits in Slot#1, and up to two decorator slots place a badge, status indicator, icon, or Lottie above it — to highlight new features, alerts, notification counts, and special actions. (3.3.0 · 🔄 In progress)
- [Destination Button](https://super-dollop-pzmo65r.pages.github.io/destination-button.md): Screen-level entry into an order — search icon, two-line destination prompt, service image. A locked customButton configuration. (3.0.4 · 🔄 In progress)
- [Floating Button](https://super-dollop-pzmo65r.pages.github.io/floating-button.md): An action floating above the content on its own elevation — opens from an icon-only square (Squircle) into a labelled button on the Component axis, holding height, radius s20, elevation and border across the change. Two sizes (L s56 / M s48); Primary and Error on Surface/Floating, Inverse on the inverse surface. (3.3.0 · ✅ Ready)
- [Header Alert](https://super-dollop-pzmo65r.pages.github.io/header-alert.md): A page-level status banner pinned to the top of the screen, announcing a blocking or critical state with a centered title + subtitle and an optional close control. (3.0.7 · ✅ Ready)
- [Indicator](https://super-dollop-pzmo65r.pages.github.io/indicator.md): A small non-interactive marker — Simple dot or Number pill (capped at 99+) — overlaid on another element; always decorative, the parent carries the meaning. (3.1.2 · 🔄 In progress)
- [Notification](https://super-dollop-pzmo65r.pages.github.io/notification.md): The transient toast — a pill sliding in from the top with one short status message and an optional icon; auto-dismisses after 4 seconds or on an upward swipe. Three tones (Neutral / Positive / Negative), one on screen at a time. (3.1.4 · 🔄 In progress)
- [PhoneField](https://super-dollop-pzmo65r.pages.github.io/phone-field.md): The phone-number field on the TextField anatomy: a country-code button (flag) in Slot#1, the selected code as the BaseTextLine prefix, libphonenumber formatting, a contacts button in Slot#2; the country list lives outside the component. (3.1.0 · 🔄 In progress)
- [RadioButton](https://super-dollop-pzmo65r.pages.github.io/radiobutton.md): Single-choice selection control — a round s24 box with a s12 dot when selected, in a s48 touch target; exclusive within a radiogroup. (3.1.1 · ✅ Ready)
- [Rating](https://super-dollop-pzmo65r.pages.github.io/rating.md): A SlotsContainer of five Slots used to collect or display a score from 0 to 5 (in half-star steps), with an optional Description line below. (3.2.3 · ✅ Ready)
- [Segmented Control](https://super-dollop-pzmo65r.pages.github.io/segmented-control.md): A horizontal group of mutually exclusive options — one segment is always selected. (3.1.0 · 🔄 In progress)
- [Service Card](https://super-dollop-pzmo65r.pages.github.io/service-card.md): A service tile — the entry point into a service: a fixed-size rounded card with a caption title and a catalogue illustration seated by an ImageContainer recipe. A locked customCard configuration promoted into its own component. (3.0.0 · 🔄 In progress)
- [Skeleton](https://super-dollop-pzmo65r.pages.github.io/skeleton.md): Loading placeholder that replaces content while data is being fetched; preserves the layout shape so the interface does not shift. (3.1.2 · 🔄 In progress)
- [SlidingButton](https://super-dollop-pzmo65r.pages.github.io/sliding-button.md): Swipe-to-confirm action control — a track with a draggable Slider pulled edge to edge to commit, resolving into an inline Loading -> Success or Error result. For high-consequence actions where an accidental tap would be costly. (3.0.8 · 🔄 In progress)
- [Slot](https://super-dollop-pzmo65r.pages.github.io/slot.md): An invisible wrapper container. Controls the size and alignment of any nested component within a layout. (3.0.0 · 🔄 In progress)
- [Snackbar](https://super-dollop-pzmo65r.pages.github.io/snackbar.md): The actionable toast — a pill rising from the bottom with one short message, an optional icon and an optional action button (an open customButton with an adaptive dock); auto-dismisses after 4 seconds or on a downward swipe. Two tones (Inform / Custom), no error tone — failures are Notification's job. (3.0.0 · 🔄 In progress)
- [Squircle](https://super-dollop-pzmo65r.pages.github.io/squircle.md): The superellipse container — an avatar, category icon, or text badge; five locked square sizes, three content types, five design-time states; non-interactive. (3.4.2 · 🔄 In progress)
- [Tag](https://super-dollop-pzmo65r.pages.github.io/tag.md): Compact static label for categorization, status, and metadata; Standard and Custom presets, optional icon slots. (3.1.0 · ✅ Ready)
- [Text Row](https://super-dollop-pzmo65r.pages.github.io/text-row.md): Text container — a horizontal row with text and optional slots on the left and right. (1.3.0 · 🔄 In progress)
- [TextField](https://super-dollop-pzmo65r.pages.github.io/text-field.md): The assembled text field on the BaseTextLine core — floating label, two icon slots, Active/Error border, Description line; states rest/active × empty/filled + skeleton, error and disabled axes; Text Input of the field family. (3.2.0 · 🔄 In progress)

## Foundations

- [Colors](https://super-dollop-pzmo65r.pages.github.io/colors.md): Primitives and semantic tokens, light and dark
- [Typography](https://super-dollop-pzmo65r.pages.github.io/typography.md): Text styles, the SP scale and adaptive scaling
- [Spacing](https://super-dollop-pzmo65r.pages.github.io/spacing.md): SP tokens on the 4px grid, three scaling modes
- [Effects](https://super-dollop-pzmo65r.pages.github.io/effects.md): Elevation shadows and surface treatments
- [Motion](https://super-dollop-pzmo65r.pages.github.io/motion.md): Curves, durations and ready-made animation patterns
- [Icons](https://super-dollop-pzmo65r.pages.github.io/icons.md): The full icon library across five styles
- [Illustrations](https://super-dollop-pzmo65r.pages.github.io/illustrations.md): 3D vehicles, maps and story artwork
- [Grid](https://super-dollop-pzmo65r.pages.github.io/grid.md): Layout grid, breakpoints and column rules