Roasted

Overview

Roasted is a retro-gaming-inspired brand landing page that channels the energy and visual language of 8-bit arcade culture. The design philosophy centers on 'Pixel-Punk Minimalism'—a deliberate collision of nostalgic digital aesthetics with contemporary web design. The brand serves users who appreciate bold, unapologetic visual statements and playful irreverence; the UI evokes a sense of anticipation and fun, as if you're waiting for a game to load. The emotional response is one of excitement mixed with ironic detachment—think of the brand as confidently retro without being precious about it.

The voice is casual, direct, and slightly cheeky. Roasted speaks in short, punchy sentences with occasional gaming or food-culture references. The vocabulary skews toward the colloquial: 'coming soon,' 'stay tuned,' 'level up.' There's no corporate polish here—just genuine personality. Example sentence in brand voice: 'Your next obsession is roasting in the oven. We'll let you know when it's ready.'

Colors

The color palette is deliberately high-contrast and energetic, built around a vibrant primary blue (#0066ff) paired with a dominant red background (#ff2a2a) that commands the entire viewport. This red is not a secondary accent—it is the canvas itself, the stage upon which the brand performs. Primary (#0066ff) is reserved for interactive elements (buttons, links, focus states) and provides critical visual relief against the red field. Secondary (#ed9a1c, a warm orange-gold) acts as a tertiary accent for badges, highlights, and supporting UI elements, adding warmth to the cool blue-red tension.

The surface stack is deliberately flattened: surface (#ff2a2a) is the dominant background, with container variants providing subtle depth through incremental red shifts (surface-container-low: #ff1a1

Typography

The type system is split between two distinct families: Pixelify Sans (a pixel-perfect, monospaced display font from Google Fonts) handles all headlines, display text, and brand-forward messaging, while Inter (a modern humanist sans-serif) manages body copy, labels, and interface text. This pairing creates a visual hierarchy that is both playful and functional. Pixelify Sans is used at sizes 20px and above (title-lg through display), with consistent 400 fontWeight to maintain the retro aesthetic without adding visual noise. Inter is used for body-md (16px, 400 weight, 24px lineHeight) and label-md (14px, 600 weight, 20px lineHeight), providing clarity and legibility for smaller text. All typography uses 0em letter-spacing except for label-sm (12px, 500 weight, 0.02em letterSpacing) which a

Layout

The page uses a fluid, full-viewport layout with a fixed 1280px container max-width for content. The hero section occupies the full screen (100vh) with centered content, leveraging the red background as the primary design element. Spacing follows a semantic scale: lg (40px) is used for major section separation, md (24px) for card padding and component spacing, sm (12px) for internal element spacing, and xs (4px) for micro-interactions. The grid is 12 columns, though the coming-soon page uses a single centered column for maximum impact. White-space is minimal and intentional—the design favors density and visual weight over breathing room, reflecting the arcade-game aesthetic where every pixel counts. The gutter (24px) is applied consistently to left/right margins on smaller viewports, scali

Elevation & Depth

Depth in Roasted is achieved through layered shadows and color shifts rather than complex glassmorphism or blur effects. The elevation system uses three distinct levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle hover states on interactive elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and buttons at rest, and lg (0 8px 24px rgba(0, 0, 0, 0.2)) for elevated modals or prominent CTAs. Buttons at rest use md elevation; on hover, they transition to lg with a 120ms ease-out timing function. Cards use md elevation by default and shift to lg on hover, creating a subtle lift effec

Shapes

The shape philosophy is 'Retro-Technical Precision'—a blend of sharp, geometric corners with subtle rounding that echoes both arcade cabinet design and modern web conventions. Border-radius follows a strict scale: sm (0.25rem / 4px) for small interactive elements like badges and input focus rings, DEFAULT (0.5rem / 8px) for standard inputs and small cards, md (0.75rem / 12px) for medium components, lg (1rem / 16px) for primary buttons and larger cards, xl (1.5rem / 24px) for hero sections or prominent containers, and full (9999px) for pill-shaped badges and circular icons. Buttons use lg (16px

Components

Action Elements Buttons are the primary interactive component. button-primary uses backgroundColor: {colors.primary} (#0066ff), textColor: {colors.on-primary} (white), rounded: {rounded.md} (12px), padding: 12px 24px, and height: 44px. The button uses md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) at rest. On hover, button-primary-hover shifts to backgroundColor: #0052cc with an enhanced shadow (0 6px 16px rgba(0, 102, 255, 0.3)) and a 120ms transition. On active/press, button-primary-active uses backgroundColor: #003d99 with a reduced shadow (0 2px 4px rgba(0, 0, 0, 0.2)) to create a pressed-in effect. button-secondary uses a transparent background with a 2px solid border in primary color, maintaining the same padding and height. Secondary buttons on hover shift to primary-container bac

Do's and Don'ts

**Do**

• Do use the red background (#ff2a2a) as the primary canvas—it is the brand's signature and should dominate the visual field.
• Do apply Pixelify Sans exclusively to headlines and display text (20px and above) to maintain the retro-gaming aesthetic.
• Do use primary blue (#0066ff) sparingly and strategically on interactive elements (buttons, links, focus states) to create visual hierarchy.
• Do maintain high contrast: black text on red, white text on blue—no soft grays or low-contrast combinations.
• Do use md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) as the default shadow for cards and buttons; reserve lg elevation for hover and active states.
• Do apply text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) to small labels over the red background for readability.

**Don't**

• Don't use gradients or blur effects (backdrop-filter, etc.)—the brand is about flat, bold color and sharp edges.
• Don't apply rounded corners larger than xl (24px) to primary interactive elements; keep buttons and inputs tight and technical.
• Don't mix Inter and Pixelify Sans in the same headline or display text—use one family per text block.
• Don't reduce the contrast between text and background; avoid light grays on red or dark text on blue.
• Don't use the secondary orange (#ed9a1c) as a background color; reserve it for badges, accents, and highlights only.
• Don't apply shadows larger than lg (0 8px 24px rgba(0, 0, 0, 0.2)) to any component—keep the design flat and punchy.