# BYU OIT Design System

> A CSS-first design system for BYU applications, distributed with agent-readable component, token, and behavior documentation.

Use semantic HTML and native browser behavior first. The linked documentation describes supported markup, behavior, accessibility requirements, and CSS custom properties. Use `byu.css` during development or `byu.min.css` for the equivalent minified stylesheet.

## CSS components and tokens

- [Accordion](docs/css/accordion.md): The accordion component presents grouped disclosure content through native `<details>` and `<summary>` elements.
- [Badge](docs/css/badge.md): The badge component presents short inline labels, status values, metadata, and rendered token values with a compact rounded visual treatment.
- [Breadcrumbs](docs/css/breadcrumbs.md): The breadcrumbs component presents the current page's position inside a hierarchy as a classless ordered list of links.
- [Button](docs/css/button.md): The button component is a clickable control for actions such as submitting a form, confirming a choice, or triggering a UI change.
- [Card](docs/css/card.md): The card component presents a self-contained `<article>` or `<figure>` on a contained surface with a subtle border.
- [Checkbox](docs/css/checkbox.md): The checkbox component is a multi-select form control for toggling one or more independent options on or off.
- [Chip](docs/css/chip.md): The chip component presents compact native selection options with a rounded visual treatment.
- [Color Tokens](docs/css/color.md): The repo currently defines two color themes:
- [Dialog](docs/css/dialog.md): The dialog component presents a focused native `<dialog popover>` surface for confirmations, approvals, and compact review flows.
- [Dropdown](docs/css/dropdown.md): The dropdown component presents a short list of actions or links through a native `<details>` disclosure that visually matches the select control.
- [File](docs/css/file.md): The file component is a native file picker that mirrors the input component's border, spacing, typography, and focus treatment while keeping the browser's built-in filename readout.
- [Footer](docs/css/footer.md): The footer component provides a page-level content info region for site ownership and closing legal or utility content.
- [Form](docs/css/form.md): The form composition layer normalizes native form grouping patterns that combine multiple controls into one horizontal affordance.
- [Header](docs/css/header.md): The header component converts the old BYU-style site header into a semantic contract built around the top-level page `<header>` or an internal `<header class="header">` testing hook.
- [Icon](docs/css/icon.md): The icon component renders Material Symbols glyphs through a shared `.icon` element pattern.
- [Input](docs/css/input.md): The input component is a single-line control for short user-entered values such as names, titles, codes, search terms, and color values.
- [Layout Tokens](docs/css/layout.md): The theme system supports two density themes:
- [Loading](docs/css/loading.md): The loading component presents an indeterminate activity indicator while an action or content surface is waiting to finish.
- [Nav](docs/css/nav.md): Nav is the visual expression of navigation links in this design system. Its `.side-nav` variant presents vertical navigation beside page or application content. Primary navigation may also contain one-level native dropdown submenus.
- [Pagination](docs/css/pagination.md): The pagination component presents table paging controls and summary text in a compact navigation row.
- [Progress](docs/css/progress.md): The progress component styles the native `<progress>` element for determinate and indeterminate task progress.
- [Radio](docs/css/radio.md): The radio component is a single-select form control for choosing exactly one option from a related set.
- [Range](docs/css/range.md): The range component is a native slider for choosing a value within a bounded numeric range.
- [Select](docs/css/select.md): The select component supports native single-select fields for choosing one value from a predefined list.
- [Stepper](docs/css/stepper.md): The stepper component shows ordered progress through a short sequence of steps such as onboarding, checkout, or form completion.
- [Switch](docs/css/switch.md): The switch component is a binary form control for immediately toggling a setting on or off.
- [Table](docs/css/table.md): The table component presents structured, scan-friendly data in rows and columns.
- [Textarea](docs/css/textarea.md): The textarea component is a multi-line text control for longer freeform responses such as notes, comments, and descriptions.
- [Tooltip](docs/css/tooltip.md): The tooltip component displays a short supplemental message when an element is hovered or focused.
- [Typography Tokens](docs/css/typography.md): The system uses IBM Plex Sans as the default web font for interface text, headings, and body copy.


## Application component workflow

- [BYU Application Components](docs/skills/byu-application-components.md): Create product-specific semantic components by composing and extending the BYU OIT design system through its documented public contracts.

## Complete documentation

- [Complete documentation bundle](llms-full.txt): All documentation above combined into one Markdown document.