GUT Agency

Overview

GUT is a provocative advertising agency that channels raw creative confidence into bold, gutsy work. The design system embodies this through a high-contrast minimalist aesthetic: a pure black canvas (rgb(0, 0, 0)) paired with an electric neon-lime primary accent (#c6fb50) that demands attention and action. The brand personality is irreverent, direct, and unapologetically ambitious—think 'Ad Nerds' obsessed with precision and impact. The UI celebrates negative space and typographic boldness, using the Riposte typeface family (fontFamily: Riposte, Arial, sans-serif) as the voice of authority. Every interaction is designed to feel intentional and high-stakes. Example sentence in brand voice: 'We don't follow trends—we set them. Your gut knows the difference.'

Colors

The color system is built on a stark black-and-white foundation with a single, unmissable accent. Primary (#c6fb50) is the brand's signature neon-lime—used exclusively on CTAs, active states, and key brand moments. It appears at full saturation on dark backgrounds to create maximum contrast and visual pop. Secondary (#3898ec) is a cool, professional blue reserved for supporting UI elements, data visualization, and secondary actions. Tertiary (#f1e3e8) is a warm, muted mauve used sparingly for tertiary information and decorative accents. The surface stack is built entirely on black: surface (#000000), surface-container (#1a1a1a), surface-container-high (#2a2a2a), with on-surface text always white (#ffffff) or near-white (#cccccc). Error states use a bold red (#ff4444) to signal urgency. All

Typography

The typography system is anchored in Riposte, a bold, geometric sans-serif that communicates confidence and modernity. Display (72px, 700 weight, -0.03em letter-spacing) is reserved for hero headlines and brand statements, commanding the full visual hierarchy. Headline-lg (48px, 700 weight) and headline-md (36px, 700 weight) drive section breaks and major content divisions. Body text (16–18px, 400 weight, 24–28px line-height) is set with generous line-height (1.5 unitless) to maintain readability on dark backgrounds. Labels (12–14px, 700 weight, 0.05–0.08em letter-spacing) are uppercase and tightly tracked, reinforcing the brand's precision. On small labels over busy backgrounds or video, apply text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) to ensure legibility. All typography uses -webkit-font

Layout

The layout system uses a 12-column grid (--grid-main: repeat(12, minmax(0, 1fr))) with a maximum container width of 1280px (--container--main). Gutters are consistently 24px (--site--gutter), creating a rhythm that feels spacious yet controlled. Section separation uses lg spacing (40px) for major breaks and md spacing (24px) for minor content groupings. The design favors full-bleed hero sections (100vw width) that break out of the container, creating visual drama and emphasizing the brand's boldness. Cards and content blocks use md padding (24px) internally, with sm gutters (12px) between nested elements. Responsive breakpoints follow a mobile-first approach: tablet at 768px (show-ml / hide-ml), desktop at 992px (show-t / hide-t). The layout philosophy is 'aggressive minimalism'—maximum im

Elevation & Depth

Depth is achieved through subtle shadow layering and strategic use of outline borders rather than heavy drop shadows. Level 1 (Base): no shadow, flat black surface (#000000). Level 2 (Standard Card): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 1px solid border at outline-variant (#444444). Level 3 (Elevated/Hover): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), border shifts to outline (#666666). Interactive elements (buttons, inputs) use a 3px focus ring at rgba(198, 251, 80, 0.1) when focused, creating a subtle halo effect around the primary accent. Transitions between elevation levels use 300

Shapes

The shape philosophy is 'Architectural Precision'—sharp, minimal radii that respect the grid and maintain visual clarity. Buttons and primary interactive elements use sm radius (0.25rem / 4px) for a crisp, technical feel. Cards and containers use md radius (0.75rem / 12px) to soften edges slightly while maintaining the brand's angular aesthetic. Input fields use DEFAULT radius (0.5rem / 8px) for a balanced, approachable feel. Badges and accent elements use full radius (9999px) to create visual contrast and signal secondary importance. All radius values are applied consistently across hover and

Components

Action Elements Buttons are the primary driver of user intent and must command attention. button-primary uses backgroundColor: {colors.primary} (#c6fb50), textColor: {colors.on-primary} (#1a1a1a), padding: 12px 24px, height: 48px, rounded: {rounded.sm} (4px), with a 200ms ease transition. On hover, shift to button-primary-hover with backgroundColor: {colors.primary-container} (#a8e030) and apply transform: scale(1.02) for subtle tactile feedback. Active state (button-primary-active) uses inverse-primary (#7fb820) to signal completion. button-secondary uses transparent background with a 1px solid border at {colors.outline} (#666666), textColor: {colors.on-surface} (#ffffff). On hover, fill with surface-container-high (#2a2a2a) and brighten the border to on-surface (#ffffff). All buttons

Do's and Don'ts

**Do**

• Do use primary (#c6fb50) exclusively on CTAs and high-priority interactive elements—it's the brand's most distinctive asset and must remain rare and impactful.
• Do maintain high contrast ratios: white text on black (21:1) and lime text on black (15:1) ensure accessibility and visual clarity.
• Do apply 200–300ms ease transitions to all interactive state changes—the brand's pacing is deliberate and confident, never jarring.
• Do use the full-bleed hero section pattern (100vw width) to create visual drama and emphasize the brand's boldness.
• Do keep padding and margins consistent with the spacing scale (4px, 12px, 24px, 40px, 64px) to maintain rhythm across all breakpoints.

**Don't**

• Don't soften the black background (#000000) with gradients or textures—the stark, pure black is core to the brand's confidence and precision.
• Don't use primary (#c6fb50) on body text or large text blocks—it's too bright and will cause eye strain. Reserve it for interactive elements only.
• Don't add drop shadows larger than 0 16px 40px rgba(0, 0, 0, 0.25)—the brand rejects heavy skeuomorphism in favor of flat, high-contrast design.
• Don't mix typefaces—Riposte is the sole typographic voice. Arial is a fallback only; never introduce secondary fonts like Tropiline or Newspirit into the core UI.
• Don't use rounded corners larger than 1.5rem (24px) on any component—the brand's aesthetic is architectural and precise, not organic or playful.