aliens-made-this

MotherDuck Brutalist Style Guide v2.0

1. Overview

Design Philosophy

The MotherDuck Brutalist design system embraces a bold, unapologetic aesthetic that prioritizes:

Sharp Edges - Zero border radius on all rectangular components
Hard Shadows - Offset box shadows with no blur (brutalist depth)
Bold Borders - Thick 2-3px black borders on everything
High Contrast - Bright yellows and blues against cream backgrounds
Playful Illustrations - Duck emoji and icons integrated throughout
Monospace Typography - Space Mono for technical credibility

Design Principles

No Subtlety - Make every element command attention
Geometric Purity - Sharp corners, perfect rectangles, circular elements
Visual Weight - Heavy borders and shadows create tactile depth
Functional Color - Colors convey meaning and hierarchy
Developer-First - Code examples and technical aesthetics

Tech Stack

Framework: HTML5 + Tailwind CSS 3.x
Icons: Lucide Icons (stroke-width: 2-2.5)
Fonts: Space Mono (monospace) - 400 (regular), 700 (bold)
Responsive: Mobile-first with md: (768px) and lg: (1024px) breakpoints

2. Color Palette

Primary Brand Colors

Color Name	Hex Code	Tailwind Class	Usage	Instances
Yellow Primary	`#FFE600`	`bg-[#FFE600]`	CTA backgrounds, highlights, badges, icon containers	25+
Blue Primary	`#4DA6FF`	`bg-[#4DA6FF]`	Primary buttons, hover states, accent sections	20+
Cream Background	`#F5F1E8`	`bg-[#F5F1E8]`	Main page background, card backgrounds	15+
Black	`#000000`	`border-black`	All borders, shadows, text emphasis	100+
White	`#FFFFFF`	`bg-white`	Card surfaces, navigation, content blocks	30+

Neutral Palette

Color Name	Hex Code	Tailwind Class	Usage
Gray 900	`#111827`	`bg-gray-900`	Code editor background, footer
Gray 700	`#374151`	`text-gray-700`	Body text, descriptions
Gray 400	`#9CA3AF`	`text-gray-400`	Footer links, secondary text
Gray 300	`#D1D5DB`	`border-gray-300`	Navigation border
Gray 200	`#E5E7EB`	`bg-gray-200`	Subtle card backgrounds
Gray 100	`#F3F4F6`	`hover:bg-gray-100`	Hover states

Accent Colors (Syntax Highlighting & UI)

Color Name	Hex Code	Tailwind Class	Usage
Red 500	`#EF4444`	`bg-red-500`	Traffic light dot (decorative)
Yellow 400	`#FACC15`	`bg-yellow-400`	Traffic light dot, stars
Yellow 300	`#FDE047`	`text-yellow-300`	SQL function highlighting
Green 500	`#22C55E`	`bg-green-500`	Traffic light dot, success indicators
Green 400	`#4ADE80`	`text-green-400`	Code text color
Blue 400	`#60A5FA`	`text-blue-400`	SQL keyword highlighting
Orange 400	`#FB923C`	`text-orange-400`	SQL string highlighting

Color Usage Rules

Background Hierarchy

Level 1 (Page): #F5F1E8 (Cream) - Base layer
Level 2 (Sections): #FFFFFF (White) or #4DA6FF (Blue accent)
Level 3 (Cards): #F5F1E8 (Cream) or #FFFFFF (White)
Level 4 (Highlights): #FFE600 (Yellow) - Maximum emphasis
Level 5 (Code): #111827 (Gray 900) - Dark terminal

Border Standards

ALL components: 2px black borders (border-2 border-black)
Top banner: 3px black border (style="border-width: 3px;")
Circular elements: 2px black borders on rounded-full elements
NO exceptions: Every visual element has a black border

Shadow System (Brutalist)

All shadows are hard offset shadows with NO blur:

/* Small Element Shadow */
shadow-[4px_4px_0_0_rgba(0,0,0,1)]
/* Standard: 4px right, 4px down, no blur, full opacity black */

/* Medium Element Shadow */
shadow-[6px_6px_0_0_rgba(0,0,0,1)]
/* Standard cards and buttons: 6px offset */

/* Large Element Shadow */
shadow-[8px_8px_0_0_rgba(0,0,0,1)]
/* Hero elements and important cards: 8px offset */

Hover State: Shadows reduce by 50% and element translates:

/* Hover transformation */
shadow-[6px_6px_0_0_rgba(0,0,0,1)] → shadow-[3px_3px_0_0_rgba(0,0,0,1)]
translate-x-[3px] translate-y-[3px]
/* Element moves toward shadow, creating "press" effect */

3. Typography System

Font Family: Space Mono (Monospace)

Single Font Philosophy: The entire design uses Space Mono exclusively for:

Technical credibility
Developer-friendly aesthetic
Consistent character width
Retro computing aesthetic

body {
    font-family: 'Space Mono', monospace;
}

Font Weights

Weight	Value	Tailwind Class	Usage	Frequency
Regular	400	`font-normal`	Body text, descriptions, paragraphs	Common
Bold	700	`font-bold`	All headings, buttons, labels, nav links	Very Common

Critical Rule: Space Mono only has 2 weights. Use bold for ALL emphasis.

Type Scale

Desktop Hierarchy (Base: 16px)

Element	Size	Line Height	Weight	Tailwind Classes	Usage
Mega Heading	72px	1.0	Bold	`text-7xl font-bold tracking-tight leading-none`	Hero main title
H1	60px	1.1	Bold	`text-6xl font-bold tracking-tight`	Large section headers
H2	48px	1.2	Bold	`text-5xl font-bold tracking-tight`	Section headings
H3	36px	1.2	Bold	`text-4xl font-bold tracking-tight`	Subsection headings
H4	30px	1.3	Bold	`text-3xl font-bold`	Card headings
H5	24px	1.3	Bold	`text-2xl font-bold`	Use case titles
H6	20px	1.4	Bold	`text-xl font-bold`	Component titles
Body Large	20px	1.5	Regular	`text-xl text-gray-700`	Hero descriptions
Body	18px	1.6	Regular	`text-lg text-gray-700`	Standard paragraphs
Body Small	14px	1.5	Regular	`text-sm`	Card descriptions
Label	14px	1.4	Bold	`text-sm font-bold`	Buttons, navigation
Micro	12px	1.4	Bold	`text-xs font-bold uppercase tracking-wider`	Badges, tags

