Design Gal Studio

Overview

Design Gal Studio is an independent design practice serving mission-driven startups with web and UX design expertise. The brand embodies a "Playful Maximalism" aesthetic—a deliberate counterpoint to austere, corporate design. The visual language combines a deep navy foundation (#11193b) with vibrant, saturated accent colors (hot pink #feadd2, electric yellow #ffdf2b, lavender #edbbf9) that evoke creativity, optimism, and approachability. The UI communicates confidence through bold typography (Figtree at weights 600–700) paired with warm, human-scale spacing and rounded corners (24px default radius), creating an environment where complex design challenges feel manageable and exciting. The emotional response is one of creative partnership: users sense they're working with a designer who understands their mission and will push boundaries without losing sight of usability.

Tone of voice: direct, encouraging, and slightly irreverent. Christine speaks to founders and product leaders as peers, not clients. Vocabulary leans into action verbs ("win customers," "level up," "drive results") and avoids corporate jargon. The brand personality is confident without arrogance, playful without being frivolous. Example sentence in brand voice: "Your product or website needs to level up—let's make it impossible to ignore."

Colors

The color system is built on a warm, cream-based surface (#fdf9ec, rgb(253, 249, 236)) that provides a soft, approachable canvas. The primary accent is hot pink (#feadd2, rgb(254, 173, 210)), used exclusively for call-to-action buttons, interactive highlights, and brand-defining moments. This color is never used for body text or large backgrounds—it's reserved for moments that demand attention. Secondary accent is electric yellow (#ffdf2b, rgb(255, 223, 43)), deployed for borders, badges, and secondary CTAs; it creates visual rhythm without competing with primary. Tertiary accent is lavender (#edbbf9, rgb(237, 187, 249)), used for supporting UI elements, hover states, and decorative accents. The core text color is deep navy (#11193b, rgb(17, 25, 59)), which provides maximum contrast agains

Typography

The type system pairs Figtree (a geometric, friendly sans-serif from Google Fonts) for headlines and labels with Inter (a neutral, highly legible sans-serif) for body copy. This pairing creates a clear hierarchy: Figtree's rounded letterforms and generous spacing (font-weight 600–700) command attention in headlines (display at 64px, headline-lg at 40px), while Inter's precision (font-weight 400) ensures comfortable reading in body text (body-lg at 18px, body-md at 16px). Letter-spacing is tightened on display text (-0.02em) to create visual density and impact, while body copy uses neutral spacing (0em) for optimal readability. Line-height is generous throughout (1.5x for body, 1.2x for headlines) to reinforce the approachable, spacious aesthetic. Apply text-shadow: 0 2px 4px rgba(0, 0, 0,

Layout

The layout system uses a 12-column grid with a max-width of 1280px, providing flexibility for both desktop and tablet experiences. The gutter is consistently 24px, creating a rhythm that feels generous without being wasteful. Container padding uses the md spacing token (24px) on desktop, reducing to sm (12px) on mobile. White-space is intentional and abundant: section separation uses lg spacing (40px) vertically, creating breathing room between content blocks. The hero section occupies the full viewport height with a 40px top padding, allowing the headline to command the space. Card-based layouts use md padding (24px) internally, with lg spacing (40px) between card groups. The design avoids cramped layouts—every interactive element has at least 12px of breathing room from its neighbors. Ho

Elevation & Depth

Depth is conveyed through a subtle shadow system and layered backgrounds rather than dramatic z-index shifts. Level 1 (Base): the warm cream surface (#fdf9ec) with no shadow, establishing the foundation. Level 2 (Standard Cards): surface-container (#fdf9ec) with a soft shadow (0 4px 12px rgba(0, 0, 0, 0.08)), creating a gentle lift. Level 3 (Elevated/Modals): surface-container-high (#f5f5f5) with a deeper shadow (0 8px 32px rgba(0, 0, 0, 0.15)), signaling modal or overlay prominence. Interactive elements (buttons, inputs) use the Level 2 shadow by default, escalating to Level 3 on hover (0 8px

Shapes

The shape philosophy is "Rounded Approachability"—a deliberate rejection of sharp corners in favor of soft, inviting forms. Buttons and primary CTAs use the full radius (9999px), creating pill-shaped buttons that feel friendly and clickable. Cards and containers default to lg radius (1rem / 16px), providing enough roundness to feel contemporary without appearing cartoonish. Input fields use md radius (0.75rem / 12px), slightly less aggressive than cards to signal their functional nature. Small UI elements (badges, tags, chips) use full radius (9999px) to maintain visual consistency with button

Components

Action Elements Buttons are the primary interaction mechanism and use the full radius (9999px) with generous padding (12px 24px, 48px height) to create large, inviting tap targets. Primary buttons (#feadd2 background, #11193b text) use the label-md typography (14px, font-weight 600) and include a subtle shadow (0 4px 12px rgba(0, 0, 0, 0.08)). On hover, the background shifts to the primary-fixed-dim (#f889e7) with an enhanced shadow (0 8px 24px rgba(248, 137, 231, 0.25)) and a 200ms ease-out transition. Secondary buttons (#ffdf2b background) follow the same structure but use the secondary-fixed-dim (#d8d800) on hover. Ghost buttons (transparent background, 2px outline border in #ffdf2b) are used for tertiary actions and shift to surface-container-high on hover with a 200ms transition.

Do's and Don'ts

**Do**

• Do use the full radius (9999px) on all primary CTAs and buttons—it's the signature shape that signals approachability and action.
• Do maintain the warm cream surface (#fdf9ec) as the default background; it's the foundation that makes accent colors pop without visual fatigue.
• Do apply the primary pink (#feadd2) exclusively to interactive moments—buttons, links, focus states—never to large backgrounds or body text.
• Do use Figtree (font-weight 600–700) for all headlines and labels; its rounded letterforms reinforce the brand's playful personality.
• Do include generous white-space: lg spacing (40px) between sections, md padding (24px) inside cards, and at least 12px breathing room around interactive elements.
• Do use the shadow system to convey depth: Level 2 (0 4px 12px rgba(0, 0, 0, 0.08)) for cards, Level 3 (0 8px 32px rgba(0, 0, 0, 0.15)) for modals.
• Do apply 200–300ms ease-out transitions on hover states to create a sense of responsiveness without feeling sluggish.

**Don't**

• Don't use sharp corners (border-radius: 0) on any interactive element—the brand identity depends on rounded, approachable forms.
• Don't apply the primary pink to large backgrounds or body text; it's an accent color reserved for moments that demand attention.
• Don't use shadows darker than rgba(0, 0, 0, 0.15); the system prioritizes subtlety and warmth, not dramatic contrast.
• Don't mix Figtree and Inter arbitrarily—use Figtree for headlines/labels (weights 600–700) and Inter for body copy (weight 400) to maintain clarity.
• Don't compress spacing below the sm token (12px); the brand thrives on generous white-space and breathing room.
• Don't use pure black (#000000) or pure white (#ffffff) as primary text or background colors—stick to the defined surface and on-surface tokens.
• Don't apply transitions longer than 300ms on interactive elements; the brand feels responsive and immediate, not sluggish.