← All UI styles
Blueprint Cyan
White line work on blueprint navy, with the drawing grid left visible.
WireframetechnicalEngineering toolsPlanning productsTechnical documentation
Construction · Wireframe
Nothing is decided: dashed placeholder boxes, no fills, and a deliberately unfinished edge so nobody argues about color.
Every style renders this same screen, so the only thing changing between two of them is the style. The component above is the file below, running.
Prompt
Design this interface in the Blueprint Cyan style. Navy ground with a visible drafting grid, everything drawn in thin cyan-white line work. Fills are avoided — objects are described by their outlines. Build every
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- blueprint navy ground
- visible drafting grid
- thin line work
- outline instead of fill
What this style refuses
- solid filled shapes
- warm colors
- soft shadows
- rounded corners
The refusals are the half that keeps generated interfaces from converging — a prompt that only says what to add gets the default look.
Tokens
Palette
RoleLightDark
Background
#0d2b52#081c36Surface
#123566#0c2647Border
#3f6ea8#2f5a8fText
#e8f3ff#e4f0ffMuted text
#9dc0e6#93b7e0Accent
#66d9ff#66d9ffOn accent
#062033#062033Shape and type
Radius0 / 2 / 2 px
Border1px solid
Shadownone
Displayui-monospace
Bodyui-monospace
Monoui-monospace
Type scale10 · 11 · 13 · 15 · 19 · 27 px
Weights400 / 600 / 600
Line height1.45
Tracking0.02em
Spacing8px grid · regular
Surfacegrid
Accentoutline
Separatorhairline
Labelsuppercase
Blurnone
Measured contrast — body 12.59:1 light, 14.81:1 dark; secondary text 7.49:1 and 8.21:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Blueprint Cyan
*
* White line work on blueprint navy, with the drawing grid left visible.
*
* One complete product screen, rendered from the token object below —