Mobile Scaling

Element	Mobile → Desktop	Tailwind Responsive
Mega Heading	48px → 60px → 72px	`text-5xl md:text-6xl lg:text-7xl`
H1	36px → 48px → 60px	`text-4xl md:text-5xl lg:text-6xl`
H2	36px → 48px	`text-4xl md:text-5xl`
Body Large	18px → 20px	`text-lg md:text-xl`

Typography Patterns

Hero Title Pattern

<h1 class="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-none">
  MAKING<br/>
  BIG DATA<br/>
  <span class="inline-block px-3 bg-[#FFE600] border-2 border-black shadow-[6px_6px_0_0_rgba(0,0,0,1)]">
    FEEL SMALL
  </span>
</h1>

Specifications:

All caps for maximum impact
Line breaks for dramatic pacing
Inline highlight with yellow background
Hard shadow on highlight span
Tight tracking (tracking-tight)
No line height (leading-none)

Section Header Pattern

<div class="inline-block px-4 py-2 bg-[#4DA6FF] text-white border-2 border-black shadow-[4px_4px_0_0_rgba(0,0,0,1)]">
  <span class="text-xs font-bold uppercase tracking-wider">Data Integration</span>
</div>

<h2 class="text-4xl md:text-5xl font-bold tracking-tight">
  QUERY<br/>
  ANYTHING,<br/>
  ANYWHERE
</h2>

Pattern:

Eyebrow badge (colored, uppercase, micro text)
Large heading (all caps, bold, line breaks)
Description paragraph (sentence case, gray text)

Body Text Pattern

<p class="text-lg md:text-xl text-gray-700 max-w-xl">
  The cloud analytics platform that brings DuckDB's speed...
</p>

Specifications:

text-gray-700 for body text (sufficient contrast)
max-w-xl (36rem ≈ 576px) for readability
Responsive sizing with md: breakpoint

Letter Spacing

Size Range	Tracking Class	CSS Value	Usage
72px+	`tracking-tight`	`-0.025em`	Mega headings
48-60px	`tracking-tight`	`-0.025em`	H1, H2
12px (uppercase)	`tracking-wider`	`0.05em`	Badges, labels
Default	(none)	`0em`	Body text, buttons

Text Transformation

Uppercase Usage:

