Skip to content

Blueprints

Complete screens. A marketing site and a sample app.

Complete screens as a starting point. Edit the markup and layout to suit the design. Guides, not gospel.

13 screens · structure · blocks

MIT, no runtime, the same classes as the docs. The app shell is a layout example, not a hosted product.

Screens

Open landing Open the app

Landing

Hero, packages, testimonials, FAQ

Overview

KPIs, activity, packages

Marketing

Public Airframe site — landing through changelog. Shared header and footer.

Landing

Hero, features, packages, testimonials, FAQ and a closing CTA.

NavbarPillCardAccordionFooter

Contact

Two-column contact page with Sydney details and a message form.

FieldInputSelectTextareaDescription list

Sign in

Centered sign-in card with remember-me, recovery link and a footer to register.

CardFieldInputCheckboxButton

Sign up

Registration card with password help and a required terms checkbox.

CardFieldInputCheckboxButton

Article

Blog post with chips, byline, prose, a pull quote and a code sample.

ChipAvatarTypographyCode block

Changelog

Stacked shell: sticky nav, a header band, then a version list in a container.

NavbarBadgeCardStack

App

A sample product shell: overview, releases, a package record, inbox, board, chat and settings. Same classes as the marketing pages.

Overview

Dashboard with catalog KPIs, a timeline of shipping activity, and recent releases.

KPITimelineProgressTableCard

Releases

Collection view: toolbar, status badges, a data table and pagination.

TableBadgePaginationInput

Package

One record: breadcrumbs, title, fields in the main column, metadata in an aside.

BreadcrumbsBadgeDescription listSidebar

Inbox

Three-pane mail: folders, message list and a reading pane.

List groupBadgeAvatarChip

Board

Kanban columns with labels, assignees and a selected-task detail aside.

CardBadgeAvatarCheckbox

Messages

Conversation list and a thread of message bubbles with a composer.

AvatarInputBadgeButton

Settings

Profile form, notification switches, team table and a danger zone.

Nav pillsFieldSwitchAction rowTable

Need a single section instead?

Blueprints are whole-screen guides. Change them. Heroes, pricing tables and sign-in cards live in blocks. Structure — stack, sidebar, app shell — lives in the structure gallery.

Blocks Structure