Kernel Wealth

Overview

Kernel Wealth is a New Zealand fintech platform democratizing investment through low-cost KiwiSaver, index funds, and savings products. The brand embodies "Confident Accessibility"—a design philosophy that marries financial sophistication with warm, approachable aesthetics. The visual language combines a rich teal primary (#227b71) with warm cream neutrals (#f9f7f4) and serif typography (Kepler) for editorial authority, creating an interface that feels both trustworthy and inviting. The emotional response is one of clarity and empowerment: users feel guided through complex financial decisions without condescension.

Kernel's voice is direct, optimistic, and locally grounded. The brand speaks to Kiwis with practical wisdom—no jargon, no false urgency, no patronizing tone. Vocabulary patterns favor action verbs ("Make it happen," "Get started," "Learn more") and concrete outcomes ("low fees of 0.12%," "$4.8B under management"). The brand personality is a knowledgeable friend who simplifies without oversimplifying. Example sentence in brand voice: "Your KiwiSaver investment deserves a raise—and we've made it simple to give it one."

Colors

The Kernel color system is anchored in a confident teal primary (#227b71, rgb(34, 123, 113)) deployed on all primary CTAs, interactive states, and brand moments. This teal is warm enough to feel approachable yet saturated enough to command attention. The secondary accent (#05786b, rgb(5, 121, 107)) is a deeper, more saturated teal used for hover states and elevated interactions, creating a tactile sense of depth. Tertiary (#aa610b) is a warm burnt orange reserved for secondary information, alerts, and accent highlights—it provides visual relief against the cool teal palette.

The surface stack is built on warm, off-white foundations: surface (#f9f7f4) is the primary background, with container variants stepping down through grays (#dceae8, #c9cdcd) to create subtle visual hierarchy without

Typography

Kernel's type system pairs Kepler (a serif font for headlines and display) with Gilroy (a geometric sans-serif for body and UI text), creating a visual hierarchy that signals editorial authority at the top and functional clarity below. Display (64px, 400 weight, -0.02em tracking) is reserved for hero headlines and major announcements; it uses Kepler's elegant proportions to convey confidence. Headline-lg (40px, 400 weight) and headline-md (28px, 400 weight) maintain the serif voice for section titles, while body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) shift to Gilroy for readability in dense content. Label-md (14px, 600 weight, 0.01em tracking) and label-sm (12px, 600 weight, 0.05em tracking) are used for buttons, badges, and UI labels—the i

Layout

Kernel uses a 12-column fluid grid with a maximum container width of 1232px, centered with 24px gutters on desktop and 16px on mobile. The page rhythm is built on a 40px (lg spacing) section separator scale, creating breathing room between major content blocks. White-space is generous but purposeful: the hero section uses 64px (xl spacing) vertical padding to establish dominance, while card stacks use 24px (md spacing) for internal padding and 40px (lg spacing) between card groups. The spacing scale is semantic—xs (4px) for micro-interactions and icon spacing, sm (12px) for component internal padding, md (24px) for standard card/section padding, lg (40px) for section separation, and xl (64px) for hero and major layout breaks. Container max-width of 1232px ensures readability of body text a

Elevation & Depth

Kernel's elevation system uses soft, naturalistic shadows to create subtle layering without visual heaviness. The base level (Level 1) is the warm cream surface (#f9f7f4) with no shadow. Level 2 (standard cards, dropdowns, modals) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a gentle lift of 3px with a 8px blur radius—this is the most common elevation for interactive surfaces. Level 3 (elevated cards, tooltips, popovers) uses box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0.16), a larger blur (32px) with a tighter vertical offset (2px) to suggest floating above the page. The inverse-sur

Shapes

Kernel employs a "Soft-Technical" shape philosophy: rounded corners are present but restrained, signaling approachability without sacrificing professional credibility. Buttons and primary interactive elements use rounded-lg (1rem / 16px), a moderate radius that feels friendly yet structured. Cards and containers use rounded-lg (1rem) for consistency with buttons, creating a cohesive component family. Input fields and smaller UI elements use rounded-DEFAULT (0.5rem / 8px), a tighter radius that maintains visual hierarchy and suggests precision. The Intercom chat launcher uses rounded-full (50%

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses background-color: rgb(34, 123, 113) with color: rgb(255, 255, 255), padding: 12px 32px, height: 48px, and rounded-lg (16px). On hover, transition to button-primary-hover (background-color: rgb(5, 121, 107)) over 200ms with cubic-bezier(0.33, 0, 0, 1) easing. On active/pressed, shift to button-primary-active (background-color: rgb(125, 212, 200), color: rgb(32, 43, 41)) to provide tactile feedback. Button-secondary mirrors the primary structure but uses background-color: rgb(18, 59, 54) with color: rgb(201, 232, 229), creating a darker, more subtle appearance for secondary actions like "Log in." Button-ghost is transparent with a 1px border in outline color (#6b7a77), used for tertiary actions; on hover,

Do's and Don'ts

**Do**

• Do use the primary teal (#227b71) exclusively on CTAs and interactive focus states—it's the brand's signature and must remain distinctive.
• Do apply 24px (md spacing) as the default padding inside cards and containers; 40px (lg spacing) for section separation.
• Do pair Kepler serif for headlines (display, headline-lg, headline-md) with Gilroy sans-serif for body and UI text to maintain editorial authority and functional clarity.
• Do use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) as the standard card elevation; reserve 0 2px 32px 0 rgba(0, 0, 0, 0.16) for hover and elevated states only.
• Do maintain 48px minimum height for all buttons and input fields to ensure accessible touch targets on mobile.
• Do apply rounded-lg (16px) to buttons, cards, and primary containers; use rounded-DEFAULT (8px) for inputs and smaller UI elements.

**Don't**

• Don't use the secondary teal (#05786b) as a primary CTA color—it's reserved for hover states and secondary interactions only.
• Don't apply shadows darker than rgba(0, 0, 0, 0.16) or use pure black (#000000) in shadows; the warm background requires softer, warmer shadows.
• Don't mix serif and sans-serif fonts within a single headline or body paragraph—maintain clear typographic hierarchy by using Kepler for headlines and Gilroy for body.
• Don't use rounded corners smaller than 8px (rounded-DEFAULT) on interactive elements; sharp corners (0px) read as cold and dated against Kernel's warm aesthetic.
• Don't exceed 70 characters per line in body text; the 1232px container max-width ensures readability at 16px font size.
• Don't apply more than two levels of elevation (Level 2 and Level 3) in a single view—excessive shadows create visual noise and undermine the clean, accessible aesthetic.