ALL main headings (MAKING BIG DATA FEEL SMALL)
All section titles (WHY IT'S BETTER)
All badges (CLOUD ANALYTICS)
All buttons (START FOR FREE)
All feature titles (BLAZING FAST)

Sentence Case:

Body paragraphs only
Descriptions under headings

4. Spacing System

Base Unit: 4px (0.25rem)

The design uses Tailwind’s default spacing scale based on 4px increments.

Spacing Scale

Scale	Pixels	Rem	Tailwind Class	Usage
0.5	2px	0.125rem	`p-0.5`	Micro spacing
1	4px	0.25rem	`p-1`	Minimal spacing
2	8px	0.5rem	`p-2`, `gap-2`	Tight spacing
3	12px	0.75rem	`p-3`, `space-x-3`	Compact spacing
4	16px	1rem	`p-4`, `gap-4`	Standard spacing
6	24px	1.5rem	`p-6`, `gap-6`	Card padding
8	32px	2rem	`p-8`, `gap-8`	Large card padding
12	48px	3rem	`gap-12`	Section spacing
16	64px	4rem	`py-16`	Section padding (mobile)
20	80px	5rem	`py-20`	Section padding (desktop)
24	96px	6rem	`py-24`	Hero section padding

Component Spacing Patterns

Button Padding

<!-- Small Button -->
<button class="px-4 py-2">  <!-- 16px × 8px -->

<!-- Medium Button (Navigation) -->
<button class="px-6 py-2">  <!-- 24px × 8px -->

<!-- Large Button (Hero CTAs) -->
<button class="px-8 py-3">  <!-- 32px × 12px -->

<!-- Extra Large Button (Final CTA) -->
<button class="px-10 py-4">  <!-- 40px × 16px -->

Card Padding

<!-- Standard Feature Card -->
<div class="p-6">  <!-- 24px all sides -->

<!-- Large Card (Data Integration) -->
<div class="p-8">  <!-- 32px all sides -->

Section Padding (Vertical)

<!-- Mobile: 64px, Desktop: 96px -->
<section class="py-16 md:py-24">

<!-- Consistent Desktop: 80px -->
<section class="py-20">

Grid Gaps

<!-- Card Grid -->
<div class="grid gap-6">  <!-- 24px between items -->

<!-- Large Content Grid -->
<div class="grid gap-12">  <!-- 48px between columns -->

<!-- Use Case Grid -->
<div class="grid gap-8">  <!-- 32px between cards -->

Stack Spacing

<!-- Tight Stack (Hero Content) -->
<div class="space-y-6">  <!-- 24px vertical spacing -->

<!-- Icon List -->
<ul class="space-y-3">  <!-- 12px vertical spacing -->

<!-- Horizontal Icons -->
<div class="space-x-2">  <!-- 8px horizontal spacing -->

Container System

<!-- Standard Container -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Max width: 1280px, Padding: 16px → 24px → 32px -->

<!-- Narrow Container (CTA Section) -->
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Max width: 896px -->

<!-- Extra Wide Container (Stats) -->
<div class="max-w-5xl mx-auto">
<!-- Max width: 1024px -->

Layout Spacing Guidelines

Vertical Rhythm

Top Banner: 8px vertical (py-2)
Navigation Height: 70px mobile, 90px desktop
Hero Section: 64px mobile → 96px desktop (py-16 md:py-24)
Standard Section: 80px (py-20)
Component Spacing: 48px (mb-12)
Card Internal: 24-32px (p-6, p-8)
Text Blocks: 24px (space-y-6)
Paragraphs: 16px (mb-4)

5. Component Styles

5.1 Buttons

Primary Button (Blue)

<button class="px-8 py-3 bg-[#4DA6FF] text-white font-bold border-2 border-black
               shadow-[6px_6px_0_0_rgba(0,0,0,1)]
               hover:shadow-[3px_3px_0_0_rgba(0,0,0,1)]
               hover:translate-x-[3px] hover:translate-y-[3px]
               transition-all">
  Start for Free
</button>

Specifications:

Background: #4DA6FF (blue primary)
Text: White, bold, uppercase
Border: 2px solid black
Shadow: 6px offset, hard edge
Hover: Reduce shadow to 3px, translate element 3px
Padding: 32px × 12px (large)
NO border radius - sharp corners

Secondary Button (White)

<button class="px-8 py-3 bg-white font-bold border-2 border-black
               shadow-[6px_6px_0_0_rgba(0,0,0,1)]
               hover:shadow-[3px_3px_0_0_rgba(0,0,0,1)]
               hover:translate-x-[3px] hover:translate-y-[3px]
               transition-all">
  View Demo
</button>

Specifications:

Background: White
Text: Black (default), bold
Same shadow and hover behavior

<button class="px-10 py-4 bg-black text-white text-lg font-bold border-2 border-black
               shadow-[8px_8px_0_0_rgba(0,0,0,1)]
               hover:shadow-[4px_4px_0_0_rgba(0,0,0,1)]
               hover:translate-x-[4px] hover:translate-y-[4px]
               transition-all">
  Start Free Trial
</button>

Specifications:

Extra large: 40px × 16px padding
8px shadow (maximum emphasis)
Larger text: text-lg

<button class="px-4 py-2 text-sm font-bold hover:bg-gray-100 transition-colors">
  Sign In
</button>

Specifications:

No background (transparent)
No border
No shadow
Hover: Light gray background
Small size: 16px × 8px

5.2 Cards

Feature Card (Cream Background)

<div class="bg-[#F5F1E8] border-2 border-black p-6
            shadow-[6px_6px_0_0_rgba(0,0,0,1)]
            hover:shadow-[3px_3px_0_0_rgba(0,0,0,1)]
            hover:translate-x-[3px] hover:translate-y-[3px]
            transition-all">

  <!-- Icon Container -->
  <div class="w-12 h-12 bg-[#FFE600] border-2 border-black
              flex items-center justify-center mb-4">
    <i data-lucide="zap" class="w-6 h-6" style="stroke-width: 2.5;"></i>
  </div>

  <!-- Title -->
  <h3 class="text-xl font-bold mb-2">BLAZING FAST</h3>

  <!-- Description -->
  <p class="text-sm text-gray-700">
    Query gigabytes in milliseconds with DuckDB's vectorized engine.
  </p>
</div>

Specifications:

Background: Cream (#F5F1E8)
Border: 2px black
Shadow: 6px offset
Padding: 24px
Icon: 48px square, yellow background
NO rounded corners
Hover: Press effect (shadow + translate)

White Card (Hero Code Editor)

<div class="bg-white border-2 border-black shadow-[8px_8px_0_0_rgba(0,0,0,1)] p-6">
  <!-- Content -->
</div>

Specifications:

Background: White
Shadow: 8px (larger for emphasis)
No hover state (static display)

Data Source Card (Colored Background)

<div class="flex items-center space-x-3 p-3
            bg-[#FFE600] border-2 border-black">
  <!-- Icon + Text + Status Indicator -->
</div>

Specifications:

Colored backgrounds: Yellow, Blue, Gray
Compact padding: 12px
Horizontal layout with flex

5.3 Badges & Labels

Eyebrow Badge (Section Label)

<!-- White Background -->
<div class="inline-block px-4 py-2 bg-white border-2 border-black
            shadow-[4px_4px_0_0_rgba(0,0,0,1)]">
  <span class="text-xs font-bold uppercase tracking-wider">
    Cloud Analytics
  </span>
</div>

<!-- Blue Background -->
<div class="inline-block px-4 py-2 bg-[#4DA6FF] text-white border-2 border-black
            shadow-[4px_4px_0_0_rgba(0,0,0,1)]">
  <span class="text-xs font-bold uppercase tracking-wider">
    Data Integration
  </span>
</div>

Specifications:

Always inline-block
Padding: 16px × 8px
Text: 12px, bold, uppercase, wide tracking
4px hard shadow
NO rounded corners (sharp rectangles)

Result Badge (Yellow Highlight)

<div class="mt-3 px-3 py-2 bg-[#FFE600] border-2 border-black inline-block">
  <span class="text-xs font-bold">⚡ Executed in 0.03s • 1.2M rows</span>
</div>

Specifications:

Yellow background
Emoji prefix
Compact padding: 12px × 8px

<header class="sticky top-0 z-50 bg-white border-b border-gray-300"
        style="border-width: 2px;">
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-[70px] md:h-[90px]">
      <!-- Logo | Nav Links | CTAs -->
    </div>
  </nav>
</header>

Specifications:

Position: Sticky top
Z-index: 50 (above content)
Height: 70px mobile, 90px desktop
Border: 2px gray bottom border
Background: White

<a href="#" class="text-sm font-bold hover:text-[#4DA6FF] transition-colors">
  Product
</a>

Specifications:

Font: 14px, bold
Default: Black text
Hover: Blue color
Transition: Color change only

5.5 Code Editor Display

<div class="bg-white border-2 border-black shadow-[8px_8px_0_0_rgba(0,0,0,1)] p-6">
  <!-- Window Controls (Traffic Lights) -->
  <div class="flex items-center space-x-2 mb-4 pb-3 border-b-2 border-gray-200">
    <div class="flex space-x-2">
      <div class="w-3 h-3 rounded-full bg-red-500 border border-black"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-400 border border-black"></div>
      <div class="w-3 h-3 rounded-full bg-green-500 border border-black"></div>
    </div>
    <div class="flex-1 text-center">
      <span class="text-xs font-bold">query.sql</span>
    </div>
  </div>

  <!-- Code Block -->
  <div class="bg-gray-900 p-4 border-2 border-black">
    <pre class="text-sm text-green-400 font-mono leading-relaxed">
      <span class="text-blue-400">SELECT</span>
      product_name,
      <span class="text-yellow-300">SUM</span>(revenue) ...
    </pre>
  </div>

  <!-- Result Badge -->
  <div class="mt-3 px-3 py-2 bg-[#FFE600] border-2 border-black inline-block">
    <span class="text-xs font-bold">⚡ Executed in 0.03s • 1.2M rows</span>
  </div>
</div>

Syntax Highlighting:

Keywords (SELECT, FROM, WHERE): text-blue-400
Functions (SUM, COUNT): text-yellow-300
Values/Strings: text-orange-400
Default text: text-green-400
Background: bg-gray-900 (dark terminal)

5.6 Testimonial Card

<div class="bg-white border-2 border-black shadow-[6px_6px_0_0_rgba(0,0,0,1)] p-6">
  <!-- Star Rating -->
  <div class="mb-4">
    <span class="text-[#FFE600] text-2xl">★★★★★</span>
  </div>

  <!-- Quote -->
  <p class="text-sm mb-4 leading-relaxed">
    "We migrated from Snowflake and saw 10x faster queries..."
  </p>

  <!-- Author -->
  <div class="flex items-center space-x-3 pt-4 border-t-2 border-gray-200">
    <div class="w-10 h-10 bg-gray-300 border-2 border-black rounded-full
                flex items-center justify-center font-bold">
      SC
    </div>
    <div>
      <div class="font-bold text-sm">Sarah Chen</div>
      <div class="text-xs text-gray-600">Lead Engineer, DataCo</div>
    </div>
  </div>
</div>

Specifications:

Stars: Yellow (#FFE600), large (24px)
Quote: Small text, relaxed leading
Avatar: 40px circle, initials, gray background
Divider: 2px top border before author

6. Shadows & Elevation

Brutalist Shadow System

Core Principle: All shadows are hard-edged offsets with NO BLUR.

/* Shadow Format */
shadow-[Xpx_Ypx_BLUR_SPREAD_rgba(R,G,B,ALPHA)]

/* Our Usage: No blur, no spread, full opacity black */
shadow-[Xpx_Ypx_0_0_rgba(0,0,0,1)]

Shadow Scale

Elevation	Shadow Class	Offset	Usage	Examples
Level 1	`shadow-[4px_4px_0_0_rgba(0,0,0,1)]`	4px	Small elements, badges, small buttons	Eyebrow badges, nav button
Level 2	`shadow-[6px_6px_0_0_rgba(0,0,0,1)]`	6px	Standard cards, main buttons	Feature cards, CTAs
Level 3	`shadow-[8px_8px_0_0_rgba(0,0,0,1)]`	8px	Hero elements, important cards	Code editor, large cards

Hover State Transformation

Rule: Shadows reduce by 50%, element translates by remaining shadow amount.

<!-- Resting State -->
shadow-[6px_6px_0_0_rgba(0,0,0,1)]

<!-- Hover State -->
hover:shadow-[3px_3px_0_0_rgba(0,0,0,1)]
hover:translate-x-[3px]
hover:translate-y-[3px]

Visual Effect: Element appears to “press down” toward the shadow.

Shadow Examples by Component

/* Small Badge */
.badge {
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 1);
}

/* Standard Card */
.card {
  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 1);
}
.card:hover {
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 1);
  transform: translate(3px, 3px);
}

/* Hero Element */
.hero-card {
  box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 1);
}

