Beauty and Brutalism: How I Designed blakecrosley.com at the Intersection

I designed blakecrosley.com with no colors, no gradients, no illustrations, and no decorative elements. Just white typography on absolute black (#000000), with opacity layers at 5%, 10%, 40%, and 65% creating the entire visual hierarchy. The site scores 100/100 on Lighthouse performance and achieves what I call “honest beauty”: structural clarity with precise craft.¹

TL;DR

Brutalism in digital design strips interfaces to structural honesty: raw typography, visible grids, minimal decoration. Beauty adds refinement: harmonious color relationships, precise spacing, micro-interactions. The most compelling modern products (Linear, Notion, Arc Browser) operate at the intersection. I built blakecrosley.com at this same intersection, and this post documents the specific CSS decisions, what I removed, and why the tension between honesty and craft produces better interfaces than either principle alone.

My Design System: Brutalism as Foundation

The Color Non-Palette

Most design systems start with a color palette. Mine starts with the absence of one:

:root {
  --color-bg-dark:        #000000;
  --color-bg-elevated:    #111111;
  --color-bg-surface:     #1a1a1a;
  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-tertiary:  rgba(255,255,255,0.4);
  --color-border:         rgba(255,255,255,0.1);
  --color-border-subtle:  rgba(255,255,255,0.05);
  --color-accent:         #ffffff;
}

No brand colors. No semantic colors beyond opacity levels. The entire visual hierarchy operates through four transparency tiers: 100% (primary), 65% (secondary), 40% (tertiary), and 10% (structural borders). This is brutalist in principle: the material (light on dark) is used directly rather than decorated.²

The decision was deliberate. During my 16 product design studies, I noticed that the products I respected most (Linear, Vercel, Raycast) used restrained palettes where typography and spacing did the hierarchy work. Products with 8+ semantic colors often used color as a substitute for structural clarity.

Typography as Primary Hierarchy

With no color to carry hierarchy, typography carries everything:

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-size-display:  5rem;     /* 80px - hero headlines */
  --font-size-7xl:      3.875rem; /* 62px */
  --font-size-base:     1rem;     /* 16px - body text */
  --font-size-xs:       0.75rem;  /* 12px - metadata */
}

System fonts, not custom web fonts. This is both a brutalist choice (use the platform’s native material) and a performance choice (zero font-loading latency, contributing to perfect Lighthouse scores). The display size (80px) with tight letter-spacing (-0.03em) gives headlines gravitas without decoration. Body text at 16px with generous line-height (1.7) prioritizes readability over density.³

The 8-Point Spacing System

Every spacing value derives from an 8-point base:

:root {
  --spacing-xs:  0.5rem;  /* 8px */
  --spacing-sm:  1rem;    /* 16px */
  --spacing-md:  1.5rem;  /* 24px */
  --spacing-lg:  2rem;    /* 32px */
  --spacing-xl:  3rem;    /* 48px */
  --spacing-2xl: 4rem;    /* 64px */
  --spacing-3xl: 6rem;    /* 96px */
  --spacing-4xl: 8rem;    /* 128px */
}

No arbitrary values. If a spacing doesn’t exist in the system, the design is wrong, not the system. I learned this the hard way when I used --spacing-2xs in a subtitle margin (a token that didn’t exist) and the layout broke silently. The fix was changing to --spacing-xs, not creating a new token.⁴

What I Removed (And Why)

No Gradients

Gradients serve two purposes: visual interest and depth simulation. On a site built around content (blog posts, project descriptions), gradients compete with the content for visual attention. I removed all gradients and let the content be the visual interest.

No Illustrations or Icons

No decorative SVGs, no hero illustrations, no icon libraries. Photography serves as the only non-typographic visual element (personal photos on the home page). Each photo has a 4/3 aspect ratio container with border-radius only — no shadows, no overlays, no color treatments.

No Box Shadows (Default State)

Default state elements have zero shadow. Hover states add subtle depth:

.lab-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

Shadows appear only as functional feedback (this element is interactive and you’re interacting with it), never as decoration.

No Light Mode

The site has no prefers-color-scheme media query. It operates exclusively in dark mode. This is a deliberately uncompromising choice: rather than maintaining two visual systems and inevitably compromising both, I designed one system well. The absolute black background (#000000 rather than #0a0a0a or #1a1a1a) gives the typography maximum contrast.⁵

Where Beauty Enters

Brutalist structure alone produces hostility. The beauty in my design comes from craft in execution, not decoration:

Micro-Interactions as Functional Feedback

Every interactive element has a transition, but no transition exists for aesthetic pleasure:

:root {
  --transition-fast: 150ms ease;
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav a::after {
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav a:hover::after {
  transform: scaleX(1); /* Underline grows from left */
}

Navigation links reveal an underline on hover (functional: confirms interactivity). Project cards scale to 1.08x (functional: indicates the clickable area). The mobile hamburger animates to an X (functional: communicates state change). No animation exists without a functional purpose.⁶

Entrance Animations for Card Groups

Cards enter with a staggered translateY(16px) animation:

@keyframes socialCardIn {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

This serves a functional purpose: it communicates that content has loaded and draws attention to newly visible elements. The stagger (each card delayed by 100ms) creates a rhythm that helps users scan the group. The animation is 500ms with a cubic-bezier easing — fast enough to not delay interaction, smooth enough to feel crafted.

The Glassmorphism Header

The one decorative-adjacent element:

.header {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-overlay); /* rgba(0,0,0,0.8) */
}

The blurred header serves a functional purpose: it indicates that content scrolls behind the navigation, establishing the header as a persistent layer. But the blur also adds visual craft — it’s one of the few moments where the design prioritizes beauty alongside function.

Products That Find the Same Balance

Linear: Brutalist Structure, Beautiful Execution

Linear’s project management interface is dense, keyboard-driven, and assumes professional users. No illustrations, no gradual onboarding. The structure is brutalist. The execution is beautiful: precise typography, harmonious dark theme, smooth 60fps animations. Every pixel serves a purpose. The purpose is served with craft.⁷

Notion: Raw Blocks, Refined System

Notion exposes its underlying data model (blocks) directly to users. The structural honesty is brutalist. The refinement appears in the interaction design: smooth drag-and-drop, responsive inline editing, and a command palette that makes the block system feel effortless.⁸

Arc Browser: Brutalist Navigation, Beautiful Chrome

Arc exposes the browser’s underlying tab management system (vertical tabs, workspaces, split views). The structural honesty is brutalist. The visual execution (gradient themes, smooth animations) makes tab management pleasant rather than clinical.⁹

The Balance Point

The most effective approach uses brutalist principles for structure and beautiful principles for execution:

Key Takeaways

For designers: - Use brutalist principles for structure (layout, information architecture, color) and beauty principles for execution (typography, spacing, micro-interactions); the combination produces interfaces that are honest and pleasant - Remove every decorative element and ask what breaks; if nothing breaks, the decoration was unnecessary - Design for one mode well rather than two modes adequately; my dark-only approach produces a more coherent system than a compromised light/dark toggle

For developers: - Implement design tokens as CSS custom properties with no arbitrary values; if a spacing doesn’t exist in the system, fix the design rather than adding a one-off value — this approach works without a build pipeline, as documented in the No-Build Manifesto - Treat micro-interactions as functional feedback; a 150ms hover transition communicates interactivity, while a 2-second entrance animation communicates nothing useful

For product leaders: - Match the aesthetic position to the user context; professional tools lean brutalist, consumer products lean beautiful, and the best products find the intersection

References