Blue drafting sheets. Pencil-like connectors. Handwritten ideas with clean, readable explanations. A visual language for systems that are still being imagined—and carefully built.
Blue holds the big ideas. Pale paper carries long explanations. Pencil blue is reserved for annotations on dark surfaces. Reading ink keeps text crisp on light backgrounds.
02 / TYPOGRAPHY
A sketch in the heading. Clarity in every paragraph.
KALAM / DISPLAY & ANNOTATION / 400
Build what your business means.
Use for editorial headings and short diagram labels. Display: 53–96 px. Section titles: 43–72 px. Annotations: 19–26 px.
IBM PLEX SANS / BODY & INTERFACE / 400–600
Every object has an identity. Every relationship has meaning.
Body: 16–18 px, line height 1.65. Lead: 18–22 px. Keep long prose on calm paper, with a comfortable reading width.
IBM PLEX MONO / CODE & DRAWING LABELS / 400–500
SPECIFICATION → PLAN → RUN → EVIDENCE
Technical labels: 11–12 px. Code: 14–16 px. Use uppercase only for short drawing labels.
03 / DIAGRAM LANGUAGE
Sketch the connection. Keep the meaning precise.
Conceptual application composition. Each product still supplies its declarations, bindings, and integrations.
Use slightly irregular outlines, clear arrowheads, and short labels. Solid arrows show the main flow; dashed connectors show supporting relationships. Explain the diagram in text and keep decorative grids out of reading surfaces.
STANDARD ICON / B + P
Architect Block
A geometric B and P share a central edge. Use this single SVG for the Blueprint identity across the website, documentation, and presentations.
Keep the 64 × 64 proportions and at least 8 units of clear space. Use blue on pale paper or white on blue. The wordmark uses Kalam; the tagline uses IBM Plex Sans.
One model. Connected applications.
Our shared tagline for the footer, presentations, and social cards.
Construction animation
The same icon, drawn in sequence with Rive. Hover to draw the mark in 0.7 seconds. The complete icon rests between interactions.
Hover, focus, or tap · 0.7 seconds · respects reduced motion
Two corner marks frame the primary action. Use blue buttons on light surfaces and light buttons on dark or blue surfaces. The containing surface selects the variant; corner marks contrast with the surface. On hover or keyboard focus, the corners move outward and the arrow moves right.
Use plain language for maturity and evidence. Never rely on color alone to communicate status.
STATUS / PRE-PRODUCTION
05 / COMPOSITION & ACCESSIBILITY
Use a 4 px spacing base, 24 px drafting grid, and 120 px major grid. Give desktop sections 80 px vertical space and mobile sections 52 px. Stack columns on narrow screens. Keep keyboard focus visible, respect reduced motion, and provide text descriptions for diagrams.
Fonts load from Google Fonts with local fallback families. The CSS tokens and reusable Vue components are the implementation source; this page is the living specimen. These editorial styles belong to the website, while Studio continues to own the application UI system.