Static vs Interactive Shadows

Static Elements (No hover):

Hero code editor card
Section background elements
Decorative illustrations

Interactive Elements (Hover effect):

All buttons
Feature cards
Testimonial cards
Use case cards

7. Border Radius

The Golden Rule: ZERO BORDER RADIUS

Critical Design Principle: All rectangular components have sharp corners (0px radius).

/* Default for ALL components */
border-radius: 0;

Exceptions: Circular Elements ONLY

Only Elements with rounded-full:

Element	Tailwind Class	Border Radius	Usage
Logo Container	`rounded-full`	9999px	Duck emoji container
Traffic Light Dots	`rounded-full`	9999px	Red, yellow, green dots
Status Indicators	`rounded-full`	9999px	Connection status dots
Avatar/Initials	`rounded-full`	9999px	Testimonial avatars
Checkmark Containers	`rounded-full`	9999px	Yellow check circles

Component Border Radius

<!-- ❌ WRONG: Rounded corners -->
<div class="rounded-lg"> <!-- DO NOT USE -->

<!-- ✅ CORRECT: Sharp corners (default) -->
<div class="border-2 border-black"> <!-- No border-radius class -->

<!-- ✅ CORRECT: Circle -->
<div class="rounded-full"> <!-- Only for truly circular elements -->

Visual Comparison

❌ Soft, rounded design:
┌─────────────┐
│             │  ← Rounded corners (NOT our style)
└─────────────┘

✅ Sharp, brutalist design:
┌─────────────┐
│             │  ← 90° angles (OUR STYLE)
└─────────────┘

✅ Perfect circles:
    ●           ← rounded-full (ONLY exception)

8. Animations & Transitions

Transition System

Tailwind Classes Used:

<!-- All Properties (Position, Shadow, Color) -->
transition-all

<!-- Color Only -->
transition-colors

Hover Effects

Button Press Effect (Most Common)

<button class="shadow-[6px_6px_0_0_rgba(0,0,0,1)]
               hover:shadow-[3px_3px_0_0_rgba(0,0,0,1)]
               hover:translate-x-[3px] hover:translate-y-[3px]
               transition-all">

Behavior:

Shadow reduces from 6px → 3px
Element moves right 3px
Element moves down 3px
Creates “pressing into page” effect

Duration: Default Tailwind transition (~300ms)

Card Hover Effect

<div class="shadow-[6px_6px_0_0_rgba(0,0,0,1)]
            hover:shadow-[3px_3px_0_0_rgba(0,0,0,1)]
            hover:translate-x-[3px] hover:translate-y-[3px]
            transition-all">

Same as buttons - consistent interaction language.

Color Change (Links, Ghost Buttons)

<a class="hover:text-[#4DA6FF] transition-colors">Product</a>

<button class="hover:bg-gray-100 transition-colors">Sign In</button>

Behavior:

Text color: Black → Blue
Background: Transparent → Light gray
Duration: ~200ms (faster than position changes)

Custom Animations (CSS)

Floating Animation (Decorative Elements)

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}

Usage: Applied to duck emoji decorations

<div class="float-animation">🦆</div>

Behavior:

Moves up 10px at midpoint
3-second loop
Smooth ease-in-out
Infinite repeat

Drop Shadow (Illustrations)

