The canonical reference for colors, typography, components, and patterns used across all BLDGTYP web products — bldgtyp.com, PH-Navigator, and Design-Phase Reports.
v1.0.0 · March 2026All colors are defined as CSS custom properties in tokens/tokens.css. Theme-invariant accent and highlight colors persist across light and dark modes. Surface and text colors swap with the theme.
Outfit for all readable content — headings, body, subtitles. JetBrains Mono for UI labels, navigation, section markers, buttons, and technical annotations. Anything that functions as a "label" rather than content uses mono.
Reusable UI elements. All components use the token system — they adapt automatically to light and dark themes.
Bold weight with --highlight color and dotted underline. Hover transitions to solid underline and darker tone.
Links also work inline: Here is a sentence with a dotted link embedded within body text to show contrast.
32 × 32px square buttons with subtle border. Used for external links and utility actions. SVG icons at 16px, inheriting currentColor.
Three density variants. Use Standard for hero/section backgrounds, Medium for data views, and Fine for technical/detail contexts.
graph-paper (default) — Services, Process, hero sections
graph-paper graph-paper--medium — Data views, dashboards, PH-Navigator panels
graph-paper graph-paper--fine — Technical details, report backgrounds, detail drawings
Atmospheric image treatments and layout patterns that give BLDGTYP products their distinctive engineering-studio character.
Architectural/drafting illustrations are displayed as atmospheric backgrounds. They should feel like a glimpse of a working studio — never the focal point.
| Property | Light Mode | Dark Mode |
|---|---|---|
opacity |
0.12 | 0.08 |
filter |
grayscale(100%) | grayscale(100%) invert(1) |
position |
Absolute, centered, 110% width, max-width 1400px | |
z-index |
0 (behind all content) | |
Ching-style line drawings of wall sections, foundations, and details. Always grayscale or muted — never photographic. Used as atmospheric elements in hero sections or as illustrative elements in report mockups.
/* Three density variants — all use two-layer SVG (minor + major grid) */
/* Applied via ::before pseudo-element, pointer-events: none */
/* Minor lines: rgba(122,148,36, 0.06), 0.5px stroke */
/* Major lines: rgba(122,148,36, 0.12), 0.8px stroke */
/* Standard (default): hero/section backgrounds */
.graph-paper background-size: 20px 20px, 100px 100px;
/* Medium: dashboards, data views */
.graph-paper--medium background-size: 12px 12px, 60px 60px;
/* Fine: technical details, reports */
.graph-paper--fine background-size: 6px 6px, 30px 30px;
Attribute-based theming using data-theme="light" or data-theme="dark" on the root <html> element. Default is light. All transitions at 0.3s ease. The Stats section is always dark regardless of theme.
/* Import the token file */
@import url('https://bldgtyp.github.io/branding/tokens/tokens.css');
/* Set theme on <html> */
<html data-theme="light">
/* Toggle in JS */
document.documentElement.dataset.theme =
document.documentElement.dataset.theme === 'dark'
? 'light' : 'dark';
How to import and use the design system across BLDGTYP products. Two files: tokens.css for design tokens (variables), components.css for reusable UI components.
<!-- 1. Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700
&family=JetBrains+Mono:wght@300;400&display=swap" rel="stylesheet">
<!-- 2. Tokens (required) — colors, fonts, radii, transitions -->
<link rel="stylesheet" href="https://bldgtyp.github.io/branding/tokens/tokens.css">
<!-- 3. Components (optional) — buttons, cards, icons, graph paper -->
<link rel="stylesheet" href="https://bldgtyp.github.io/branding/tokens/components.css">
<!-- 4. Set theme on html element -->
<html data-theme="light">
If you only need the design tokens and will build your own components:
/* Import just the tokens */
@import url('https://bldgtyp.github.io/branding/tokens/tokens.css');
/* Use custom properties in your own styles */
.my-button {
background-color: var(--accent);
font-family: var(--font-mono);
border-radius: var(--radius-sm);
}
With components.css loaded, use the standard class names directly:
<!-- Buttons -->
<button class="btn-primary">Get Started</button>
<button class="btn-ghost">Learn More</button>
<!-- Icon button -->
<a href="..." class="icon-btn">
<svg ...></svg>
</a>
<!-- Service card -->
<div class="service-card">
<div class="service-card__title">...</div>
<div class="service-card__subtitle">...</div>
<div class="service-card__body">...</div>
</div>
<!-- Graph paper background -->
<div class="graph-paper">...</div>
<div class="graph-paper graph-paper--medium">...</div>
<div class="graph-paper graph-paper--fine">...</div>
<!-- Stats bar -->
<div class="stats-bar">
<div>
<div class="stats-bar__number">90%</div>
<div class="stats-bar__label">Energy reduction</div>
</div>
</div>
For build tools, design tools, or any context where you need machine-readable values:
// fetch or import tokens.json
const tokens = await fetch(
'https://bldgtyp.github.io/branding/tokens/tokens.json'
).then(r => r.json());
tokens.color.accent.base.value // "#7a9424"
tokens.typography.scale.body // { weight: 300, size: "16px", ... }
| Product | Guidance |
|---|---|
| bldgtyp.com | Full design system. Homepage is the reference implementation. Graph paper backgrounds on Services and Process sections. |
| PH-Navigator | Apply color system, typography, and nav pattern. Graph paper may be appropriate for technical/data views. Dark mode is expected for extended use. |
| Design-Phase Reports | Outfit for headings/body, JetBrains Mono for data labels and annotations. Accent for section headers. Highlight for flagged items or warnings. Clean white backgrounds, minimal decoration. |
BLDGTYP speaks with technical authority while remaining accessible. The focus is always on the client's needs, not the company's credentials.
| Principle | Example |
|---|---|
| Client-focused framing | "Your Passive House questions. Answered." — not "We answer Passive House questions." |
| Outcomes over capabilities | "Know before you build" — not "We do energy modeling." |
| Precise, not academic | Use clear technical language. Avoid jargon walls. |
| Quiet confidence | Let tools and deliverables speak. Open-source credibility over testimonials. |