A house, not
just a check.

The visual and verbal system behind the Haus Fund website and investor portal. Rooted in Bauhaus functionalism — precise, warm, and built to last — it gives founders, LPs, and our own team one consistent surface to meet on.

The name draws from the German haus and the spirit of the Bauhaus — the idea that a building is not just structure, but a gathering place, a system, a way of working. This system serves two products: the public Fund Website and the internal Investor Portal.

Principles

Five rules that decide every judgment call. When a choice isn't covered by a token, it's covered here.

Voice & language

Authoritative, not corporate. First-person plural. Precise. The copy respects the intelligence of deeptech founders without excluding newcomers.

Casing

Color

A restrained core palette: near-black ink on warm canvas, with deep forest green as primary accent, warm bronze as secondary, and cool steel for data contexts.

House palettes

Each residency track — a city, a thesis, a house — carries its own accent, drawn so its tile reads clearly against warm canvas. Used for node cards, maps, and portfolio tagging.

Typography

Four families, each with one job. Barlow Condensed carries impact; Barlow structures the page; DM Sans does the reading; DM Mono sets every number.

Type scale

Spacing & layout

A 4px base unit. Spacing tokens step from 4px to 192px; a 240px sidebar and 1280px content max frame every layout.

Radius & shadow

Corners stay tight and functional. Shadows are warm-tinted and soft — depth without drama.

Motion

Fast and precise. Most transitions run 160ms on a sharp ease; spring is reserved and used sparingly. Hover any swatch below.

Logo & wordmark

The wordmark is built from a construction rule, not a fixed file: PREFIX in Barlow 900 + HAUS in Barlow 400, ALL CAPS, tracked 0.04em. One system spans every house.

Buttons

Seven variants, three sizes. Labels are sentence case. Forest is the primary brand CTA; bronze signals investment and financial actions.

Badges & tags

Badges carry status with a leading dot. Tags label and categorize — neutral by default, or tinted with an accent family.

Avatars

Initials on an accent fill. Round for people, square for companies and houses.

Cards & stat cards

The white card on warm canvas is the workhorse surface. StatCards carry a single KPI with an accent bar and trend.

Inputs & forms

Quiet by default; a forest focus ring on interaction. Validation uses the semantic negative color.

Tables

For deal flow, portfolio, and LP data. Mono numerals, uppercase mono headers, hairline rows.

Layout patterns

Recurring compositions assembled from the components above. Explore the live UI kits:

AI agent rules

Guardrails for any AI or contributor generating Haus interfaces. Follow these and output stays on-brand by default.

Token reference

The full system loads from five CSS files. Import them in order, then build with variables.

/* import order */
@import "tokens/colors.css";     /* ink · canvas · forest · bronze · steel · houses */
@import "tokens/typography.css"; /* families · scale · weights · tracking */
@import "tokens/spacing.css";    /* 4px base · containers · layout slots */
@import "tokens/effects.css";    /* radii · shadows · easing · duration */

/* usage */
.cta {
  background: var(--forest-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
}

Source of truth lives in the Haus_Design_System package — tokens/, components/, and guidelines/. This page is the human-readable overview; the CSS files are canonical.