RED PANDA

Overview

RED PANDA is a character-driven personal website that embodies **Editorial Maximalism** — a design philosophy that celebrates bold typography, high-contrast color blocking, and unapologetic visual presence. The brand serves a playful, conversational tone while maintaining sophisticated visual hierarchy through the strategic use of a vivid red (#c00000) accent against pure black (#111111) and white (#ffffff). The emotional response is immediate and engaging: the oversized DrukWide headline 'PANDA' (210px, 900 weight) dominates the viewport, while the red background creates an almost poster-like intensity that commands attention without feeling corporate or sterile.

The voice is intimate, witty, and self-aware — a red panda speaking directly to visitors with personality and charm. Vocabulary patterns include casual colloquialisms ('I'm quite a dexterous guy', 'Don't forget the apples'), gentle self-deprecation, and conversational asides that feel like a friend showing you around their home. The brand personality rejects minimalism in favor of maximalist expression: every element has presence, every color choice is deliberate, and negative space is used sparingly to amplify impact. Example sentence in brand voice: 'I'm incredibly friendly, extremely beautiful, and very modest — also known as the shining cat of the tree, or the cat-alike bear.'

Colors

The color system is built on a **high-contrast, editorial foundation** where primary (#c00000) functions as the brand's signature accent — deployed on CTAs, interactive elements, and key visual moments to create visual punctuation. This deep, warm red is not a bright neon but a confident, almost wine-like crimson that evokes both playfulness and sophistication. Secondary (#111111) is the dominant text and structural color, providing the visual weight that grounds the design; it appears in headlines, borders, and the panda illustration itself. Surface colors (#ffffff, #f5f5f5, #e9ecef) provide breathing room and ensure legibility, while tertiary (#ff8562, #fa876b) serves as a supporting warm accent for secondary CTAs and highlights.

Usage rules: Primary (#c00000) is reserved for primary ca

Typography

The type system pairs **DrukWide** (a bold, geometric sans-serif) with **Manrope** (a humanist sans-serif) to create a distinctive visual dialect: DrukWide handles all display and headline layers (display at 210px/900, headline-lg at 72px/900, headline-md at 48px/900), delivering the brand's maximalist, poster-like personality through extreme weight and tight letter-spacing (-0.04em to -0.02em). Manrope carries body copy and labels (body-md at 16px/400, label-md at 14px/600), providing warmth and readability at smaller scales. The pairing communicates 'bold editorial vision paired with accessible, human-centered content.' Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to small labels (label-sm, 12px) when placed over busy backgrounds or the red hero section to ensure legibility. Headline

Layout

The layout operates on a **12-column fluid grid** with a fixed container max-width of 1200px, centered on larger viewports. The page rhythm emphasizes dramatic section breaks: the hero occupies a full viewport with the oversized 'PANDA' headline (210px), followed by content sections separated by lg spacing (40px) to create visual rest. The gutter is consistently 24px, applied as left/right padding on the container and between grid columns. White-space philosophy is **selective maximalism** — rather than the minimalist approach of sparse, equal spacing, RED PANDA uses white-space strategically to frame and elevate key content: large breathing room around headlines, tighter spacing within body sections, and generous margins between distinct content blocks. Container max-width of 1200px ensur

Elevation & Depth

Depth is conveyed through **subtle shadow layering and strategic color shifts** rather than aggressive drop shadows. The elevation system uses three levels: Level 1 (Base) has no shadow — flat surfaces like body text and the background. Level 2 (Standard Cards) applies elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)) to create gentle separation from the surface, paired with a 1px border at surface-container-high (#d0d0d0) to define edges crisply. Level 3 (Elevated/Modals) applies elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12)) with a slightly larger blur radius and spread, creating pronounced depth

Shapes

The shape philosophy is **Architectural Sharpness with Minimal Softness** — a deliberate rejection of rounded-corner softness in favor of crisp, defined edges that reinforce the editorial, poster-like aesthetic. Border-radius follows a minimal scale: sm (3px) for subtle softening on small interactive elements like badges, DEFAULT (4px) for standard buttons and inputs to provide just enough softness for usability without compromising sharpness, md (8px) for larger cards and containers, lg (12px) for modals and prominent surfaces, xl (16px) for hero sections and full-width containers, and full (

Components

Action Elements Buttons are the primary interactive layer. **button-primary** uses {colors.primary} (#c00000) background with {colors.on-primary} (#ffffff) text, {typography.label-md} (14px/600), {rounded.DEFAULT} (4px), and padding of 12px 24px with a 44px height. On hover, **button-primary-hover** transitions to {colors.primary-container} (#ff4444) with a 200ms cubic-bezier(0.4, 0, 0.2, 1) easing, creating a subtle brightening effect. **button-secondary** is transparent with a 2px solid border at {colors.primary} (#c00000), same text color, and identical padding/height; on hover, **button-secondary-hover** inverts to a filled primary button (background #c00000, text #ffffff). Both button variants use font-weight: 600 and letter-spacing: 0.01em for crisp, readable labels.

Contain

Do's and Don'ts

**Do**

• Do use the primary red (#c00000) exclusively for primary CTAs and brand-critical interactive moments — overuse dilutes its impact and confuses hierarchy.
• Do pair DrukWide headlines with Manrope body copy to maintain the editorial-meets-accessible personality; never mix both typefaces at the same scale.
• Do apply 4px border-radius consistently across buttons, inputs, and cards to maintain the sharp-yet-approachable aesthetic; avoid rounding beyond 16px except for badges.
• Do use the lg spacing (40px) between major content sections to create visual rest and prevent the design from feeling cramped despite its maximalist character.
• Do apply the 200ms cubic-bezier(0.4, 0, 0.2, 1) transition timing to all interactive state changes (hover, focus, active) for consistent, snappy feedback.

**Don't**

• Don't use secondary colors (#111111, #ff8562) as primary CTAs — they lack the visual punch and brand distinctiveness of the red accent.
• Don't apply shadows heavier than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) — the design relies on flat, bold color blocking, not depth illusion.
• Don't mix rounded corners (>8px) with sharp corners (0px) in the same component family; maintain consistency within button, card, and input groups.
• Don't use more than two typefaces; DrukWide and Manrope are the complete system — introducing a third creates visual confusion.
• Don't apply text-shadow or text-stroke to body copy; reserve these techniques for small labels over busy backgrounds only, and use subtle values (0 2px 4px rgba(0, 0, 0, 0.15)) to avoid cartoonish effects.