Bored Ape Yacht Club

Overview

Bored Ape Yacht Club embodies a **Stark Minimalism** aesthetic—a deliberate rejection of decorative excess in favor of high-contrast clarity and architectural precision. The design system prioritizes pure black (#000000) as the dominant accent, paired with a near-white surface (#f8fafc), creating a visual language that feels both premium and uncompromising. This is a brand for collectors who value directness: every pixel serves function, every interaction is instantaneous, and the interface recedes to let the digital assets (the apes themselves) command attention. The emotional response is one of exclusivity and control—the UI feels like a private members' club rendered in code, where navigation is intuitive because it refuses to be decorative.

The voice is terse, authoritative, and Web3-native. Vocabulary skews toward action verbs (BUY, BECOME, CONNECT) rendered in all-caps sans-serif, with letter-spacing pushed to 0.048em for a technical, almost stencil-like quality. Tone is never apologetic or explanatory—it assumes the user knows what they want. Example sentence: "BECOME A MEMBER, BUY AN APE." Notice the period is omitted; the statement is a command, not a question.

Colors

The color system operates on a **binary-plus-accent** model. Primary (#000000) is pure black, used exclusively for CTAs, active states, and the most critical interactive elements—it is the brand's signature accent and appears sparingly to maximize impact. On-primary (#ffffff) provides absolute contrast for text and icons atop black surfaces. The surface stack ranges from near-white (#f8fafc) as the default background through warm beiges (#d9d3ca, #c2b9a9) that evoke luxury materials (linen, parchment) without sacrificing legibility. Secondary (#fb2c36) is a vivid red reserved for error states, alerts, and high-priority warnings—it appears in the RainbowKit error button and connection status indicators. Tertiary (#f99c00) is a warm amber used for secondary highlights and badge accents. The

Typography

The type system pairs two distinct voices: **drukText** (a geometric, high-contrast display family) for headlines and brand moments, and **Inter** (a neutral, highly legible sans-serif) for body and UI text. Display and headline-lg use drukText at 72px and 48px respectively, with aggressive negative letter-spacing (-0.04em, -0.02em) to create a compressed, almost stencil-like appearance—this reinforces the brand's no-nonsense aesthetic. Body text uses Inter at 16px with 24px line-height and 0em letter-spacing, ensuring readability at small sizes. Labels are set in Inter 10px, 700 weight, with 0.048em letter-spacing (tracking-widest in Tailwind), creating the technical, all-caps feel seen in navigation and CTAs. When labels appear over complex backgrounds (e.g., the WebGL canvas), apply tex

Layout

The layout uses a **fixed-width container model** with max-width: 1144px, centered on the viewport. The grid is 12 columns with 24px gutters (spacing.md), collapsing to single-column on mobile (max-width: 768px). Spacing follows a 4px base unit: xs (4px), sm (12px), md (24px), lg (40px), xl (64px). Section separation uses lg spacing (40px) for major content blocks, md spacing (24px) for related groups. The header is sticky (position: sticky, top: 0, z-index: 40) with a transparent background that becomes visible only when scrolled. The hero section uses a full-viewport canvas (100svh, 100svw) for the WebGL liquid animation, with the primary CTA positioned absolutely at bottom: 12px, right: 4px on mobile, transitioning to bottom: 4px, right: auto on desktop. All interactive elements maintai

Elevation & Depth

Depth is achieved through a **three-tier shadow system** without relying on color shifts. Level 1 (Base/Canvas): no shadow; the WebGL background provides visual interest. Level 2 (Standard Cards/Dropdowns): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, input fields, and dropdown panels. This shadow is subtle enough to maintain the minimalist aesthetic while creating clear separation from the background. Level 3 (Modals/Elevated Content): box-shadow: 0 4px 50px rgba(0, 0, 0, 0.16), used for modal dialogs and the RainbowKit connection modal. The increased blur radius (50px vs 8px)

Shapes

The shape philosophy is **Architectural Sharpness with Selective Softness**. Primary buttons and CTAs use rounded: full (border-radius: 9999px), creating a pill shape that feels modern and clickable—this is the most recognizable interactive affordance. Cards and modals use rounded: DEFAULT (0.5rem / 8px), a subtle radius that prevents harsh corners without introducing organic curves. Input fields and smaller UI elements use rounded: DEFAULT (8px) or rounded: md (12px), maintaining consistency with the card system. Dropdown panels use rounded: DEFAULT (4px) in the custom select component, match

Components

Action Elements

**Buttons** come in three variants: primary (black background, white text, full radius, 12px 24px padding), secondary (transparent background, black text, 1px black border, full radius), and ghost (transparent, no border, smaller padding 8px 16px). Primary buttons use height: auto with minHeight: 40px to accommodate icon + text. All buttons transition on opacity or background-color over 200ms cubic-bezier(0.4, 0, 0.2, 1). Hover state for primary buttons reduces opacity to 0.8 or shifts background to primary-fixed (#1a1a1a). The primary CTA "BECOME A MEMBER, BUY AN APE" uses label-sm typography (10px, 700 weight, 0.048em letter-spacing) and appears in the header navigation and as a floating action at the bottom of the hero section.

Containers & Surfaces

**Cards**

Do's and Don'ts

**Do**

• Do use pure black (#000000) for all primary CTAs and active states—it is the brand's signature accent and must never be diluted with opacity or color shifts.
• Do maintain 24px (spacing.md) gutters and padding inside cards; this rhythm creates visual breathing room and prevents the interface from feeling cramped.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to all floating elements (cards, dropdowns, modals) for consistent depth without color-based hierarchy.
• Do use drukText for display and headline-lg to reinforce brand identity; Inter is for everything else (body, labels, UI).
• Do render all navigation and CTA text in uppercase with 0.048em letter-spacing (label-sm) to create the technical, stencil-like aesthetic.
• Do transition interactive states over 200ms cubic-bezier(0.4, 0, 0.2, 1); this easing feels snappy without being jarring.

**Don't**

• Don't use rounded corners larger than 1.5rem (24px) on any component; the brand aesthetic rejects organic, flowing curves.
• Don't apply color-tinted shadows (e.g., rgba(255, 0, 0, 0.1)); always use pure black shadows to maintain the stark, high-contrast look.
• Don't place text directly on the WebGL canvas without text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); legibility is non-negotiable.
• Don't mix drukText and Inter in the same headline; pick one and commit to it for visual consistency.
• Don't use secondary (#fb2c36) or tertiary (#f99c00) colors on primary buttons; black-on-white is the only acceptable treatment.
• Don't reduce the container max-width below 1144px on desktop; the layout is designed for this specific width and narrower containers break the visual rhythm.