Skip to content
AstroTemplate
Table of contents

UIBook

Roboto · 4 themes (light / dark / sepia / ocean) · 5 sizes (xs–xl) · rounded

Foundations

The tokens every other section is built from — colour, type, radius, spacing and the eleven layout tiers.

Colour palette

light

Surface

Content

Border · Focus

Primary

Secondary

Accent

Danger

Success · Warning · Info

Link

dark

Surface

Content

Border · Focus

Primary

Secondary

Accent

Danger

Success · Warning · Info

Link

sepia

Surface

Content

Border · Focus

Primary

Secondary

Accent

Danger

Success · Warning · Info

Link

ocean

Surface

Content

Border · Focus

Primary

Secondary

Accent

Danger

Success · Warning · Info

Link

Interaction states — rest / hover / active

primary

RestHoverActive

secondary

RestHoverActive

accent

RestHoverActive

danger

RestHoverActive

Type scale

Aatext-xs · 12px

Aatext-sm · 14px

Aatext-base · 16px

Aatext-lg · 18px

Aatext-xl · 20px

Aatext-2xl · 24px

Aatext-3xl · 30px

Aatext-4xl · 36px

Radius — rounded only

control
field
surface
badge
avatar

Spacing scale

4px
8px
12px
16px
24px
32px
48px
64px

Container caps

narrow
default
wide

Motion — durations & easings

Durations

duration-(--duration-fast)fast · 120ms

duration-(--duration-base)base · 200ms

duration-(--duration-slow)slow · 320ms

duration-(--duration-slower)slower · 500ms

Easings

ease-(--ease-standard)cubic-bezier(0.2, 0, 0, 1)

ease-(--ease-out-soft)cubic-bezier(0, 0, 0, 1)

ease-(--ease-in-soft)cubic-bezier(0.3, 0, 1, 1)

Layout tiers (src/config/layoutTiers.ts)

TierMin widthNavbar hGrid colsGutterContainer
base0px56px412pxfluid
xxs320px56px416pxfluid
xs390px56px416pxfluid
sm640px56px824pxnarrow
md768px60px824pxnarrow
lg1024px64px1232pxdefault
xl1280px64px1232pxdefault
2xl1536px64px1240pxwide
3xl1920px64px1248pxwide
4xl2560px72px1254pxwide
5xl3840px96px1272pxwide

Brand

The 'launch slot' mark — a caret and a detached slot reading as an A.

Navbar tile sizes

AstroTemplateAstroTemplateAstroTemplate

Mark-only

AstroTemplate

Container

Content-width cap, gutter from the layout tier — never a breakpoint ladder.

Widths

Content area

max-w-narrow (720)

Content area

max-w-default (1280)

Content area

max-w-wide (1536)

Button

8 variants, 5 sizes, icon slots, loading and disabled states.

Variants

Sizes — XS · SM · MD · LG · XL

With icon

States

Disabled link

Icon button — sizes

Input

Input, Select, Textarea and FormField — appearance, size, invalid/success states.

Appearances

Sizes — XS · SM · MD · LG · XL

States

With icon

Select

Textarea

FormField — label, helper text and error

We never share your email address.

Selection Controls

Checkbox, Radio and Switch — states and sizes.

Checkbox — states

Checkbox — sizes

Radio

Plan

Radio — sizes

Switch — states

Switch — sizes

Segmented · Upload

SegmentedControl, Slider, Rating and FileUpload.

Segmented control

Segmented control — sizes

Slider

Slider — sizes

Rating — read-only

Rating — interactive

Rating — sizes

File upload

Badge

8 tones x 3 appearances, dot, dismissible, 5 sizes.

Tones — SOLID

neutralprimarysecondaryaccentsuccesswarningdangerinfo

Appearances

Solid Soft Outline

Sizes — XS · SM · MD · LG · XL

xssmmdlgxl

With dot

Online

Dismissible

Filter

Avatar

Initials, decorative-icon fallback and photo modes, presence dot, grouping, 5 sizes.

Modes

Sizes — XS · SM · MD · LG · XL

Presence

Online

Group — overflow at 2

Alert

5 tones, leading accent border, optional actions row, optional close, live announcement.

Tones

neutral alert

Sample body text for the neutral tone.

info alert

Sample body text for the info tone.

success alert

