Fat-Pie

Overview

Fat-Pie is a cult animation studio's digital storefront, embodying the aesthetic of early-2000s web design—a deliberate, nostalgic choice that honors the brand's internet-native origins and the surreal, darkly comedic tone of David Firth's work. The interface embraces "Retro-Digital Maximalism": a dense, compartmentalized layout with bold color blocking (navy backgrounds, cyan accents, pale blue content zones) that feels like stepping into an archived corner of the web. The emotional response is one of discovery and intimacy—users navigate a hand-crafted, deliberately non-corporate space where every pixel choice signals authenticity and creative control. The brand personality is irreverent, precise, and unapologetically niche. Voice: direct, self-aware, occasionally absurdist. Example: "Hello. My name is David Firth and I make things every day."

Colors

The color palette is anchored in a deep navy (#252f54) that dominates the page background, creating a contained, almost claustrophobic digital environment. The primary accent is cyan (#0099cc), used sparingly on headings, links, and call-to-action text—this is the brand's signature interactive color, drawing the eye to navigation and key content. The secondary palette includes a muted periwinkle-blue (#97b5d5) for content containers and a brighter purple (#9999ff) for hover states and tertiary accents. Black (#000000) serves as a structural divider and heading background, while white (#ffffff) provides contrast for body text and menu items. The disabled/neutral state uses light gray (#e9ecef) for form elements and (#6c757d) for muted text. All surfaces maintain a 1px solid border in either

Typography

The type system uses Verdana and Arial exclusively—a deliberate choice that anchors the design in early-web authenticity rather than contemporary web fonts. Display and headline sizes (60px–32px) use bold weight (700) with tight line-height (68px–40px) to create visual impact and hierarchy. Body text scales from 14px to 12px at 400 weight, with generous line-height (22px–18px) to maintain readability over the busy background. Labels and menu items are consistently small (10px–11px) and bold (700), with increased letter-spacing (0.05em–0.08em) to enhance legibility at small sizes. All interactive text (links, buttons, menu items) use the label-md or label-sm styles with 700 weight to signal clickability. When small labels appear over the cyan or purple backgrounds, apply a subtle text-shado

Layout

The page uses a fixed-width, single-column layout with a 750px container centered on the page. The grid is conceptually 12 columns but visually organized as three zones: a 120px left sidebar (menu), a 400px central content area (news), and a 120px right sidebar (advertisements). The spacing scale is conservative: 4px unit base, with 8px gutters between major sections and 12px padding within cards. Section separation uses 20px margins (lg spacing) to create breathing room between news items and content blocks. The container max-width of 750px is fixed—no responsive scaling—reinforcing the retro-web aesthetic and ensuring consistent visual rhythm across all viewport sizes. White-space is used strategically: the navy background provides negative space around the pale-blue content container, w

Elevation & Depth

Depth is conveyed through a flat, layered approach rather than soft shadows. The primary visual hierarchy is achieved through color blocking and borders: the navy background (#252f54) sits behind the periwinkle container (#97b5d5), which sits behind white form elements (#ffffff). Subtle shadows are used sparingly: dropdown panels and floating elements receive a 0 3px 8px rgba(0, 0, 0, 0.15) shadow to lift them slightly from the page. The news container has a 1px solid black border on all sides, creating a hard edge that separates it from the background. Menu sections use a 1px solid outline in

Shapes

The shape philosophy is "Minimal-Technical": border-radius is used sparingly and only where necessary for usability. The default radius is 4px, applied to dropdown panels, form inputs, and card corners to soften the hard edges of the layout without introducing organic curves. Buttons and interactive elements use the same 4px radius, maintaining consistency with the overall grid-based structure. Menu sections and content containers use sharp 0px corners (no radius), reinforcing the compartmentalized, architectural feel. The reasoning is functional: the retro-web aesthetic demands clean lines an

Components

Action Elements Buttons use a 32px height with 8px vertical and 16px horizontal padding, set in label-md weight (11px, 700). Primary buttons have a cyan background (#0099cc) with white text and a 1px black border. On hover, the background shifts to a darker cyan (#0077aa) with a 150ms ease-in-out transition. Secondary buttons are transparent with cyan text and a cyan border; on hover, they fill with a light blue background (#3a4570). Links within content use the heading-link class: white text (#ffffff) by default, shifting to bright purple (#9999ff) on hover. The transition is 150ms ease-in-out. All interactive elements have cursor: pointer to signal clickability.

Containers & Surfaces The main news container uses a 12px padding and a 1px solid black border, with a periwinkle back

Do's and Don'ts

**Do**

• Do use cyan (#0099cc) exclusively for interactive elements—links, hover states, and primary CTAs—to create a consistent, recognizable accent throughout the interface.
• Do maintain the 750px fixed-width container and avoid responsive scaling; the retro-web aesthetic depends on a consistent, non-adaptive layout.
• Do apply 1px solid black or gray borders to all major containers and cards to reinforce the compartmentalized, grid-based structure.
• Do use Verdana and Arial exclusively; avoid modern web fonts that would undermine the early-2000s authenticity.
• Do keep label and menu text small (10px–11px) and bold (700 weight) with increased letter-spacing (0.05em–0.08em) for legibility at small sizes.
• Do use color shifts (not shadows) for hover states to maintain the flat, layered visual hierarchy.

**Don't**

• Don't use gradients, blur effects, or glassmorphism; the design relies on flat color blocking and hard borders for visual clarity.
• Don't add drop shadows to interactive elements; use color changes and border shifts instead to signal state changes.
• Don't introduce rounded corners beyond 4px; the architectural, grid-based aesthetic demands minimal curvature.
• Don't use colors outside the defined palette; every hex value should come from the primary, secondary, tertiary, or neutral token set.
• Don't apply text-shadow to body text; reserve it only for small labels over busy backgrounds where contrast is critical.
• Don't scale or adapt the layout for mobile or tablet viewports; the fixed-width design is intentional and part of the brand identity.