Style guide / Version 01
The reusable rules behind the site.
A living reference for tokens, typography, spacing, components, artwork and BEM naming. Change the system here before inventing one-off styles elsewhere.
01 / Colors
A quiet palette with one signal color.
Semantic aliases reference the existing NT palette, so the full site can be recolored without editing individual components.
Canvas
--nt-color-canvas
Surface
--nt-color-surface
Ink
--nt-color-ink
Accent
--nt-color-accent
Muted
--nt-color-muted
Line
--nt-color-line
Accent soft
--nt-color-accent-soft
White utility
#FFFFFF
02 / Typography
Large editorial type, restrained utility labels.
The display scale is fluid. Labels use the monospace stack for navigation, metadata and system annotations.
Display / fluid
Aa
Heading 1
A clear point of entry.
Heading 2
Structure before decoration.
Body / fluid
Body copy should be readable, direct and comfortable over several paragraphs. This is placeholder text used to demonstrate measure, rhythm and contrast.
Mono label
Index / 001 / System ready
03 / Spacing
Fluid space with a limited vocabulary.
Page padding, section rhythm and component gaps are tokenized. The bars illustrate the intended relative scale, not literal pixels.
Extra small
Small
Medium
Large
Extra large
04 / Actions
Simple links with visible hierarchy.
Buttons stay compact and square. Text links carry the lighter editorial actions.
05 / Components
Reusable patterns for projects and posts.
These patterns use global BEM classes and also exist as configurable Bricks components where structural reuse matters.
2026.07.01
Notes on designing systems that can change
Essay
Project Card
Reusable project-card specimen with placeholder copy.
06 / Artwork
Procedural geometry instead of stock imagery.
Grid lines, circles, frames and axes create flexible placeholders until real project media is available.
07 / Naming
BEM classes and human-readable builder labels.
Classes describe reusable styling. Builder labels describe the role of each element in plain language.
.nt-project-card
Block: reusable project card.
.nt-project-card__visual
Element: artwork region inside the card.
.nt-project-card__visual--accent
Modifier: accent-colored visual treatment.
Builder label: Project Artwork
Readable panel name for the same structural element.