Sample body text for the success tone.

warning alert

Sample body text for the warning tone.

danger alert

Sample body text for the danger tone.

With actions

Unsaved changes

Your edits have not been saved yet.

Dismissible

Heads up

A new version of the design system is available.

Card

Orientation, sized body padding/gap, footer, StatCard and PricingCard compositions.

Orientation — vertical / horizontal

Vertical card

Media above the body.

Horizontal card

Media on the leading edge.

Sizes — body padding/gap, XS · SM · MD · LG · XL

xs

Body text.

sm

Body text.

md

Body text.

lg

Body text.

xl

Body text.

With footer

Deployment protection

Require a review before any change reaches the production branch.

StatCard

Monthly revenue

$48,260

Increase:12.4% vs last month

PricingCard

StudioPopular
$29/month
  • Unlimited projects
  • 4 themes included
  • Priority support

Progress & Feedback

Linear and radial progress, three Loader placements, three Skeleton shapes.

Progress — tones

RadialProgress

69%

Loader — placements

Loading workspace…Saving…Preparing your dashboard

Skeleton — shapes

Data Table

Presentational — the @container collapses rows into cards below @md, shown for real in the narrow frame below, no viewport resize needed.

Members

Team members
Member EmailStatusLast active
Ada Moreauada@studio.devActive2 minutes ago
Tomas Reidtomas@studio.devInvitedYesterday
Kirill Ivanovkirill@studio.devSuspended2 weeks ago
1–3 of 3 members

Members — narrow frame (@container below @md, no viewport resize)

Team members, narrow frame
Member EmailStatusLast active
Ada Moreauada@studio.devActive2 minutes ago
Tomas Reidtomas@studio.devInvitedYesterday
Kirill Ivanovkirill@studio.devSuspended2 weeks ago

Timeline · Empty State

An ordered-list Timeline, EmptyState with an actions slot, Divider and Kbd.

Timeline

  1. Design tokens lockedCompleted
  2. Components drawnCompleted
  3. Code exportIn progress
  4. Docs sitePlanned

EmptyState

No projects yet

Create your first project to start composing screens.

Divider

Kbd

⌘K

Overlay

Menu, Tooltip and Popover — details-based disclosures with no ARIA menu role.

Menu

Account

Tooltip

Copy to clipboard

Popover

Delete project

Delete this project?

This removes every screen and cannot be undone.

Dialog

Modal, Drawer and BottomSheet — the same native <dialog popover> base, opened with zero JS and upgraded to showModal() once the delegated listener runs.

Modal

Drawer

BottomSheet

Feedback — Toast

Alpine.store('toasts') — several notifications at once, timed out one by one in the order they arrived.

Toast

Disclosure

Tabs (roving tabindex, three variants) and Accordion (<details name>, zero JS).

Tabs — Underline

Overview panel content.

Tabs — Pills

Overview panel content.

Tabs — Boxed

Overview panel content.

Accordion

What is included in the licence?
Every component, all four themes and the Tailwind token layer.
Can I use it commercially?
Yes, on any number of projects.
How do themes work?
`data-theme` on ` `, driving semantic tokens through three tiers.

App Shell

Theme and locale switching, plus the two page-wide dialogs the Navbar and Layout already mount once for the whole site.

Theme Switcher

Theme
Theme
Theme

Locale Switcher

Locale Dialog

Mounted once by `Layout` — every `LocaleSwitcher` trigger above, and the real Navbar's and Footer's own, all open this same instance: centred modal from `md`, bottom sheet below it.

Mobile Menu

Mounted once by `Navbar`, opened by its hamburger button below the `md` tier — resize the viewport narrower to reach it; the trigger stays hidden at this width by design.

Flag

Theme Matrix

The design's Theme × Radius Matrix (e8UIBn), rounded column only — the radius axis was dropped. Identical component instances; only each cell's data-theme changes.

light · rounded

Live
primarysuccesswarningdanger

Theme

Tokens re-resolved for this theme.

dark · rounded

Live
primarysuccesswarningdanger

Theme

Tokens re-resolved for this theme.

sepia · rounded

Live
primarysuccesswarningdanger

Theme

Tokens re-resolved for this theme.

ocean · rounded

Live
primarysuccesswarningdanger

Theme

Tokens re-resolved for this theme.