Wire is a diagrammatic, precision-first engineering aesthetic for technical documentation. Cool-tinted dark surfaces with cyan/teal accent. Inter typography at readable weights. Subtle radius. Full semantic color palette.

Color has meaning. Structure has purpose. Every pixel is intentional.

Precision Surfaces

Cool-tinted near-black with blue channel bias. Evokes IDE and terminal environments — the natural habitat of engineering documentation.

Geometric Typography

Inter for body and headings delivers clean geometry. JetBrains Mono for code blocks, labels, and section headers reinforces the technical identity.

Semantic Color

Full palette — success, warning, error, info — plus cyan/teal accent. Color serves meaning, not decoration.

PropertyInkWireClassic
ConceptPrint monographEngineering blueprintModern dashboard
AccentGoldCyan / TealOrange
Radius0px — brutalist2–4px — precise4–12px — soft
ShadowsNoneSubtle, occasionalLayered elevation
ContainersTransparentVisible, borderedFilled, elevated
TypographyHelvetica Neue thinInter + JetBrains MonoSystem stack
Semantic colorsGold onlyFull paletteFull palette
yaml
# Set wire as the project theme# in _project.yamlproject: my-engineering-docstheme: wire# All pages inherit the theme automatically.# Do not set theme: on individual page specs.
typescript
// Wire surfaces — cool-tinted with blue channel biasconst surface = {  base:   "rgb(11, 13, 18)",   // deepest — gaps, negative space  deep:   "rgb(8, 10, 14)",    // hero blocks, section labels  mid:    "rgb(17, 20, 28)",   // text block containers  raised: "rgb(22, 26, 36)",   // card surfaces};// Accent: vivid cyanconst accent = "rgb(14, 168, 188)";
4
Built-in Themes
2,600
Lines of CSS
69KB
Theme Stylesheet
Step 1
Theme Definition
Step 2
Type Expansion
Step 3
Theme CSS
Step 4
Router Wiring