These are the building blocks for your design patterns. Buttons, placeholders, forms, badges, and other atoms. Their look and feel comes from the style guide.
You can edit or add components yourself, or with AI. If something is a larger block, such as hero, it belongs in patterns.
Each component is live HTML using classes from wireframe.css. What you see in this file is what it looks like in a wireframe page, with no extra setup needed.
Page-specific design belongs in the page's own <style> block, not here. Components stay generic. To use a component you can copy and paste the code or ask AI.
Defined in wireframe.css. Drop in any page — no extra setup needed.
Side nav sits in a fixed-width column on the left. Main content area to the right. Use for dashboards, settings, admin tools.
Different from the main site nav. Active state shown via accent left border + white background.
Last item is the current page — no link, slightly darker, weight 500. Separator is a chevron in var(--mute). Home includes an optional house icon.
Active tab: var(--ink) text + 2px var(--accent) bottom border. Inactive: var(--ink-3). Optional count badge after label in var(--mute). Use for content switching inside a page.
36px min-width number boxes with var(--line) border. Active page filled with var(--accent), white text. Prev/Next are wider with chevron icons. Ellipsis spacer for long ranges.
Expanded answer body. A few lines of supporting copy give the reader the real length and detail without overwhelming the row.
Second row shown expanded as reference. Use for FAQ pages or in-page reveal content.
Step 1
Account info
Step 2
Payment
Step 3
Confirm
Three states: completed — accent fill + check icon · active — accent fill + number · future — outlined, muted text. Connector between completed/active is accent; before future steps is var(--line). Good for multi-step forms, checkout, onboarding.
or click to browse
PNG, JPG, PDF · UP TO 10MB
Dashed border indicates a drop target. Pair with a hidden file input in real builds.
This action cannot be undone. The item will be permanently removed from your account.
Centered card on a darker page backdrop. Pair with a click handler or library overlay in real builds.
Saved successfully
Your changes are now live.
Heads up
Action required before continuing.
Something went wrong
Please try again or contact support.
Corner notifications. Typically anchored to top-right or bottom-right of viewport.
New feature available. Check out our latest release notes for details.
Learn more →Scheduled maintenance. Service will be unavailable Saturday from 2–4am PT.
Connection failed. Unable to reach the server. Check your connection.
RetryTop-of-page strips. Info — paper bg + accent icon · Warning — paper-2 bg + ink icon · Error — dark ink bg + paper text. All can include an inline action link and dismiss X.
We use cookies to improve your experience. By continuing, you agree to our cookie policy.
Bottom-anchored strip. Sits above page content; not part of the document flow.
Single-row footer. Logo + copyright on left, essential links on right. Good for simple sites or marketing pages.
Standard 4-column structure with link sets, social icons, and bottom copyright strip. Good for product or content sites.