Zainab Kabira

Overview

Zainab Kabira's portfolio embodies **Warm Minimalism with Playful Precision**—a design philosophy that marries austere, grid-based layouts with hand-drawn, organic accents. The brand serves independent product designers and technologists who value craft, shipping, and the intersection of design and code. The aesthetic is anchored in a sky-blue hero (radial-gradient ellipse 1000px 1340px at 68.65% 23.5%, transitioning between day and night themes) that scrolls beneath a cream-colored content layer (#fff9f1), creating a sense of depth and motion. The UI evokes clarity, approachability, and technical sophistication—a designer's designer who ships real work.

The voice is direct, precise, and unpretentious. Zainab speaks in concrete terms: "Shipped work with Google's Flutter team at Google I/O 2026" rather than vague claims. Typography oscillates between serif elegance (DM Serif Display at 156px for the hero headline, letter-spacing 3.1px) and monospace precision (JetBrains Mono for labels and metadata, letter-spacing 1.4px), signaling the duality of design and engineering. The brand personality is confident but not arrogant—a craftsperson showing their work, not selling a lifestyle.

Colors

The color system is rooted in a warm, cream-forward palette (#fff9f1 surface, #f4d24a secondary accent) with strategic use of deep ink (#0b0b0b on-surface) and white (#ffffff primary). **Primary (#ffffff)** is the dominant interactive surface—buttons, cards, and input fields use white as the base, creating a clean, paper-like aesthetic. **Secondary (#f4d24a)** is the brand's signature accent, appearing on hover states, the slider fill (var(--gold)), and the rotating word in the hero headline; it reads as warm, optimistic, and distinctly non-corporate. **Tertiary (#fc9073)** is a coral accent reserved for highlights and status indicators, adding warmth without competing with the secondary. **On-surface (#0b0b0b)** is the primary text color, a near-black that ensures legibility over cream ba

Typography

The type system is a deliberate split between **serif display** and **monospace utility**. DM Serif Display (400 weight, 156px, letter-spacing 3.1px) anchors the hero headline, conveying editorial authority and craft; the generous letter-spacing (3.1px = 0.02em) creates breathing room and a sense of luxury. Space Grotesk (700 weight, 32px, line-height 40px) handles body headlines and navigation, balancing warmth with geometric precision. JetBrains Mono (400 weight, 14px, letter-spacing 1.4px) is reserved for labels, metadata, and the recorder UI, reinforcing the technical, code-adjacent nature of the brand. Body text uses Space Grotesk at 16px / 400 weight / 24px line-height, ensuring readability on cream backgrounds. On small labels over busy backgrounds (e.g., the recorder title at 11px)

Layout

The page uses a **sticky hero + scrolling content** model: the hero (height: 100vh, position: sticky, top: 0, z-index: 1) remains fixed while the projects section (z-index: 10) scrolls over it, creating a parallax effect. The container max-width is 1440px, with a 12-column grid system. Horizontal padding is 60px on desktop (header padding: 24px 60px 0px), scaling down to 24px on tablets and 16px on mobile. The spacing scale uses semantic tokens: **lg (40px)** for section separation (projects padding: 317px 0 200px), **md (24px)** for component padding and gutter spacing, **sm (12px)** for internal element spacing. The sky-band (cream horizon) uses aspect-ratio: 1440 / 471 and is positioned absolutely at top: calc(200px - 32.71vw), anchoring the visual seam between hero and content. On view

Elevation & Depth

Depth is conveyed through **layered surfaces and subtle shadows** rather than dramatic drop-shadows. The hero background uses a radial gradient (ellipse 1000px 1340px at 68.65% 23.5%) to create atmospheric perspective, with the sky-band SVG (background-image: url("/assets/sky-band.svg"), background-size: 100% 100%) acting as a visual seam between the blue hero and cream content. The recorder pill (box-shadow: 0 11px 9.6px 0 rgba(0,0,0,0.25)) sits at Level 2 elevation, with an inset neumorphic bevel (box-shadow: inset 0 5px 7.3px 2px #f5f1ee, inset -2px -10px 2.3px 0 #b8b7b2) creating a tactile

Shapes

The design system employs **Mechanical Precision with Organic Accents**. Buttons and interactive elements use border-radius: 9999px (full pill shape), creating a friendly, approachable feel that contrasts with the serif headlines. The recorder pill, disk, and play circle all use full rounding, emphasizing their mechanical, retro-futuristic aesthetic. Cards and input fields use border-radius: 4px (DEFAULT) or 8px (md), providing subtle definition without harshness. The sky-band SVG and hero clouds use organic, hand-drawn curves (no border-radius, as they are vector assets), creating a playful c

Components

Action Elements **Buttons** come in two primary variants. The primary button (backgroundColor: #ffffff, textColor: #000000, border: 1px solid #c9c9c9, border-radius: 9999px, padding: 8px 16px, box-shadow: 0 11px 9.6px 0 rgba(0,0,0,0.25)) is the main CTA ("Work with me"), using white with a subtle shadow to create lift. On hover, the background shifts to #f5f1ee (primary-container) and the text to #070707 (on-primary-container), with a transform: scale(1.05) for tactile feedback. The secondary button (backgroundColor: #0b0b0b, textColor: #fff9f1, border-radius: 9999px, padding: 14px 26px) is used for navigation and secondary actions, inverting the color scheme for contrast. On hover, the background darkens to #2b2b2b (on-surface-variant) with opacity: 0.85, maintaining legibility. Both

Do's and Don'ts

**Do**

• Do use the cream background (#fff9f1) as the default surface—it's warm, approachable, and reduces eye strain on long reading sessions.
• Do apply the secondary accent (#f4d24a) sparingly on hover states, focus indicators, and key CTAs to create visual hierarchy without overwhelming the palette.
• Do pair DM Serif Display (156px, letter-spacing 3.1px) with Space Grotesk (16px, 400 weight) to balance editorial authority with technical precision.
• Do use full border-radius (9999px) on interactive elements (buttons, pills, knobs) to signal affordance and playfulness; reserve subtle rounding (4–8px) for containers.
• Do layer shadows and inset bevels on mechanical elements (recorder pill, disk, slider) to create tactile, embossed effects that feel handcrafted.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as the primary surface—stick to the cream (#fff9f1) and off-white (#f5f1ee) to maintain warmth and reduce contrast fatigue.
• Don't apply the tertiary coral (#fc9073) to primary CTAs; reserve it for secondary highlights and status indicators to avoid visual competition with the secondary accent.
• Don't mix serif and monospace fonts within a single headline or body paragraph—use serif for display/headlines and monospace for labels/metadata to maintain clarity.
• Don't animate the sky-band or hero clouds continuously; reserve animations for user interactions (hover, play/pause) to avoid turning the hero into a video loop.
• Don't exceed box-shadow: 0 11px 9.6px 0 rgba(0,0,0,0.25) on standard components—deeper shadows are reserved for the recorder pill and modal overlays to maintain visual hierarchy.