kiwikiwi

Overview

kiwikiwi is a senior web design and development studio for scale-ups that have outgrown their initial web presence. The brand embodies a "Playful Confidence" aesthetic—combining bold, geometric typography (Gelica serif) with warm, hand-illustrated landscapes and a vibrant accent palette of golden yellows (#fec119), teal greens (#34d9c6), and hot pinks (#fb5da5). The UI evokes clarity and approachability: clean white surfaces, generous whitespace, and strategic color pops that guide attention without overwhelming. The emotional response is one of competence mixed with personality—a studio that takes the work seriously but doesn't take itself too seriously.

The brand voice is direct, confident, and conversational. Vocabulary patterns favor active verbs ("ship," "move," "embed") and concrete outcomes over abstract promises. The tone avoids corporate jargon; instead, it speaks to the lived experience of growing companies ("outgrown," "clearer positioning"). Example sentence in brand voice: "Ship a site, or embed a team—we help you do both."

Colors

The color system is built on a warm, light foundation (surface: #ffffff) with strategic accent deployment. Primary (#fec119, a warm golden yellow) is reserved exclusively for high-impact CTAs and brand moments—it appears on the "Book a call" button and key interactive elements, commanding attention through warmth rather than aggression. Secondary (#34d9c6, a teal-green) is used for supporting highlights, accent underlines, and illustration elements, creating visual rhythm without competing with primary. Tertiary (#fb5da5, a vibrant pink) reinforces brand personality in badges, testimonial highlights, and decorative accents. Error red (#fa575c) is used sparingly for validation states and warnings. The surface stack progresses from pure white (#ffffff) through warm grays (#f5f3f0, #ede9e3) t

Typography

The type system pairs Gelica (a bold, geometric serif) for headlines and Quicksand (a warm, rounded sans-serif) for body and UI text. This pairing communicates both authority and approachability: Gelica's structural confidence anchors the page, while Quicksand's softness makes the interface feel human. Display (72px, 700 weight, -0.02em tracking) is used for hero headlines and major section breaks, commanding the page with its scale and negative letter-spacing. Headline-lg (48px, 700) and headline-md (36px, 700) create a clear hierarchy for subsections. Body-lg (18px, 400, 28px line-height) and body-md (16px, 400, 24px line-height) are optimized for readability: the 1.5x line-height ratio (28px / 18px) ensures comfortable scanning on both mobile and desktop. Label-md (14px, 600, 0.05em tra

Layout

The page uses a 12-column fluid grid with a max-width of 1280px, centered with auto margins. The hero section spans full viewport height (min-h-svh) with py-32 lg:py-40 (128px / 160px vertical padding), creating breathing room around the headline. The grid breaks at lg (1024px): on mobile, content stacks vertically with 24px gutter spacing; on desktop, the hero uses a 5-column split (3 cols text, 2 cols illustration). Section separation uses lg spacing (40px) between major content blocks, with xl spacing (64px) reserved for page-level breaks. Container max-width is 1280px, enforced via mx-auto. Whitespace is treated as a design material: the hero illustration has -z-1 positioning and extends beyond the text column, creating visual depth through layering. All padding follows the spacing sca

Elevation & Depth

Depth is achieved through a restrained shadow system and layering, not through dark overlays or glassmorphism. Level 1 (Base): white background (#ffffff) with no shadow, establishing the clean foundation. Level 2 (Cards & Containers): 0 3px 8px rgba(0, 0, 0, 0.15) shadow, used on cards, input fields, and secondary surfaces—this soft shadow lifts elements 4-8px off the base. Level 3 (Modals & Elevated UI): 0 5px 40px rgba(0, 0, 0, 0.16) shadow, reserved for modals, dropdowns, and chat widgets—the larger blur radius (40px) and spread create a more pronounced lift. Hover states on buttons and car

Shapes

The shape philosophy is "Soft-Technical"—combining geometric precision with approachable softness. Buttons use rounded-lg (1rem / 16px border-radius), creating a friendly, modern appearance that avoids both sharp corners and excessive roundness. Cards and containers use rounded-xl (1.5rem / 24px), reinforcing the approachable aesthetic while maintaining clear visual boundaries. Input fields use rounded-DEFAULT (0.5rem / 8px), a subtle curve that signals interactivity without drawing attention. Badges and pills use rounded-full (9999px), creating the classic pill shape for status indicators. Th

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses backgroundColor: {colors.primary} (#fec119), textColor: {colors.on-primary} (#1a1a1a), rounded-lg (16px), padding 14px 24px, and height 48px. Typography is label-md (14px, 600 weight) but overridden to 20px 700 weight for visual prominence. On hover, the background shifts to #fdd700 (slightly desaturated) and shadow elevates to 0 3px 8px rgba(0, 0, 0, 0.15). Transition timing is 250ms cubic-bezier(0.4, 0, 0.2, 1). Secondary buttons use transparent background with 1px border (outline-variant color) and primary text color; on hover, background becomes surface-container-high (#ede9e3). The "Book a call" CTA is the most prominent button on the page, always using button-primary styling.

##

Do's and Don'ts

**Do**

• Do use primary (#fec119) exclusively for CTAs and high-priority interactions—never for backgrounds or decorative elements.
• Do pair Gelica headlines with Quicksand body text to maintain the confident-yet-approachable voice.
• Do apply consistent 24px gutter spacing between major sections and 12px padding inside cards to create visual rhythm.
• Do use the shadow system (0 3px 8px for Level 2, 0 5px 40px for Level 3) to create depth; never use dark overlays or opacity tricks.
• Do maintain 1.5x line-height (28px for 18px text) on body copy for legibility across all screen sizes.
• Do use rounded-lg (16px) for buttons and rounded-xl (24px) for cards—this is the signature shape language.

**Don't**

• Don't use secondary (#34d9c6) or tertiary (#fb5da5) on CTAs—these are supporting accents only.
• Don't mix Gelica and Quicksand weights arbitrarily; stick to 400 for body, 600 for labels, 700 for headlines.
• Don't apply shadows larger than 0 5px 40px or use multiple layered shadows—the system is intentionally restrained.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the system.
• Don't reduce line-height below 1.5x on body text or apply text-shadow on light backgrounds—legibility is non-negotiable.
• Don't apply primary color to backgrounds, borders, or non-interactive elements; it must remain reserved for CTAs and focus states.