MessUp

Overview

MessUp is a provocative creative collective that rejects safety in favor of bold, unapologetic design. The brand embodies 'Aggressive Minimalism'—a design philosophy that pairs stark, clean white surfaces (#ffffff) with vivid accent colors (primary orange #ff6600, secondary cyan #0693e3, tertiary green #00d084) to create maximum visual impact. The aesthetic is intentionally confrontational: minimal ornamentation, maximum contrast, and strategic use of color to command attention. The UI communicates confidence through restraint—every element earns its place through function and visual weight.

MessUp's voice is direct, irreverent, and unapologetic. The brand speaks to creative rebels who reject mediocrity: 'We're a crew of hot heads. If you want something that hits, you're in the right place: it's the only thing we do.' Vocabulary is sharp and punchy—no hedging, no corporate softness. Tone is conversational yet authoritative, with a hint of provocation. Example sentence in brand voice: 'Stop being safe. Start being seen.'

Colors

The color system is built on radical contrast: a pristine white canvas (#ffffff, surface) punctuated by three high-saturation accent colors that demand attention. Primary orange (#ff6600) is the signature brand color—used on all CTAs, primary actions, and brand moments. It appears frequently (16 instances in observed CSS) and serves as the visual anchor for user interaction. Secondary cyan (#0693e3) provides a complementary accent for secondary actions, data visualization, and supporting UI elements. Tertiary green (#00d084) is reserved for success states, confirmations, and positive feedback. Error red (#cf2e2e) signals destructive or warning states with the same intensity as the accent colors.

The surface stack is deliberately minimal: surface (#ffffff) for primary backgrounds, surface-

Typography

The type system uses a single typeface family—Inter—across all scales, reinforcing the minimalist aesthetic. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and brand moments; headline-lg (40px, 700 weight, -0.02em) for major section titles; headline-md (28px, 700 weight, -0.01em) for subsections. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) handle content hierarchy with consistent 0.01em letter-spacing for clarity. Label-md (14px, 600 weight, 0.02em) and label-sm (12px, 600 weight, 0.03em) are used for UI labels, buttons, and metadata. All headlines use 700 weight to convey authority and aggression; body text uses 400 weight for readability. Line-height is generous (1.5x font size for body, 1.2x for headlines) to ensure legibility on white ba

Layout

The layout system uses a 12-column grid with a max-width of 1024px, creating a balanced canvas that feels spacious without overwhelming. The grid is fluid on mobile (full-width with 24px gutter) and fixed at 1024px on desktop. White-space is generous: lg spacing (40px) separates major sections, md spacing (24px) divides content blocks, and sm spacing (12px) provides breathing room between related elements. The gutter (24px) is consistent across all breakpoints, creating a predictable rhythm. Container padding uses md spacing (24px) on desktop, sm spacing (12px) on tablet, and xs spacing (4px) on mobile. The spacing scale is semantic: unit (8px) is the base increment, xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section separation, lg (40px) for major layo

Elevation & Depth

Depth is conveyed through subtle shadows and surface-container transitions rather than dramatic layering. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Standard Card): surface-container-lowest (#eeeeee) background with elevation-sm shadow (0 1px 2px rgba(0, 0, 0, 0.06)) and 1px solid outline-variant border (#b0b0b0). Level 3 (Elevated/Hover): surface-container-high (#dcdcdc) background with elevation-md shadow (0 4px 12px rgba(0, 0, 0, 0.08)). Level 4 (Modal/Overlay): surface-container-highest (#d0d0d0) with elevation-lg shadow (0 8px 32px rgba(0, 0, 0, 0.1)). Transitio

Shapes

The shape philosophy is 'Technical Precision'—rounded corners are minimal and intentional, never organic or soft. Buttons and primary interactive elements use md radius (8px) for a subtle, professional appearance. Cards and containers use md radius (8px) for consistency. Input fields use DEFAULT radius (4px) for a tighter, more technical feel. Full-radius (9999px) is reserved exclusively for badges and pill-shaped elements. The reasoning: sharp corners (2px on small elements) convey aggression and precision, while 8px provides just enough softness to feel modern without sacrificing the brand's

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses primary orange (#ff6600) background with white text, 12px vertical / 24px horizontal padding, 48px height, and md radius (8px). On hover, background shifts to #e55a00 with a 200ms ease-out transition. On active/press, background becomes #cc5200. button-secondary uses transparent background with 2px solid primary orange border and primary orange text; on hover, it fills with primary-container (#ffe6d9) background and on-primary-container text (#4d2200). All buttons use label-md typography (14px, 600 weight) with 0.02em letter-spacing for clarity.

Containers & Surfaces Cards use surface-container-lowest (#eeeeee) background, md radius (8px), md padding (24px), 1px solid outline-variant border (#b0b0b0

Do's and Don'ts

**Do**

• Do use primary orange (#ff6600) on all primary CTAs and brand moments—it's the signature accent that makes MessUp unmistakable.
• Do maintain high contrast between text and background: on-surface (#1a1a1a) on white, on-primary (#ffffff) on orange, never reverse.
• Do use md radius (8px) on buttons and cards; avoid soft, rounded aesthetics that contradict the brand's aggressive minimalism.
• Do apply 200ms ease-out transitions on hover states for buttons and cards to feel responsive without being jarring.
• Do use label-md (14px, 600 weight) for all button text and UI labels to ensure clarity and visual hierarchy.
• Do reserve tertiary green (#00d084) exclusively for success and positive feedback states; never use it for neutral or secondary actions.
• Do use lg spacing (40px) to separate major sections and create breathing room; white-space is a design tool, not wasted space.

**Don't**

• Don't use soft, rounded corners larger than 16px (xl) except for full-radius badges—the brand rejects organic, bubbly aesthetics.
• Don't apply shadows larger than elevation-lg (0 8px 32px rgba(0, 0, 0, 0.1))—depth is subtle, never dramatic.
• Don't use secondary cyan (#0693e3) or tertiary green (#00d084) as primary action colors; they're supporting accents only.
• Don't mix typefaces or use system fonts; Inter is the only approved font family across all scales.
• Don't use text-shadow or other effects on body text; reserve effects for small labels over busy backgrounds only.
• Don't create custom color values outside the defined palette; all colors must reference the M3 token system.
• Don't use transitions longer than 200ms on interactive elements; the brand is fast and responsive, never sluggish.
• Don't apply borders thicker than 2px except for focus rings (3px); the brand favors precision over visual weight.