HomeSpecSystemStackDeploySign inDeploy
[ UI Primitives ]

Component Library

Every component ships fully typed and prop-driven. Customize via @theme tokens in globals.css. No component file edits needed.

4Primitives
6Sections
4Hooks
25+Total
Explore componentsBack to home
01

Button

Variants
Sizes
As Link

Pass an href prop and Button renders as next/link automatically.

Usage
<Button variant="primary" size="md" href="/signup">
  Deploy now
</Button>
02

Badge

Variants
CyanAmberGhostSurfaceMuted
In Context
Design SystemNewv1.0Next.js 15DeployTypeScriptApp RouterTailwind v4
Usage
<Badge variant="cyan">Design System</Badge>
<Badge variant="amber">New</Badge>
<Badge variant="ghost">v1.0</Badge>
03

Text

bodyPrecision-engineered Next.js 15 starter. Blueprint grid, Space Mono, deep navy.Paragraph copy, descriptions, readable blocks.
captionRev A / 2026-03-08 / SHP-001Dates, meta info, footnotes, helper hints.
labelTechnical SpecificationSection labels, categories, uppercase IDs.
codesrc/app/globals.cssFile paths, token names, inline code.
04

Card

Design01
Design System

Token-based. Deep navy surfaces, cyan drafting lines, amber highlights. One file to retheme everything.

globals.css / 1 file to customize

Stack02
Next.js 15

Server components by default. TypeScript strict mode. Tailwind v4 tokens. Zero config to run.

Zod validation / React 19

Auth03
Auth Pages

Login and signup with Zod validation. Full ARIA support. Wire up your auth provider and ship.

/login / /signup

Usage
<Card>
  <div className="bp-card-header">...</div>
  <div className="bp-card-body">...</div>
  <div className="bp-card-footer">...</div>
</Card>
05

Color Tokens

bp-bg
#060E1C
bp-bg-2
#0A1628
bp-surface
#0D1E38
bp-border
#1A3A5C
bp-cyan
#00C8F0
bp-cyan-dim
#0A7EA0
bp-amber
#F5A623
bp-amber-dim
#B87B18
bp-text
#E0ECF4
bp-text-2
#8AAEC8
bp-muted
#4A6F8A
bp-faint
#1E3A52
How tokens work

All tokens live in src/app/globals.css under @theme. Change any value and every component updates automatically.

06

Blueprint Motifs

Decorative system elements that give Blueprint its technical-drafting character.

Pulse Dot
Active signal
Registration Marks
Panel frame
Blueprint Grid
Eyebrow / Tag
[ TECHNICAL SPECIFICATION ][ SHP-001 ]X:001 / Y:002 / Z:003
07

System Pages

404 Page
Not Found

Shown when a route does not exist.

→ Preview
Error Page
Something Went Wrong

Shown on runtime exceptions.

→ Preview
Auth: Login
Sign In

Zod-validated login form, ready to wire up.

→ Preview
Auth: Signup
Create Account

Full signup flow with confirm password and validation.

→ Preview

Auth pages use Zod validation and are ready to wire to any backend. System pages trigger on unknown routes and runtime exceptions respectively.