# Apogee > Accessible, responsive Astro components, sections and page blocks that you copy into your project and own. Tailwind v4, zero JS unless a component needs it. New site: `npx @ava-ui/apogee create my-site`. Existing Astro + Tailwind project: `npx @ava-ui/apogee init`, then `npx @ava-ui/apogee add `. Source: https://github.com/avaui-dev/apogee. Every page below is also available as Markdown at the same URL plus `.md`. ## Site - [Apogee — the AVA design system for Astro](https://apogee.avaui.dev/index.md): Accessible Astro components you copy into your project and own. ## Getting started - [Getting started](https://apogee.avaui.dev/docs.md): Accessible, native-first Astro components you copy into your project and own. - [Progressive enhancement](https://apogee.avaui.dev/docs/progressive-enhancement.md): How Apogee decides when a component needs JavaScript, and the mechanical no-js / js system that keeps the fallback real. - [Browser support](https://apogee.avaui.dev/docs/browser-support.md): Which browsers Apogee targets, the modern platform features it relies on, and how each degrades where support isn't there yet. - [Migrating to 0.3](https://apogee.avaui.dev/docs/migrating-to-0-3.md): The 0.3 token model and prop vocabulary, with a codemod for the utilities and a table for the props. - [Migrating to 0.4](https://apogee.avaui.dev/docs/migrating-to-0-4.md): Refresh the tokens file, apply four renames, re-add the components you copied, then check the behaviour changes. - [Site layout](https://apogee.avaui.dev/docs/site-layout.md): The page shell, with html, head and body. It writes the SEO tags, runs the no-js swap before paint and restores a stored colour mode. - [Telemetry](https://apogee.avaui.dev/docs/telemetry.md): What the apogee CLI sends, what it never sends, and how to turn it off. ## Foundations - [Foundations](https://apogee.avaui.dev/docs/foundations.md): The decisions every component is built on. Read these once; the components then explain themselves. - [Design tokens](https://apogee.avaui.dev/docs/tokens.md): Five hues times seven roles, generated from three numbers per hue; plus the static scales for radius, type, motion and spacing. - [Color](https://apogee.avaui.dev/docs/color.md): How the five hues become a full light and dark palette, and the contrast gate that keeps every pair readable. - [Dark mode](https://apogee.avaui.dev/docs/dark-mode.md): How the page and any subtree pick light or dark, the before-paint script, the toggle helper, and what to watch in dark. - [Typography](https://apogee.avaui.dev/docs/typography.md): The fluid type scale, the font stack, Heading/Text/Prose, and tabular numbers for aligned digits. - [Spacing & layout](https://apogee.avaui.dev/docs/spacing.md): Fluid page/section spacing vs. Tailwind's fixed scale for component internals, plus the layout primitives. - [Motion](https://apogee.avaui.dev/docs/motion.md): Four durations, three easings, wired as Tailwind's defaults, and the mandatory reduced-motion guard. - [Accessibility](https://apogee.avaui.dev/docs/accessibility.md): The accessibility commitments every Apogee component ships with, and how to verify them. - [RTL & internationalization](https://apogee.avaui.dev/docs/rtl.md): How Apogee components mirror automatically under a right-to-left ancestor, using logical CSS properties. - [Content & voice](https://apogee.avaui.dev/docs/content.md): The writing rules for text inside components — buttons, labels, errors, empty states, and tone. - [Utilities](https://apogee.avaui.dev/docs/utilities.md): The shared helpers every component builds on, and how to use them in your own code. - [Skins](https://apogee.avaui.dev/docs/skins.md): An optional look you switch on with one attribute, built from three variables the components already read. - [Patterns](https://apogee.avaui.dev/docs/patterns.md): Application recipes built from existing components — filter bars, inline calls to action, and an index of every recipe on the component pages. ## Components - [Components](https://apogee.avaui.dev/docs/components.md): Every component, copied into your project with the CLI and yours to edit. - [Accordion](https://apogee.avaui.dev/docs/accordion.md): A stack of collapsible disclosure panels; expand one to read it, collapse it to reclaim space. - [Actionable](https://apogee.avaui.dev/docs/actionable.md): The bare interactive primitive. A button, link or focusable div with the focus ring and disabled handling, nothing else. - [Alert](https://apogee.avaui.dev/docs/alert.md): An inline message with a status color and icon — info, success, warning, or critical; inline, filled or as a full-width banner. - [AspectRatio](https://apogee.avaui.dev/docs/aspect-ratio.md): Locks its content to a fixed width-to-height ratio — media, embeds, maps. - [Avatar](https://apogee.avaui.dev/docs/avatar.md): A user image, with an initials fallback derived from name. - [AvatarGroup](https://apogee.avaui.dev/docs/avatar-group.md): Overlapping avatars for a compact "who's involved" cluster, with an optional +N overflow chip. - [Badge](https://apogee.avaui.dev/docs/badge.md): A small status label — for counts, tags, and state indicators. - [Blockquote](https://apogee.avaui.dev/docs/blockquote.md): A pull quote with optional attribution. Use to set a quoted passage apart from body copy. - [Box](https://apogee.avaui.dev/docs/box.md): The layout primitive. Direction, gap, padding, surface, border, radius and shadow as token props. - [Breadcrumbs](https://apogee.avaui.dev/docs/breadcrumbs.md): A path trail showing where the current page sits in the site hierarchy. - [Button](https://apogee.avaui.dev/docs/button.md): Triggers an action. Renders a