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 headings and prose. Geist for table and data text. Geist Mono for buttons, section labels, navigation, and technical annotations. Keep Geist scoped to dense tabular data rather than general body copy.
| Assembly | Area | U-Value | Heat Loss |
|---|---|---|---|
| Exterior wall | 2,845 sf | 0.034 Btu/hr·ft²·F | 3,214 Btu/hr |
| Roof assembly | 1,120 sf | 0.021 Btu/hr·ft²·F | 1,058 Btu/hr |
| Triple-pane glazing | 486 sf | 0.142 Btu/hr·ft²·F | 3,105 Btu/hr |
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.
Wrap service cards in card-grid--tight for a zero-gap tiled layout with shared borders. Cards expand to fill columns and lose their border-radius.
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
Honeycomb-pattern variant using flat-top hexagons. Designed for honeybee-ph tools and contexts where the hex motif reinforces the “bee” theme.
graph-paper graph-paper--hex — Hero sections, honeybee-ph branding
graph-paper graph-paper--hex-medium — Data views, dashboards
graph-paper graph-paper--hex-fine — Technical details, reports
Add graph-paper--highlight to switch any graph paper to the highlight (pink) color. Useful for warning/error cards or accent contexts.
graph-paper graph-paper--highlight — Warning/error cards, accent sections
graph-paper graph-paper--highlight graph-paper--hex — Honeybee-ph accent
Large two-line title with second line in highlight color. Use <em> for the highlighted word. Follow with .hero-sub for // subtitle lines.
// Open-source building performance tools by BLDGTYP
// Grasshopper · Python · Honeybee · WUFI · PHPP
Sticky header with backdrop blur, folder-nav logo using / separator, dropdown triggers, search button, and hamburger at mobile widths (≤900px).
Card with animated top border (slides left-to-right on hover), highlighted background, index row with dashed separator, and CTA footer. Best used in a grid layout.
Passive House extensions for the Honeybee energy modeling framework.
Convert models to and from PHPP & WUFI-Passive XML formats.
Collapsible navigation with section dividers (leading dash), dashed child borders, and expand/collapse chevrons. Active items get a left accent bar.
Note (accent) and Warning (highlight) callouts with left accent bar and gradient background. Use for important information, tips, or warnings in documentation.
Mono-spaced footer bar with left-aligned nav items separated by ·, right-aligned site URL and bordered version badge. Stacks vertically at mobile widths.
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(62,147,174, 0.06), 0.5px stroke */
/* Major lines: rgba(62,147,174, 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;
/* Hexagon variants — honeycomb pattern for honeybee-ph contexts */
.graph-paper--hex background-size: 60px 34.64px;
.graph-paper--hex-medium background-size: 36px 20.78px;
.graph-paper--hex-fine background-size: 21px 12.12px;
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/bt-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=Geist:wght@400;500
&family=Geist+Mono:wght@400&display=swap" rel="stylesheet">
<!-- 2. Tokens (required) — colors, fonts, radii, transitions -->
<link rel="stylesheet" href="https://bldgtyp.github.io/bt-branding/tokens/tokens.css">
<!-- 3. Components (optional) — buttons, cards, icons, graph paper -->
<link rel="stylesheet" href="https://bldgtyp.github.io/bt-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/bt-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>
<!-- Service cards — tight grid (no gaps, shared borders) -->
<div class="card-grid--tight">
<div class="service-card">...</div>
<div class="service-card">...</div>
<div class="service-card">...</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>
<!-- Hexagon graph paper (honeycomb) -->
<div class="graph-paper graph-paper--hex">...</div>
<div class="graph-paper graph-paper--hex-medium">...</div>
<div class="graph-paper graph-paper--hex-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/bt-branding/tokens/tokens.json'
).then(r => r.json());
tokens.color.accent.base.value // "#7a9424"
tokens.typography.scale.body // { weight: 400, size: "16px", letterSpacing: "0.05em", ... }
| 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, Geist for table text, Geist Mono for labels and annotations. Accent for section headers. Highlight for flagged items or warnings. Clean white backgrounds, minimal decoration. |
Brand marks for BLDGTYP products. SVG format for web use — scalable, transparent background, no external dependencies.
Molecular hexagon mark representing the interconnected PH-Tools ecosystem. Four honeycomb cells in brand colors connected by a zigzag bond path with terminal nodes.
| Property | Value |
|---|---|
File |
assets/ph-tools-logo.svg |
ViewBox |
550 × 455 |
Colors |
#D8D8DC #85B8C6 #3E93AE #E23489 #222222 |
Min size |
24px height (favicon) — bond detail holds at small sizes |
Clear space |
1 hex-width minimum on all sides |
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. |