MockClub

Overview

MockClub embodies a **Print-Brutalist Minimalism** aesthetic—a deliberate rejection of digital softness in favor of tactile, press-printed authenticity. The brand serves career-switchers, bootcamp graduates, and anyone preparing for a real interview, transforming the anxiety of interview prep into a human-centered, volunteer-powered ritual. The UI evokes a membership card or press credential: bold typography (Fraunces serif at 80px with -0.028em letter-spacing), high-contrast black-and-white layouts, and deliberate use of the signature vermilion accent (#d8452a) as a stamp of authenticity. The emotional response is one of trust and directness—no algorithms, no AI, no hidden upsell—just a person across from you who has hired people and is giving you an hour.

The brand voice is precise, unpretentious, and slightly irreverent. Vocabulary patterns favor concrete nouns ("volunteer," "hour," "real," "practice") over abstract marketing speak. Tone is conversational but authoritative—the copy reads like a manifesto written by engineers, not marketers. Example sentence in brand voice: "An hour, start to finish. No account fees, no upsell, no bot."

Colors

The color system is rooted in **high-contrast, print-ready minimalism**. Primary (#d8452a, a warm burnt-orange vermilion) is the sole accent—used exclusively on CTAs ("Join the club"), focus states, and the iconic circular logo stamp. This color appears sparingly but commands attention; it is never used for backgrounds or secondary UI. The palette is otherwise monochromatic: surfaces range from pure white (#ffffff) through warm off-whites (#fafafa, #f5f5f5) to near-black (#171717, #262626). Text is always either pure black (#0a0a0a) or deep charcoal (#171717) for maximum legibility and print fidelity. Borders and dividers use a neutral gray (#e5e5e5, #a1a1a1) to suggest structure without visual noise. The secondary color (#262626, near-black) is used for secondary CTAs and supporting text.

Typography

The type system pairs **Fraunces** (a high-contrast serif with variable weights and optical sizing) for display and headlines with **Archivo** (a geometric sans-serif) for body and UI text. This pairing creates visual hierarchy through contrast rather than size alone: Fraunces at 80px, 600 weight, -0.028em letter-spacing commands the hero section with print-magazine authority, while Archivo at 16px, 400 weight maintains readable body copy. Fragment Mono (uppercase, 0.22em letter-spacing) is reserved for labels and stamps, evoking typewriter precision. Apply text rendering: use -webkit-font-smoothing: antialiased on all text for crisp edges. On small labels over busy backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibility. Headline-md (32px, 600 weight, Fraunces)

Layout

The layout follows a **fixed 12-column grid** with a max-width of 1280px, centered on the viewport. The page rhythm is built on a 8px unit system with semantic spacing: lg (40px) separates major sections, md (24px) separates cards and components, sm (12px) separates inline elements. The hero section uses a two-column split: the left column (60%) holds the headline and CTAs, the right column (40%) displays the membership card mockup. Gutters are 20px on desktop, 16px on tablet. White space is aggressive and intentional—the background grid (visible at 1px intervals) reinforces the print aesthetic and prevents visual clutter. Container padding is always {spacing.gutter} (20px) on all sides. The page avoids centered text except in the hero; body copy is left-aligned for scannability. Sections

Elevation & Depth

Depth is achieved through **tactile, press-printed layering** rather than soft shadows. Level 1 (Base): the background is pure #fafafa with a subtle grain texture (opacity 0.32, mix-blend-mode: multiply) applied via a fixed pseudo-element, evoking paper stock. Level 2 (Cards & Modals): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) creates a subtle lift; cards have a 1px solid border at rgba(0, 0, 0, 0.08) to define edges. Level 3 (Pressed/Hover): the press-shadow effect (5px 5px 0 0 rgba(0, 0, 0, 0.1)) mimics a physical stamp or embossed print; on hover, this expands to 9px 9px 0 0 with the elemen

Shapes

The shape philosophy is **Architectural Sharpness with Intentional Softness**—corners are nearly square (0.25rem / 4px) by default, evoking printed business cards and credentials, but buttons and interactive elements use 0.5rem (8px) for a touch of approachability. Cards use 0.5rem; badges and stamps use 0.25rem to emphasize their credential-like nature. Inputs use 0.5rem with a bottom-border-only style (no full border) to suggest a typewriter or form field. The full radius (9999px) is used sparingly for circular badges or avatar containers. This graduated approach—sharp for structural element

Components

Action Elements Buttons use a **press-printed stamp aesthetic**. Primary buttons ("Join the club") are solid #d8452a with 1.5px border, 12px 32px padding, 48px height, and a 5px 5px offset shadow (box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.1)). On hover, the shadow expands to 9px 9px 0 0 and the button translates -3px -3px, creating a tactile press effect with a 220ms cubic-bezier(0.2, 0.8, 0.2, 1) transition. Secondary buttons ("I'll give an hour") are transparent with a 1.5px solid border in {colors.on-surface}, same padding and height, no shadow. Hover state: background becomes {colors.surface-container-high} and text color shifts to {colors.primary}. All buttons use {typography.label-md} (14px, 500 weight, Archivo).

Containers & Surfaces Cards (membership card, track cards) use a

Do's and Don'ts

**Do**

• Do use Fraunces serif for headlines and display text; its high contrast and optical sizing reinforce the print-brutalist aesthetic and ensure legibility at large sizes.
• Do apply the vermilion accent (#d8452a) exclusively to CTAs, focus states, and the logo stamp; its scarcity makes it command attention and builds brand recognition.
• Do maintain aggressive white space (40px between sections, 20px gutters) to echo print magazine layouts and prevent visual fatigue.
• Do use the press-shadow effect (5px 5px offset, 220ms transition) on interactive elements to create tactile, memorable hover states that feel like stamped credentials.
• Do pair high-contrast black text (#171717) on white backgrounds for maximum legibility and print fidelity; avoid gray text on gray backgrounds.

**Don't**

• Don't use the primary color (#d8452a) for backgrounds, secondary UI, or decorative elements; reserve it exclusively for CTAs and focus states to maintain visual hierarchy.
• Don't apply soft shadows, blur, or glassmorphism; the aesthetic is print-brutalist, not digital-ethereal—use hard-edged shadows and opaque layers only.
• Don't center-align body copy or use justified text; left-align all paragraphs for scannability and to echo print magazine layouts.
• Don't use rounded corners larger than 1rem (16px) except for full-radius badges; sharp corners (0.25rem–0.5rem) reinforce the credential-like, business-card aesthetic.
• Don't introduce new accent colors or gradients; the palette is intentionally monochromatic with one vermilion accent—adding secondary colors dilutes brand distinctiveness.