Brand

guidelines

How the brand works, in black and white. Nothing extra.

01Logo

Construction

Pill-shaped logotype, custom lowercase wordmark. SVG, renders via currentColor so it adapts to any background.

Clear space

Give it room. Minimum clear space equal to the pill height on all sides.

Usage

White on dark, or black on light. No color fills. No gradients. No drop shadows. No exceptions.

02Color
Black#0A0A0A
Primary text
Warm White#F5F5F0
Background

Two values. That's it. Hierarchy comes from opacity, not more colors. Full black for what matters most, fading down to 35% for supporting details.

Opacity scale
100%
80%
65%
55%
45%
40%
35%
25%
15%
03Typography
Display
Newsreader300 (Light)

Brand sprints

Headlines, hero text, section titles
Display Italic
Newsreader Italic300 (Light)

for fast-moving, ambitious companies.

Secondary headlines, sublines, durations
Body
General Sans400 / 500 / 600

Same caliber of work that takes agencies four months.

Paragraphs, buttons, labels, descriptions
Mono
DM Mono400

01 LOS ANGELES

Section markers, metadata, technical labels
04Voice & Tone

Sounds like a person, not a brand. Says less than it could. Means every word. Never tries to sound smart.

Sounds like

Talking, not writing

Specific, not abstract

Short sentences with a point

Dry humor, never forced

Never sounds like

A LinkedIn post

A pitch deck for investors

An agency that says “synergy”

Someone who just discovered copywriting formulas

05Layout Principles

Architectural details

Crop marks, dashed lines, numbered sections. The page feels like working drawings, not a finished brochure.

Type does the heavy lifting

Big headlines, tight leading. Roman for primary, italic for secondary. Alignment shifts between sections. The type carries the page on its own.

Space is the design

Let things breathe. Content never fills the full width. If it feels empty, it’s probably right.

Dark cards

Black blocks sit inside the page gutter, not edge to edge. The warm white background shows around them. Sharp edges only, no rounded corners anywhere.

Sharp geometry

No border-radius on containers, cards, or sections. The brand is precise, not friendly. Rounded corners belong to a different personality.

Scroll-triggered dividers

Horizontal lines draw left to right as they enter the viewport. They replace static dashed rules between sections and act as pacing, not decoration.

Resource cards

Three formats. Featured: full-width dark card, massive display type. Card: warm white with border, small image left, text right. Row: text-only with dashed dividers. Layout chosen per item in the CMS.

06Texture

Ordered dither as brand material. A 4x4 Bayer matrix applied to animated noise. The pixel grid is visible, intentional. Not a filter. A surface.

Hero fieldFull viewport, entrance dissolve, scroll fade

Meaning

The dither is the before. Low resolution, not yet in focus. As the page scrolls, it clears. Noisy to sharp.

Placement

One use. The hero background. That's it. The contrast between textured and clean areas is what makes both work.

Technical

Canvas at 1/3 resolution, CSS upscaled with image-rendering: pixelated. Animated fbm noise quantized through a Bayer matrix. Respects prefers-reduced-motion.

07Interactions

Motion is restrained and purposeful. Things move once, in one direction, and stop. Nothing loops, bounces, or begs for attention.

Animated dividers

A single horizontal line draws left to right when it enters the viewport. 1.2s duration, ease-out curve. Fires once. Used between every major section across the site.

Text reveal

Words fade up individually as they scroll into view. Staggered by 40ms per word. Used for closing statements and pull quotes. Never for body copy.

Magnetic buttons

CTA buttons pull slightly toward the cursor on hover. Subtle, physical. The only interactive motion on the page beyond scroll-triggered reveals.

Animated dividerScroll-triggered, left to right, once