House of Yellow

Overview

House of Yellow is a creative content agency brand system built on **Vibrant Minimalism**—a design philosophy that pairs high-energy, optimistic color with restrained, purposeful form. The brand personality is confident yet approachable: it speaks to ambitious brands that refuse to compromise between speed and craftsmanship. The visual language combines a luminous yellow accent (#f2efa3) with a sophisticated near-black canvas (#1d1d1b), creating a striking contrast that communicates both energy and precision. The UI evokes a sense of creative momentum—every interaction feels intentional, every surface purposeful.

The voice is direct, energetic, and grounded in results. House of Yellow doesn't use flowery language or hedging; it speaks in imperatives and outcomes. Example: "We craft formats that stick and stories that move. From 8-second viral to a full brand documentary, we translate your message into content that creates real momentum." The tone balances ambition with humility, celebrating the work without overselling.

Colors

The color system is built on a **high-contrast, warm-minimalist** foundation. Primary (#f2efa3) is the brand's signature warm yellow—a luminous, optimistic accent used exclusively on CTAs, key interactive elements, and brand moments. It appears against both light and dark surfaces, always commanding attention without aggression. On-primary (#1d1d1b) ensures legibility with a near-black text color at 4.5:1 contrast ratio minimum.

The surface stack ranges from light (#eeeeee) to near-white (#ffffff), with intermediate containers (#e8e8e6, #dcdcda) used for layered depth. On-surface (#1d1d1b) is the primary text color, paired with on-surface-variant (#4a4a48) for secondary content and disabled states. Secondary (#cb4444) is a warm red accent reserved for error states and high-priority warnin

Typography

The typography system uses **Poppins** exclusively across all weights (300 Light, 400 Regular, 500 Medium, 600 SemiBold, 700 Bold), creating a cohesive, modern voice. Display (56px, 700 weight, -0.03em tracking) anchors hero sections and major announcements with commanding presence. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) establish clear visual hierarchy for section titles, with tighter letter-spacing (-0.02em, -0.01em respectively) to enhance readability at scale. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) provide comfortable reading rhythm for long-form content, with 1.5x line-height multiplier to ensure 24–28px vertical spacing. Label-md (14px, 500 weight) and label-sm (12px, 500 weight) are reserved for UI lab

Layout

The layout system uses a **fluid, container-constrained** approach with a maximum width of 1080px, allowing breathing room on desktop while maintaining focus. The 12-column grid adapts responsively: 12 columns on desktop (>1080px), 8 columns on tablet (768–1080px), and 4 columns on mobile (<768px). Spacing follows a semantic scale: unit (8px) as the base increment, xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section padding, lg (40px) for major section separation, and xl (64px) for hero and full-width breaks. The gutter (24px) defines horizontal padding on containers, ensuring consistent left/right breathing room. White-space is used strategically to separate content zones and reduce cognitive load—sections are never cramped, and card-to-card spacin

Elevation & Depth

Depth is conveyed through a **subtle shadow hierarchy** rather than color shifts or borders. Level 1 (Base/Surface) uses no shadow—the light background (#eeeeee) is the foundation. Level 2 (Standard Cards) applies elevation.sm (0 1px 3px rgba(0, 0, 0, 0.08))—a soft, tight shadow that lifts the card 2–4px from the surface, used for default card states and list items. Level 3 (Elevated/Hover) applies elevation.md (0 4px 12px rgba(0, 0, 0, 0.12))—a broader, softer shadow indicating interactive lift or hover state, used when cards are focused or hovered. Level 4 (Modal/Overlay) applies elevation.l

Shapes

The shape system follows a **Soft-Technical** philosophy: rounded corners are used purposefully to soften the geometric grid while maintaining precision and clarity. Buttons use full (9999px) border-radius to create pill-shaped CTAs that feel friendly and approachable—this is the most prominent shape in the system, appearing on every primary action. Cards and containers use lg (16px) or xl (24px) radius, providing subtle rounding that softens edges without feeling organic or overly playful. Input fields and smaller UI elements use DEFAULT (8px) or md (10px) radius, maintaining visual consisten

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses background: {colors.primary} (#f2efa3), text-color: {colors.on-primary} (#1d1d1b), rounded: full (9999px), padding: 12px 24px, height: 48px, font-weight: 500, and no border. On hover, transition to **button-primary-hover** with background: {colors.primary-fixed-dim} (#e8e48a) over 0.2s ease-out. On active/pressed, use **button-primary-active** with background: {colors.primary-container} (#e8e48a) and text-color: {colors.on-primary-container} (#333333). **button-secondary** uses transparent background, text-color: {colors.primary} (#f2efa3), a 2px solid border in primary, and the same rounded/padding/height as primary. On hover, apply background: {colors.surface-container-high} (#dcdcda) with 0.2s trans

Do's and Don'ts

**Do**

• Do use primary (#f2efa3) exclusively for CTAs, focus states, and brand moments—it's the visual signature and should never be diluted.
• Do apply full (9999px) border-radius to all buttons to signal interactivity and reinforce the approachable, energetic brand voice.
• Do maintain 24px (md spacing) as the default padding inside cards and containers; this creates consistent breathing room across the system.
• Do use Poppins 500–600 weight for all UI labels and button text; lighter weights (300–400) are reserved for body copy only.
• Do transition all hover/active states over 0.2–0.3s ease-out to feel responsive without feeling sluggish.
• Do layer shadows using the elevation scale (sm/md/lg) rather than inventing custom values; this maintains visual hierarchy.

**Don't**

• Don't use primary (#f2efa3) on body text or backgrounds—it's an accent color and will cause eye fatigue at scale.
• Don't apply sharp corners (0px border-radius) to buttons or interactive elements; this contradicts the soft-technical aesthetic.
• Don't mix Poppins with other typefaces; the system is monofamily and any deviation breaks visual cohesion.
• Don't use secondary (#cb4444) or tertiary (#ff6900) as primary interactive colors—reserve them for error states and special highlights only.
• Don't create custom shadows; always reference the elevation scale (sm/md/lg) to maintain consistent depth perception.
• Don't exceed 1080px container width on desktop; this preserves focus and prevents content from feeling scattered.