.illustration-shadow {
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

Usage: Soft shadow on floating duck emoji Exception: This is a SOFT shadow (blur) for decorative illustrations only

Animation Timing

Transition	Duration	Easing	Usage
`transition-all`	~300ms	ease	Button/card hover
`transition-colors`	~200ms	ease	Link/text color
Float animation	3000ms	ease-in-out	Decorative motion

No JavaScript Animations

All animations use pure CSS/Tailwind:

Hover states: CSS pseudo-classes
Transforms: Tailwind utilities
Custom keyframes: Minimal CSS only

9. Opacity & Transparency

Opacity Usage

Minimal Transparency Philosophy: The design favors solid colors over transparency.

Opacity	Usage	Example
100%	All UI components	Standard (no opacity class)
90%	Accent text on colored backgrounds	`text-white/90` (blue section)
10%	Soft shadows on decorations	`rgba(0, 0, 0, 0.1)` (illustration shadow)

Text on Backgrounds

<!-- Black text on cream/white (Primary) -->
<div class="bg-[#F5F1E8] text-gray-900">

<!-- White text on blue (Section Headers) -->
<div class="bg-[#4DA6FF] text-white">

<!-- Gray text for descriptions -->
<p class="text-gray-700">

No Semi-Transparent Overlays: All backgrounds are solid colors.

Border Opacity

All borders are 100% solid:

border-black  <!-- rgba(0, 0, 0, 1) -->
border-gray-300  <!-- Solid gray -->

Shadow Opacity

Hard shadows: rgba(0, 0, 0, 1) - Full opacity black Soft decoration shadow: rgba(0, 0, 0, 0.1) - 10% opacity (decorative only)

10. Common Tailwind CSS Usage Patterns

Layout Patterns

Centered Container (Most Frequent)

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <!-- Max width 1280px, centered, responsive padding -->
</div>

Usage Count: 10+ sections Padding Breakdown:

Mobile: 16px (px-4)
Tablet: 24px (sm:px-6)
Desktop: 32px (lg:px-8)

Flex Layouts

<!-- Space Between (Navigation) -->
<div class="flex items-center justify-between">
  <div>Logo</div>
  <div>Navigation</div>
  <div>CTAs</div>
</div>

<!-- Centered (Vertical + Horizontal) -->
<div class="flex items-center justify-center">

<!-- Start Aligned with Gap -->
<div class="flex items-center space-x-3">
  <div>Icon</div>
  <div>Text</div>
</div>

Grid Layouts

<!-- Two Column (Content + Visual) -->
<div class="grid md:grid-cols-2 gap-12 items-center">

<!-- Four Column (Features) -->
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">

<!-- Three Column (Testimonials) -->
<div class="grid md:grid-cols-3 gap-8">

Pattern: Mobile stacks, desktop spreads horizontally.

Spacing Patterns

Vertical Stack

<!-- Hero Content Stack (24px gaps) -->
<div class="space-y-6">
  <div>Badge</div>
  <h1>Heading</h1>
  <p>Description</p>
  <div>Buttons</div>
</div>

<!-- Tight List (12px gaps) -->
<ul class="space-y-3">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Horizontal Stack

<!-- Button Group (16px gap) -->
<div class="flex flex-col sm:flex-row gap-4">
  <button>Primary</button>
  <button>Secondary</button>
</div>

<!-- Icon Row (8px gap) -->
<div class="flex space-x-2">
  <div>●</div>
  <div>●</div>
  <div>●</div>
</div>

Text Patterns

Heading with Tight Tracking

<h1 class="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-none">
  MAKING BIG DATA FEEL SMALL
</h1>

Pattern Breakdown:

Responsive sizes: 48px → 60px → 72px
font-bold (700 weight)
tracking-tight (tighter letters)
leading-none (no line height)

Body with Max Width

<p class="text-lg md:text-xl text-gray-700 max-w-xl">
  Description text with optimal reading width
</p>

Pattern:

Responsive: 18px → 20px
Gray text for hierarchy
Max width: 36rem (~600px)

Uppercase Label

<span class="text-xs font-bold uppercase tracking-wider">
  CLOUD ANALYTICS
</span>

Pattern: 12px, bold, uppercase, wide tracking

Color Patterns

Custom Colors (HEX)

<!-- Yellow Accent -->
<div class="bg-[#FFE600]">

<!-- Blue Primary -->
<div class="bg-[#4DA6FF]">

<!-- Cream Background -->
<div class="bg-[#F5F1E8]">

Why HEX?: Custom brand colors not in Tailwind default palette.

Standard Colors (Tailwind)

<!-- Text Colors -->
text-gray-900  <!-- Black text -->
text-gray-700  <!-- Body text -->
text-gray-600  <!-- Tertiary text -->
text-gray-400  <!-- Footer text -->

<!-- Borders -->
border-black  <!-- All component borders -->
border-gray-300  <!-- Navigation border -->
border-gray-200  <!-- Subtle dividers -->

Interactive Patterns

Button Hover (Standard Pattern)

<button class="bg-[#4DA6FF] border-2 border-black
               shadow-[6px_6px_0_0_rgba(0,0,0,1)]
               hover:shadow-[3px_3px_0_0_rgba(0,0,0,1)]
               hover:translate-x-[3px] hover:translate-y-[3px]
               transition-all">

Always Together:

Hard shadow (6px)
Hover: Half shadow (3px)
Hover: Translate by difference
transition-all

Link Hover

<a href="#" class="hover:text-[#4DA6FF] transition-colors">

Simple Pattern: Color change only.

Responsive Patterns

Show/Hide by Breakpoint

<!-- Hidden on mobile, visible on desktop -->
<div class="hidden md:flex">

<!-- Visible on mobile, hidden on desktop -->
<div class="md:hidden">

<!-- Show inline on mobile, block on desktop -->
<div class="inline-block md:block">

Responsive Sizing

<!-- Text: 48px → 60px → 72px -->
<h1 class="text-5xl md:text-6xl lg:text-7xl">

<!-- Padding: 64px → 96px -->
<section class="py-16 md:py-24">

<!-- Grid: 1 col → 2 cols → 4 cols -->
<div class="grid md:grid-cols-2 lg:grid-cols-4">

11. Icon System

Lucide Icons

Library: https://lucide.dev/ Implementation: Via unpkg CDN

<script src="https://unpkg.com/lucide@latest"></script>
<script>lucide.createIcons();</script>

Icon Specifications

Icon Size	Tailwind Class	Pixels	Stroke Width	Usage
Small	`w-4 h-4`	16px	2	Social icons
Medium	`w-6 h-6`	24px	2-2.5	Feature icons, navigation

Icon Styling

<!-- Feature Card Icon -->
<i data-lucide="zap" class="w-6 h-6" style="stroke-width: 2.5;"></i>

<!-- Navigation Icon -->
<i data-lucide="menu" class="w-6 h-6" style="stroke-width: 2;"></i>

<!-- Footer Social Icon -->
<i data-lucide="twitter" class="w-4 h-4" style="stroke-width: 2;"></i>

Stroke Weight: Heavier (2.5) for feature emphasis, standard (2) otherwise.

Icon Containers

<!-- Yellow Square Container -->
<div class="w-12 h-12 bg-[#FFE600] border-2 border-black
            flex items-center justify-center">
  <i data-lucide="zap" class="w-6 h-6"></i>
</div>

<!-- Blue Square Container -->
<div class="w-12 h-12 bg-[#4DA6FF] border-2 border-black
            flex items-center justify-center">
  <i data-lucide="cloud" class="w-6 h-6 text-white"></i>
</div>

Specifications:

Container: 48px square
Icon: 24px (50% of container)
NO rounded corners on container
2px black border
Centered with flexbox

Common Icons Used

Icon Name	Lucide Name	Usage
Lightning	`zap`	Speed/performance
Cloud	`cloud`	Serverless/cloud
Dollar	`dollar-sign`	Pricing/cost
Database	`database`	Data/SQL
Menu	`menu`	Mobile navigation
Twitter	`twitter`	Social link
GitHub	`github`	Social link
LinkedIn	`linkedin`	Social link

12. Example Component Reference Designs

12.1 Complete Hero Section

<section class="bg-[#F5F1E8] py-16 md:py-24 overflow-hidden">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid md:grid-cols-2 gap-12 items-center">

      <!-- Left Content Column -->
      <div class="space-y-6">
        <!-- Eyebrow Badge -->
        <div class="inline-block px-4 py-2 bg-white border-2 border-black
                    shadow-[4px_4px_0_0_rgba(0,0,0,1)]">
          <span class="text-xs font-bold uppercase tracking-wider">
            Cloud Analytics
          </span>
        </div>

        <!-- Main Heading with Highlight -->
        <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-none">
          MAKING<br/>
          BIG DATA<br/>
          <span class="inline-block px-3 bg-[#FFE600] border-2 border-black
                       shadow-[6px_6px_0_0_rgba(0,0,0,1)]">
            FEEL SMALL
          </span>
        </h1>

        <!-- Description -->
        <p class="text-lg md:text-xl text-gray-700 max-w-xl">
          The cloud analytics platform that brings DuckDB's speed
          to your data warehouse. Query billions of rows in seconds.
        </p>

        <!-- CTA Button Group -->
        <div class="flex flex-col sm:flex-row gap-4 pt-4">
          <button class="px-8 py-3 bg-[#4DA6FF] text-white font-bold
                         border-2 border-black
                         shadow-[6px_6px_0_0_rgba(0,0,0,1)]
                         hover:shadow-[3px_3px_0_0_rgba(0,0,0,1)]
                         hover:translate-x-[3px] hover:translate-y-[3px]
                         transition-all">
            Start for Free
          </button>
          <button class="px-8 py-3 bg-white font-bold
                         border-2 border-black
                         shadow-[6px_6px_0_0_rgba(0,0,0,1)]
                         hover:shadow-[3px_3px_0_0_rgba(0,0,0,1)]
                         hover:translate-x-[3px] hover:translate-y-[3px]
                         transition-all">
            View Demo
          </button>
        </div>
      </div>

      <!-- Right Visual Column -->
      <div class="relative">
        <!-- Code Editor Card -->
        <div class="bg-white border-2 border-black
                    shadow-[8px_8px_0_0_rgba(0,0,0,1)] p-6">

          <!-- Window Controls -->
          <div class="flex items-center space-x-2 mb-4 pb-3
                      border-b-2 border-gray-200">
            <div class="flex space-x-2">
              <div class="w-3 h-3 rounded-full bg-red-500 border border-black"></div>
              <div class="w-3 h-3 rounded-full bg-yellow-400 border border-black"></div>
              <div class="w-3 h-3 rounded-full bg-green-500 border border-black"></div>
            </div>
            <div class="flex-1 text-center">
              <span class="text-xs font-bold">query.sql</span>
            </div>
          </div>

          <!-- Code Block -->
          <div class="bg-gray-900 p-4 border-2 border-black">
            <pre class="text-sm text-green-400 font-mono leading-relaxed"><span class="text-blue-400">SELECT</span>
  product_name,
  <span class="text-yellow-300">SUM</span>(revenue) <span class="text-blue-400">as</span> total_revenue
<span class="text-blue-400">FROM</span> sales_data
<span class="text-blue-400">WHERE</span> date >= <span class="text-orange-400">'2024-01-01'</span>
<span class="text-blue-400">GROUP BY</span> product_name
<span class="text-blue-400">ORDER BY</span> total_revenue <span class="text-blue-400">DESC</span>;</pre>
          </div>

          <!-- Result Badge -->
          <div class="mt-3 px-3 py-2 bg-[#FFE600] border-2 border-black inline-block">
            <span class="text-xs font-bold">⚡ Executed in 0.03s • 1.2M rows</span>
          </div>
        </div>

        <!-- Floating Duck Decoration -->
        <div class="absolute -bottom-6 -right-6 text-7xl
                    float-animation illustration-shadow">
          🦆
        </div>
      </div>
    </div>
  </div>
</section>

Key Design Elements:

Two-column grid (stacks on mobile)
Eyebrow badge with hard shadow
Large heading with inline yellow highlight
Two contrasting CTAs (blue + white)
Code editor mockup with syntax highlighting
Floating animated duck decoration

12.2 Feature Card Component

<div class="bg-[#F5F1E8] border-2 border-black p-6
            shadow-[6px_6px_0_0_rgba(0,0,0,1)]
            hover:shadow-[3px_3px_0_0_rgba(0,0,0,1)]
            hover:translate-x-[3px] hover:translate-y-[3px]
            transition-all">

  <!-- Icon Container (Square, No Rounding) -->
  <div class="w-12 h-12 bg-[#FFE600] border-2 border-black
              flex items-center justify-center mb-4">
    <i data-lucide="zap" class="w-6 h-6" style="stroke-width: 2.5;"></i>
  </div>

  <!-- Title (Uppercase, Bold) -->
  <h3 class="text-xl font-bold mb-2">BLAZING FAST</h3>

  <!-- Description (Small, Gray) -->
  <p class="text-sm text-gray-700">
    Query gigabytes in milliseconds with DuckDB's vectorized engine.
  </p>
</div>

Specifications:

Card: Cream background, 2px black border
Shadow: 6px hard offset
Icon: 48px yellow square, 24px icon inside
Hover: Press effect (shadow + translate)
NO rounded corners

12.3 Stats/Benchmark Card

<div class="bg-white border-2 border-black
            shadow-[6px_6px_0_0_rgba(0,0,0,1)] p-6 text-center">
  <!-- Large Number -->
  <div class="text-5xl font-bold text-[#4DA6FF] mb-2">10x</div>

  <!-- Label -->
  <div class="font-bold mb-1">FASTER QUERIES</div>

  <!-- Subtitle -->
  <div class="text-sm text-gray-700">vs. traditional warehouses</div>
</div>

Design Pattern:

Large colorful number (48-60px)
Bold uppercase label
Small gray subtitle
Center-aligned

12.4 Data Connection Row

<div class="flex items-center space-x-3 p-3
            bg-[#FFE600] border-2 border-black">

  <!-- Icon Badge -->
  <div class="w-8 h-8 bg-white border-2 border-black
              flex items-center justify-center text-sm font-bold">
    S3
  </div>

  <!-- Connection String -->
  <span class="text-sm font-bold flex-1">
    s3://bucket/data.parquet
  </span>

  <!-- Status Indicator -->
  <div class="w-5 h-5 bg-green-500 border border-black rounded-full"></div>
</div>

Pattern:

Horizontal flex layout
Colored background (yellow, blue, gray variations)
Small icon badge on left
Connection text in middle
Status dot on right (only circular element)

12.5 Section Header Pattern

<div class="text-center mb-16">
  <!-- Eyebrow Badge -->
  <div class="inline-block px-4 py-2 bg-[#FFE600] border-2 border-black
              shadow-[4px_4px_0_0_rgba(0,0,0,1)] mb-6">
    <span class="text-xs font-bold uppercase tracking-wider">
      Use Cases
    </span>
  </div>

  <!-- Main Heading -->
  <h2 class="text-4xl md:text-5xl font-bold tracking-tight mb-4">
    BUILT FOR<br/>YOUR WORKFLOW
  </h2>

  <!-- Optional Description -->
  <p class="text-xl text-gray-700 max-w-2xl mx-auto">
    Supporting text that explains the section
  </p>
</div>

Pattern Structure:

Colored badge (yellow/blue)
Large uppercase heading with line breaks
Optional gray description
Center-aligned
Bottom margin: 64px (mb-16)

<div class="bg-[#FFE600] py-2 px-4 text-center border-b border-black"
     style="border-width: 3px;">
  <p class="text-sm font-bold">
    🎉 Announcing MotherDuck Cloud -
    <a href="#" class="underline hover:no-underline">Learn More</a>
  </p>
</div>

Specifications:

Yellow background (full width)
3px thick black bottom border
Small text (14px)
Emoji prefix
Underlined link with hover removal

13. Responsive Design System

Breakpoint System

Breakpoint	Min Width	Tailwind Prefix	Usage
Mobile	0px	(default)	Base mobile styles
Small	640px	`sm:`	Large phones
Medium	768px	`md:`	Tablets (MAIN breakpoint)
Large	1024px	`lg:`	Desktops
XL	1280px	`xl:`	Large desktops

Primary Breakpoint: md: (768px) - Most responsive changes happen here.

Responsive Patterns

Grid Responsiveness

<!-- Mobile: 1 col → Desktop: 2 cols → Large: 4 cols -->
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">

<!-- Mobile: 1 col → Desktop: 2 cols -->
<div class="grid md:grid-cols-2 gap-12 items-center">

<!-- Mobile: 1 col → Desktop: 3 cols -->
<div class="grid md:grid-cols-3 gap-8">

Typography Scaling

<!-- Hero: 48px → 60px → 72px -->
<h1 class="text-5xl md:text-6xl lg:text-7xl font-bold">

<!-- Section: 36px → 48px -->
<h2 class="text-4xl md:text-5xl font-bold">

<!-- Body: 18px → 20px -->
<p class="text-lg md:text-xl text-gray-700">

Padding Adjustments

<!-- Container: 16px → 24px → 32px -->
<div class="px-4 sm:px-6 lg:px-8">

<!-- Section: 64px → 96px -->
<section class="py-16 md:py-24">

<!-- Navigation: 70px → 90px -->
<div class="h-[70px] md:h-[90px]">

Visibility Control

<!-- Hidden on mobile, visible on desktop -->
<div class="hidden md:flex">

<!-- Visible on mobile, hidden on desktop -->
<div class="md:hidden">

<!-- Desktop navigation -->
<nav class="hidden md:flex items-center space-x-8">

<!-- Mobile menu button -->
<button class="md:hidden">

Flex Direction

<!-- Mobile: Stack vertical → Desktop: Horizontal -->
<div class="flex flex-col sm:flex-row gap-4">
  <button>Primary</button>
  <button>Secondary</button>
</div>

14. Accessibility Standards

Color Contrast

WCAG AA Compliance

Combination	Ratio	Level	Usage
Black on Cream (#000 on #F5F1E8)	16.5:1	AAA	Body text
Gray 700 on Cream (#374151 on #F5F1E8)	11.2:1	AAA	Descriptions
White on Blue (#FFF on #4DA6FF)	3.1:1	AA Large	Button text
Black on Yellow (#000 on #FFE600)	1.8:1	⚠️ Decorative	Badges only

Note: Yellow badges with black text are used decoratively, not for essential information.

Semantic HTML

<!-- Main Navigation -->
<header>
  <nav>
    <a href="/">Logo</a>
    <ul>
      <li><a href="#">Product</a></li>
    </ul>
  </nav>
</header>

<!-- Main Content -->
<main>
  <section>
    <h1>Page Title</h1>
  </section>
</main>

<!-- Footer -->
<footer>
  <nav>
    <a href="#">Links</a>
  </nav>
</footer>

Interactive Elements

Focus States

All interactive elements should have visible focus (browser default):

:focus {
  outline: 2px solid #4DA6FF;
  outline-offset: 2px;
}

Link Clarity

<!-- Underlined links in prose -->
<a href="#" class="underline hover:no-underline">Learn More</a>

15. Browser Compatibility

Supported Browsers

Chrome/Edge: 90+
Firefox: 88+
Safari: 14+
Mobile Safari: iOS 14+
Chrome Android: 90+

Fallbacks

Custom colors: Using hex values (universal support)
Box shadows: Hard shadows work everywhere
CSS animations: Smooth degradation
Flexbox/Grid: Full support in all target browsers

16. Design Tokens Export

CSS Custom Properties

For integration into other frameworks:

:root {
  /* Brand Colors */
  --color-yellow: #FFE600;
  --color-blue: #4DA6FF;
  --color-cream: #F5F1E8;
  --color-black: #000000;
  --color-white: #FFFFFF;

  /* Text Colors */
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-tertiary: #6B7280;

  /* Spacing */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 0.75rem;  /* 12px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */

  /* Typography */
  --font-mono: 'Space Mono', monospace;
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-5xl: 3rem;     /* 48px */
  --font-size-7xl: 4.5rem;   /* 72px */

  /* Borders */
  --border-width-thick: 2px;
  --border-width-thicker: 3px;
  --border-radius: 0px;         /* Sharp corners */
  --border-radius-full: 9999px; /* Circles */

  /* Shadows (Brutalist) */
  --shadow-sm: 4px 4px 0 0 rgba(0, 0, 0, 1);
  --shadow-md: 6px 6px 0 0 rgba(0, 0, 0, 1);
  --shadow-lg: 8px 8px 0 0 rgba(0, 0, 0, 1);

  /* Transitions */
  --transition-fast: 200ms ease;
  --transition-base: 300ms ease;
}

17. Component Frequency Analysis

Reusable Component Priority

Component	Frequency	Reusability	Extract Priority
Feature Card	12+	Very High	⭐⭐⭐ High
Button (Primary)	15+	Very High	⭐⭐⭐ High
Button (Secondary)	10+	Very High	⭐⭐⭐ High
Eyebrow Badge	8+	High	⭐⭐⭐ High
Section Container	10+	Very High	⭐⭐ Medium
Testimonial Card	3	Medium	⭐⭐ Medium
Stats Card	3	Medium	⭐⭐ Medium
Data Row	3	Medium	⭐ Low
Code Editor	1	Low	⭐ Low
Navigation	1	Low	⭐ Low

18. Future Enhancements

Potential Additions

Dark Mode Variant

While not in current design, could add:

@media (prefers-color-scheme: dark) {
  :root {
    --color-cream: #1a1a1a;
    --text-primary: #ffffff;
  }
}

Animation Library Expansion

Slide-in on scroll
Stagger animations for cards
Hover lift on stats

Component Framework

Port to:

React components
Vue components
Web Components

19. Maintenance Guidelines

Design System Versioning

Current Version: 2.0.0 (Brutalist Redesign)
Previous Version: 1.0.0 (Soft Rounded Design)
Review Frequency: Quarterly

Update Checklist

Verify all components have sharp corners (0px radius)
Check all shadows are hard-edged (no blur)
Confirm 2px black borders on all elements
Test press effects on all interactive elements
Validate responsive breakpoints
Ensure Space Mono font loads correctly
Check yellow (#FFE600) and blue (#4DA6FF) consistency

Breaking Changes Log

v2.0.0: Removed all rounded-lg and rounded classes
v2.0.0: Changed all shadows to hard offset (no blur)
v2.0.0: Enforced 2px black borders on all components

Conclusion

This brutalist style guide represents a bold departure from traditional web design, embracing:

Sharp geometric forms (zero border radius)
Hard shadows (offset with no blur)
High contrast borders (thick black outlines)
Vibrant accent colors (yellow and blue)
Monospace typography (Space Mono everywhere)
Playful illustrations (duck emojis)

Core Philosophy: “Make it loud, make it bold, make it unforgettable.”

All measurements, colors, and patterns documented here are extracted from the production codebase (motherduck_2.html) and verified for pixel-perfect accuracy.

For implementation questions or design updates, refer to the HTML source at: repos/aliens-made-this/pixel-perfect/motherduck_2.html

Last Updated: 2025 Design System Version: 2.0.0 Brutalist Maintainer: MotherDuck Design Team

This site is open source. Improve this page.

aliens-made-this

MotherDuck Brutalist Style Guide v2.0

1. Overview

Design Philosophy

Design Principles

Tech Stack

2. Color Palette

Primary Brand Colors

Neutral Palette

Accent Colors (Syntax Highlighting & UI)

Color Usage Rules

Background Hierarchy

Border Standards

Shadow System (Brutalist)

3. Typography System

Font Family: Space Mono (Monospace)

Font Weights

Type Scale

Desktop Hierarchy (Base: 16px)

Mobile Scaling

Typography Patterns

Hero Title Pattern

Section Header Pattern

Body Text Pattern

Letter Spacing

Text Transformation

4. Spacing System

Base Unit: 4px (0.25rem)

Spacing Scale

Component Spacing Patterns

Button Padding

Card Padding

Section Padding (Vertical)

Grid Gaps

Stack Spacing

Container System

Layout Spacing Guidelines

Vertical Rhythm

5. Component Styles

5.1 Buttons

Primary Button (Blue)

Secondary Button (White)

Dark Button (Footer CTA)

Ghost Button (Navigation)

5.2 Cards

Feature Card (Cream Background)

White Card (Hero Code Editor)

Data Source Card (Colored Background)

5.3 Badges & Labels

Eyebrow Badge (Section Label)

Result Badge (Yellow Highlight)

5.4 Navigation

Sticky Header

Navigation Link

5.5 Code Editor Display

5.6 Testimonial Card

6. Shadows & Elevation

Brutalist Shadow System

Shadow Scale

Hover State Transformation

Shadow Examples by Component

Static vs Interactive Shadows

7. Border Radius

The Golden Rule: ZERO BORDER RADIUS

Exceptions: Circular Elements ONLY

Component Border Radius

Visual Comparison

8. Animations & Transitions

Transition System

Hover Effects

Button Press Effect (Most Common)

Card Hover Effect

Color Change (Links, Ghost Buttons)

Custom Animations (CSS)

Floating Animation (Decorative Elements)

Drop Shadow (Illustrations)

Animation Timing

No JavaScript Animations

9. Opacity & Transparency

Opacity Usage