Northwind
How Northwind looks and why: the direction, color, type, spacing and components the team chose by comparing options side by side.
Precise
Crisp and engineered. Nothing decorative; every detail earns its place. Keep the interface quiet and exact. Let alignment and type do the work, and add nothing for decoration.
Clarity before personality.
Fewer elements, used well.
Every line and space is deliberate.
- Light or dark
- Light
Design light-first. A dark theme is optional and must be derived from the same scales.
- Typeface
- Geist
Set everything in Geist, with Geist Mono for code, numbers and labels.
- Accent color
- Blue
Blue is the only brand hue. Use it for primary actions, links and focus.
- Neutral tone
- Cool
Use the cool gray scale for all neutral surfaces, borders and text.
- Corners
- Slightly rounded
Round corners slightly: 4px on small controls, 6px on inputs and buttons, 8px on cards.
- Spacing
- Regular
Use standard spacing: 44px table rows, 38px controls, 15px interface text.
- Surfaces
- Lines
Separate surfaces with 1px borders. Do not use shadows.
- Headline voice
- Balanced
Set headlines semibold with slightly tight tracking.
- Use of color
- Restrained
Use the accent only for primary actions, links and focus. Surfaces stay neutral.
- Landing page layout
- Centered
Open landing pages with a centered headline, a short lead, two buttons, and one wide visual below.
- App layout
- Sidebar
Use a labeled left sidebar for app navigation, about 232px wide.
- Imagery
- The product
Show the real product interface. Do not use stock photos or decorative illustration.
A working wordmark
The name set in Geist beside a monogram, on the three grounds it has to work on. It is a stand-in drawn from the choices here, not a finished logo.
Blue accent on cool grays, light first
Blue is the only brand hue. Use it for primary actions, links and focus. Use the accent only for primary actions, links and focus. Surfaces stay neutral. Select any color to copy it.
Geist, balanced voice
Set everything in Geist, with Geist Mono for code, numbers and labels. Set headlines semibold with slightly tight tracking.
Northwind brings planning, tracking and reporting together, so work keeps moving and nobody has to ask where things stand.
Progress rolls up on its own. People see what changed since they last looked, and reports draft themselves from the work already logged.
INV-20418 · 1,284.50 hrs · 2026-11-28
Regular spacing, slightly rounded corners, lines
Use standard spacing: 44px table rows, 38px controls, 15px interface text. Round corners slightly: 4px on small controls, 6px on inputs and buttons, 8px on cards. Separate surfaces with 1px borders. Do not use shadows.
The parts every screen is built from
Each one is drawn from the tokens above. Controls are 38px tall and table rows 44px.
The October summary was drafted from 214 updates.
Team
Most popular- Unlimited projects
- Automatic reports
- Roles and audit history
Preferred designs
Open landing pages with a centered headline, a short lead, two buttons, and one wide visual below. Use a labeled left sidebar for app navigation, about 232px wide. Show the real product interface. Do not use stock photos or decorative illustration.
4 people, 13 decisions
Everyone compared the same options two at a time, with only one thing different between them. The kit uses the option most people ended on.
| Overall direction | PreciseMaya Reyes, Tom OkaforTechnicalInes DuarteFriendlyPriya Nair |
|---|---|
| Light or dark | LightMaya Reyes, Tom Okafor, Priya NairDarkInes Duarte |
| Typeface | GeistMaya Reyes, Ines Duarte, Priya NairInterTom Okafor |
| Accent color | BlueMaya Reyes, Tom Okafor, Priya NairGreenInes Duarte |
| Neutral tone | CoolMaya Reyes, Ines Duarte, Priya NairNeutralTom Okafor |
| Corners | Slightly roundedMaya Reyes, Tom Okafor, Ines DuarteRoundedPriya Nair |
| Spacing | RegularMaya Reyes, Tom Okafor, Priya NairCompactInes Duarte |
| Surfaces | Soft shadowsMaya Reyes, Priya NairLinesTom Okafor, Ines Duarte |
| Headline voice | BalancedMaya Reyes, Tom Okafor, Ines Duarte, Priya Nair |
| Use of color | RestrainedMaya Reyes, Tom Okafor, Ines DuarteTintedPriya Nair |
| Landing page layout | CenteredMaya Reyes, Priya NairSplitTom Okafor, Ines Duarte |
| App layout | SidebarMaya Reyes, Tom Okafor, Ines DuarteTop barPriya Nair |
| Imagery | The productMaya Reyes, Tom Okafor, Ines DuarteIllustrationPriya Nair |
“It should feel like a tool people trust with real work.”
Maya Reyes, Founder
“Friendly is fine, but not childish.”
Priya Nair, Client
Hand it to your tools
These files are generated from the decisions above and change when the decisions do. Give your coding agent the line below, or paste the brief into its project instructions.
Before designing or building anything for Northwind, read https://housestyle.rolln.ai/kit/demo/design.md and follow it. Use the tokens in https://housestyle.rolln.ai/kit/demo/tokens.css instead of inventing colors, type sizes, radii or shadows.
Direction, rules for every decision, typography, color, components and the tokens, in Markdown.
Every token as a custom property on :root, with the font import.
An @theme block for Tailwind CSS v4.
The same values with the decisions behind them.