Ape Society

Overview

Ape Society is a Web3 community brand anchored in irreverent humor and sophisticated minimalism. The design system embraces a "Monochromatic Maximalism" aesthetic—a paradox where the interface achieves visual impact through restraint: a near-black canvas (#242424) paired with pure white typography (#ffffff), punctuated by strategic accent colors (gold #d4af37 and electric blue #4a90e2) derived from the brand's iconic ape mascot. The emotional response is one of confident irreverence: the brand feels both playful and serious, welcoming crypto natives while maintaining institutional credibility.

The voice is direct, witty, and unapologetic. Ape Society speaks in short declarative sentences with occasional humor; vocabulary leans into Web3 terminology ("onchain," "Base," "journey") without condescension. The brand personality is that of a community leader who knows the room and doesn't explain the joke. Example sentence in brand voice: "It's time for a new Base—we're moving where the action is."

Colors

The color system operates on a principle of maximum contrast and minimal distraction. Primary (#ffffff) is reserved exclusively for interactive elements—links, CTAs, and text—ensuring every clickable element reads with crystal clarity against the dark surface. The surface stack ranges from #191919 (surface-dim, used for footer and recessed areas) through #242424 (surface, the canonical background) to #333333 (surface-container-highest, for elevated modals). This narrow range (only 26 hex steps) creates visual hierarchy through subtle depth rather than dramatic color shifts, reinforcing the minimalist aesthetic.

Secondary (#d4af37, a warm gold) appears sparingly on accent elements within the hero imagery and brand marks—never on interactive UI, preserving its symbolic weight. Tertiary (#4a

Typography

The type system uses a single typeface—Classica Pro—across all scales, reinforcing brand cohesion and avoiding visual fragmentation. Classica Pro is a geometric sans-serif with distinctive letterforms that convey both precision and personality; its proportions feel contemporary without trendy affectation. The hierarchy is built on weight (400 regular, 700 bold) and size alone, with no italic or additional weights. Display and headline scales (50px–60px, 700 weight, -0.04em to -0.03em letter-spacing) are reserved for hero statements and major section breaks; body scales (16px–24px, 400 weight) handle narrative content. Label scales (13px–15px, 400 weight, +0.02em to +0.03em letter-spacing) are used for UI labels, navigation, and metadata. Line-height is set to 1.1–1.4 depending on scale, wi

Layout

The layout uses a fixed-width container model with max-width: 1000px, centered via margin: 0 auto. The grid is conceptually 12 columns but implemented fluidly via flexbox, allowing responsive reflow without explicit breakpoints in most cases. Horizontal padding is {spacing.gutter} (24px) on desktop, reducing to {spacing.md} (12px) on mobile. Vertical rhythm is established through section padding: {spacing.lg} (40px) for major section separation, {spacing.md} (24px) for component-level spacing, and {spacing.sm} (12px) for internal element spacing. The header uses py-[30px] (30px vertical padding) to create a distinct visual anchor. White-space is aggressive—sections are separated by full {spacing.lg} gaps, and internal component padding never falls below {spacing.sm}. This creates a sense o

Elevation & Depth

Elevation in this system is achieved through shadow and border definition rather than color shifts. The shadow stack uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle depth on hover states, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns, and lg (0 8px 24px rgba(0, 0, 0, 0.2)) for modals and elevated surfaces. All interactive surfaces receive a 1px border at {colors.outline-variant} (#505050) to define edges in the dark environment. The header uses a 2px bottom border at {colors.outline} (#697085) to anchor it visually. Hover states elevate via shadow increas

Shapes

The shape philosophy is "Architectural Minimalism"—sharp, rectilinear forms that echo brutalist design principles while maintaining approachability through subtle rounding. Buttons and inputs use {rounded.DEFAULT} (0.5rem / 8px) for a clean, modern feel; cards and containers use {rounded.lg} (1rem / 16px) for slightly more softness; modals and popovers use {rounded.xl} (1.5rem / 24px) to signal elevation and importance. The hero image frame uses sharp 90-degree corners with a white border (no rounding), emphasizing the geometric composition and creating visual contrast with the softer UI eleme

Components

Action Elements Buttons follow a two-tier system: primary (solid white background, dark text, {rounded.DEFAULT}, 44px height, 12px 24px padding) for main CTAs, and secondary (transparent background, white text, 1px outline at {colors.outline}, same dimensions) for supporting actions. Primary buttons transition to opacity: 0.8 on hover (200ms ease-out), avoiding color shift to maintain the monochromatic aesthetic. Links are underlined white text with the same opacity transition. All interactive elements use transition: all 200ms ease-out to provide smooth feedback without feeling sluggish.

Containers & Surfaces Cards use {colors.surface-container} background, {rounded.lg} rounding, {spacing.md} padding, and a 1px border at {colors.outline-variant}. Standard cards receive {elevation

Do's and Don'ts

**Do**

• Do use pure white (#ffffff) for all primary CTAs and interactive text—it's the brand's signature accent and ensures maximum contrast.
• Do maintain the 2px border-bottom on the header at #697085 as a visual anchor that appears on every page.
• Do apply {spacing.lg} (40px) vertical padding between major sections to create breathing room and prevent visual clutter.
• Do use Classica Pro at 700 weight for all headlines and 400 weight for body copy—no other weights or typefaces.
• Do transition all interactive elements over 200ms with ease-out timing to provide smooth, responsive feedback.
• Do use the gold accent (#d4af37) sparingly—only in hero imagery or brand marks, never on UI controls.

**Don't**

• Don't use color to indicate state changes—use shadow elevation and opacity instead to maintain the monochromatic aesthetic.
• Don't apply border-radius to major layout containers or the body element; reserve rounding for buttons, cards, and inputs only.
• Don't exceed {spacing.lg} (40px) for section padding or the layout will feel disconnected; use {spacing.md} (24px) as the default.
• Don't introduce new typefaces or weights; Classica Pro 400/700 is the complete type system.
• Don't use box-shadow values outside the defined elevation scale (sm/md/lg); custom shadows break visual consistency.
• Don't apply text-shadow to body copy or large headlines; reserve it only for small labels over photographic backgrounds.