Get Hyped

Overview

Get Hyped is a Dutch social-first content agency that energizes brand visibility through data-informed creative strategy. The design system embodies **Energetic Minimalism**—a movement that pairs vibrant, saturated brand colors (electric blue #0d8dff, vivid green #33c791, coral red #fa5424) with a warm, spacious cream canvas (#faf4ec) to create an approachable yet high-impact visual language. The UI evokes confidence, momentum, and creative boldness: users feel the agency's energy through color saturation and generous whitespace, not through visual clutter. The brand personality is direct, action-oriented, and Dutch-pragmatic—no flowery language, no false modesty. Voice example: "Jouw content werkt niet. Wij weten waarom. Laten we het fixen." (Your content doesn't work. We know why. Let's fix it.)

Colors

The color system is built on three vibrant brand accents layered over a warm, neutral foundation. **Primary (#0d8dff, electric blue)** is the signature CTA color—used on all action buttons, key links, and interactive focus states. It commands attention without aggression, signaling trust and digital sophistication. **Secondary (#33c791, vivid green)** supports growth narratives and positive metrics; deploy it on success states, achievement cards, and secondary CTAs. **Tertiary (#fa5424, coral red)** adds urgency and energy to highlights, alerts, and tertiary actions—it's the brand's warmth. The surface stack uses a warm cream (#faf4ec) as the base, with carefully calibrated container layers (surface-container #eae4d8, surface-container-high #e0dace) to create subtle depth without sacrifici

Typography

The type system uses Inter exclusively, a geometric sans-serif that conveys modernity and clarity. **Display (85px, 600 weight, -0.04em letter-spacing)** is reserved for hero headlines like "Get Hyped. Get Noticed. Get Results."—use it sparingly and always with -4% tracking to tighten the letterforms. **Headline-lg (40px, 600 weight)** anchors section headers; **headline-md (28px, 600 weight)** breaks up content zones. **Body-lg (18px, 400 weight, 28px line-height)** is the default for readable paragraphs; **body-md (16px, 400 weight, 24px line-height)** for secondary content and form labels. **Label-md (14px, 600 weight, 0.01em tracking)** is used on buttons and badges to add visual weight; **label-sm (12px, 500 weight, 0.05em tracking)** for micro-copy and form hints. When placing small

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, centered on all viewports. Desktop container width is clamped between 992px (min) and 1920px (max) using CSS custom properties for responsive scaling. **Gutter spacing is 24px** between columns and sections; use **lg spacing (40px)** to separate major content blocks (hero, stat cards, testimonials). The hero section spans full-width with 64px (xl spacing) top and bottom padding; stat cards (10M+, 30+, etc.) use 24px internal padding and are arranged in a 3-column layout on desktop, collapsing to 2 columns on tablet and 1 on mobile. All container elements center-align with margin-right: auto; margin-left: auto. Whitespace is generous—never crowd elements. Use md spacing (24px) between card rows and sm spacing (12px) between

Elevation & Depth

Depth is achieved through subtle shadows and layered backgrounds, never through darkness. **Level 1 (Base Canvas)**: The warm cream surface (#faf4ec) with no shadow—this is the foundation. **Level 2 (Standard Cards)**: Stat cards and content containers use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with rounded corners (1.5rem / 24px) and 24px padding. On hover, cards lift to Level 3 with transform: translateY(-4px) and box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), transitioning over 0.45s cubic-bezier(0.34, 1.37, 0.64, 1) for a bouncy, energetic feel. **Level 3 (Modals/Overlays)**: Reserved for

Shapes

The shape philosophy is **Soft-Technical**—rounded corners signal approachability and energy, but not so extreme as to feel childish. **Buttons and primary CTAs** use 1.5rem (24px) border-radius, creating a pill-like shape that feels modern and clickable. **Cards and containers** use 1.5rem (24px) radius as well, maintaining visual cohesion. **Input fields** use 0.5rem (8px) radius for a more technical, form-like appearance. **Badges and small UI elements** use 9999px (full) radius for perfect circles or pills. The reasoning: large radius on buttons and cards creates a friendly, energetic tone

Components

Action Elements **Button-Primary** is the hero CTA: background {colors.primary} (#0d8dff), white text, 48px height, 12px 24px padding, 1.5rem radius, box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). On hover, scale to 1.02 and shift to {colors.primary-fixed-dim} (#28aaff) over 0.3s cubic-bezier(0.34, 1.37, 0.64, 1). On active, scale to 0.95 for tactile feedback. **Button-Secondary** is the outline variant: transparent background, {colors.primary} text, 2px solid {colors.primary} border, same dimensions. On hover, fill with {colors.surface-container-high} (#e0dace) and maintain text color. Use button-secondary for less critical actions ("Learn More", "Explore").

Containers & Surfaces **Card-Stat** is the primary stat display (10M+, 30+, etc.): background {colors.primary}, white text, 1.5

Do's and Don'ts

**Do**

• Do use {colors.primary} (#0d8dff) exclusively for primary CTAs and interactive focus states—it's the brand's signature and must remain distinctive.
• Do maintain 24px gutter spacing between grid columns and 40px (lg) spacing between major content sections to preserve the spacious, premium feel.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to all cards and containers; upgrade to 0 16px 40px rgba(0, 0, 0, 0.12) on hover for depth without darkness.
• Do use Inter 600 weight for all headlines and labels; 400 weight for body copy. Never mix weights within a single text block.
• Do round all interactive elements (buttons, inputs, cards) to at least 0.5rem; use 1.5rem for primary CTAs and major containers.
• Do pair {colors.primary} with white text and {colors.secondary}/{colors.tertiary} with white text on colored backgrounds for maximum contrast and legibility.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary text or background colors—always use {colors.on-surface} (#161616) and {colors.surface} (#faf4ec) to maintain warmth.
• Don't apply shadows with blur radius below 8px or spread radius below 0px; soft, warm shadows (0 3px 8px) are the brand standard, never sharp or aggressive.
• Don't mix border-radius values randomly; stick to the scale (0.25rem, 0.5rem, 0.75rem, 1rem, 1.5rem, 9999px) to maintain visual consistency.
• Don't use {colors.primary} on backgrounds with opacity below 0.8; the electric blue must remain vibrant and readable, never washed out.
• Don't exceed 1280px container max-width on any viewport; the layout must feel controlled and premium, not sprawling.
• Don't animate transitions faster than 0.2s or slower than 0.45s; the brand energy demands snappy, bouncy motion (cubic-bezier(0.34, 1.37, 0.64, 1)), never sluggish or jarring.