Remixes of kokamba.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Kokamba
description: |
Kokamba's design system embodies a modern, enterprise-focused aesthetic built
for African business management. The visual language balances bold, confident
primary accents with a clean, minimal foundation. The design prioritizes
clarity and accessibility through generous whitespace, precise typography, and
strategic color blocking rather than layered shadows. The primary brand purple
(#8612C9) commands attention in calls-to-action and interactive elements,
anchoring an otherwise neutral palette that emphasizes content hierarchy and
readability. Decorative dot-pattern gradients and subtle color transitions
between sections create gentle visual interest without compromising
professional credibility. The system reflects a platform designed for business
users across diverse technological contexts, balancing sophistication with
approachability.
source:
url: "https://kokamba.com"
pagesAnalyzed: 1
extractedAt: 2026-11-05
tokensMeasured: true
colors:
primary: "#8612C9"
accent: "#082471"
link: "#1A1A2E"
canvas: "#FFFFFF"
surface: "#E0E7FF"
surface-alt: "#F5F5F5"
on-primary: "#FFFFFF"
ink: "#111111"
body: "#0E1424"
muted: "#1A1A1A"
faint: "#212529"
hairline: "#EBE8F3"
accent-1: "#6B7280"
accent-2: "#5B6072"
accent-3: "#8A8FA0"
accent-4: "#0C0832"
accent-5: "#4338CA"
typography:
display-xl:
fontFamily: "Google Sans"
fontSize: 70.4px
fontWeight: 800
lineHeight: 1.12
letterSpacing: -2.82px
display-lg:
fontFamily: "Google Sans"
fontSize: 57.6px
fontWeight: 800
lineHeight: 1.05
letterSpacing: -1.44px
display-lg-2:
fontFamily: "Google Sans"
fontSize: 57.6px
fontWeight: 800
lineHeight: 1.05
letterSpacing: -1.15px
display-md:
fontFamily: "Google Sans"
fontSize: 48px
fontWeight: 800
lineHeight: 1.5
letterSpacing: 0px
display-sm:
fontFamily: "Google Sans"
fontSize: 46.08px
fontWeight: 700
lineHeight: 1.18
letterSpacing: -0.92px
display-xs:
fontFamily: "Google Sans"
fontSize: 43.2px
fontWeight: 700
lineHeight: 1.18
letterSpacing: -1.3px
heading-xl:
fontFamily: "Google Sans"
fontSize: 28px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 0px
heading-lg:
fontFamily: "Google Sans"
fontSize: 24px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 0px
heading-lg-strong:
fontFamily: "Google Sans"
fontSize: 24px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
heading-md:
fontFamily: "Google Sans"
fontSize: 20px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
heading-sm:
fontFamily: "Google Sans"
fontSize: 18px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
heading-xs:
fontFamily: "Google Sans"
fontSize: 14px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 0px
body-lg:
fontFamily: "Google Sans"
fontSize: 17.6px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
body-md:
fontFamily: "Google Sans"
fontSize: 17px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-sm:
fontFamily: "Google Sans"
fontSize: 16px
fontWeight: 300
lineHeight: 1.5
letterSpacing: 0px
body-sm-strong:
fontFamily: "Google Sans"
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-sm-2:
fontFamily: "Google Sans"
fontSize: 16px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
body-xs:
fontFamily: "Google Sans"
fontSize: 13.6px
fontWeight: 400
lineHeight: 1.7
letterSpacing: 0px
nav:
fontFamily: "Google Sans"
fontSize: 15px
fontWeight: 500
lineHeight: 1
letterSpacing: 0px
button-xl:
fontFamily: "Google Sans"
fontSize: 20px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
button-lg:
fontFamily: "Google Sans"
fontSize: 16px
fontWeight: 600
lineHeight: 1
letterSpacing: 0px
button-lg-strong:
fontFamily: "Google Sans"
fontSize: 16px
fontWeight: 700
lineHeight: 1.45
letterSpacing: 0px
button-md:
fontFamily: "Google Sans"
fontSize: 14.4px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
button-sm:
fontFamily: "Google Sans"
fontSize: 14.08px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
caption:
fontFamily: "Google Sans"
fontSize: 14px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
rounded:
none: 0px
xs: 3px
sm: 6px
md: 8px
lg: 10px
xl: 14px
xxl: 15px
r-16: 16px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 40px
band: 44px
borderWidths:
thin: 1px
medium: 2px
elevationStrategy: color-blocking
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#E0E7FF"
surfaceRaised: "#D8DEF5"
text: "#111111"
textMuted: "#0E1424"
border: "#EBE8F3"
accent: "#8612C9"
accentFg: "#FFFFFF"
focusRing: "#8612C9"
elevation: shadow
dark:
bg: "#100A15"
surface: "#1E1923"
surfaceRaised: "#2A252F"
text: "#FAF6FD"
textMuted: "#A19CA5"
border: "#36313A"
accent: "#B652EF"
accentFg: "#0B0B0C"
focusRing: "#9214DC"
elevation: "border+surface"
gradients:
- context: hero
kind: radial
value: "radial-gradient(circle, rgb(236, 238, 242) 1.2px, rgba(0, 0, 0, 0) 1.2px)"
- context: hero
kind: radial
value: "radial-gradient(circle, rgb(214, 218, 225) 1.2px, rgba(0, 0, 0, 0) 1.2px)"
- context: section
kind: linear
value: "linear-gradient(rgb(244, 241, 250), rgb(236, 231, 247))"
- context: section
kind: linear
value: "linear-gradient(rgba(9, 9, 16, 0.773), rgba(10, 7, 36, 0.22) 54%, rgba(10, 7, 36, 0) 78%)"
- context: section
kind: radial
value: "radial-gradient(circle, rgb(238, 240, 243) 1px, rgba(0, 0, 0, 0) 1px), none"
- context: section
kind: linear
value: "linear-gradient(160deg, rgb(247, 242, 253), rgb(255, 255, 255) 60%)"
components:
button-filled:
typography: "{typography.button-lg}"
textColor: "{colors.on-primary}"
height: 44px
padding: "12px 26px 12px 26px"
rounded: 50px
backgroundColor: "rgb(13, 17, 23)"
button-primary:
textColor: "{colors.on-primary}"
height: 41px
padding: "11px 22px 11px 22px"
fontSize: 15px
fontFamily: "Google Sans"
fontWeight: 600
lineHeight: 1
rounded: 50px
backgroundColor: "{colors.primary}"
button-primary-lg:
textColor: "{colors.on-primary}"
height: 53.9688px
padding: "14.4px 32px 14.4px 32px"
fontSize: 16.8px
fontFamily: "Google Sans"
fontWeight: 600
lineHeight: 1.5
rounded: 999px
backgroundColor: "{colors.primary}"
card:
typography: "{typography.body-sm-strong}"
textColor: "{colors.faint}"
border: "1px solid rgba(67, 56, 202, 0.1)"
padding: "32px 24px 32px 24px"
rounded: 5px
backgroundColor: "{colors.surface}"
card-lg:
typography: "{typography.body-sm-strong}"
textColor: "{colors.faint}"
border: "1px solid rgb(232, 232, 232)"
rounded: "{rounded.md}"
backgroundColor: "{colors.canvas}"
badge-primary:
textColor: "{colors.on-primary}"
height: 27.6562px
padding: "5.6px 9.6px 4.8px 9.6px"
fontSize: 11.52px
fontFamily: "Google Sans"
fontWeight: 600
lineHeight: 1.5
rounded: "{rounded.sm}"
backgroundColor: "{colors.primary}"
badge-filled:
textColor: "{colors.on-primary}"
height: 27.6562px
padding: "5.6px 9.6px 4.8px 9.6px"
fontSize: 11.52px
fontFamily: "Google Sans"
fontWeight: 600
lineHeight: 1.5
rounded: "{rounded.sm}"
backgroundColor: "rgb(42, 26, 94)"
navigation:
typography: "{typography.body-sm-strong}"
textColor: "{colors.faint}"
height: 90px
backgroundColor: "rgba(255, 255, 255, 0.85)"
footer:
typography: "{typography.body-sm-strong}"
textColor: "{colors.faint}"
padding: "70px 0px 0px 0px"
link:
textColor: "{colors.on-primary}"
padding: "16px 48px 16px 48px"
fontSize: 14px
fontFamily: "Google Sans"
fontWeight: 700
lineHeight: 0
rounded: "{rounded.xs}"
backgroundColor: "{colors.primary}"
link-lg:
textColor: "{colors.on-primary}"
padding: "8px 0px 8px 0px"
fontSize: 18px
fontFamily: "Google Sans"
fontWeight: 400
lineHeight: 1
rounded: "{rounded.xs}"
backgroundColor: "rgb(9, 36, 111)"
states:
other-disabled:
target: other
state: disabled
boxShadow: none
other-hover:
target: other
state: hover
textColor: "rgb(17, 24, 39)"
backgroundColor: "rgba(0, 0, 0, 0.06)"
other-focus:
target: other
state: focus
boxShadow: "rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem"
borderColor: "rgb(134, 183, 254)"
input-focus:
target: input
state: focus
boxShadow: "rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem"
borderColor: "rgb(134, 183, 254)"
input-disabled:
target: input
state: disabled
opacity: 0.5
button-disabled:
target: button
state: disabled
filter: none
opacity: 0.65
other-active:
target: other
state: active
backgroundColor: "rgb(182, 212, 254)"
nav-focus-visible:
target: nav
state: focus-visible
boxShadow: "rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem"
link-hover:
target: link
state: hover
textDecoration: none
input-active:
target: input
state: active
filter: "brightness(90%)"
breakpoints:
- width: 375
containerWidth: 351
gridColumns: 1
navLinksVisible: 1
menuToggleVisible: true
headingPx: 40
bodyPx: 16
sectionPaddingX: 20
- width: 768
containerWidth: 728
gridColumns: 2
navLinksVisible: 1
menuToggleVisible: true
headingPx: 38
bodyPx: 16
sectionPaddingX: 20
- width: 1024
containerWidth: 1016
gridColumns: 2
navLinksVisible: 1
menuToggleVisible: true
headingPx: 51
bodyPx: 16
sectionPaddingX: 20
- width: 1280
containerWidth: 1270
gridColumns: 5
navLinksVisible: 4
menuToggleVisible: true
headingPx: 58
bodyPx: 16
sectionPaddingX: 20
- width: 1440
containerWidth: 1430
gridColumns: 5
navLinksVisible: 4
menuToggleVisible: true
headingPx: 70
bodyPx: 16
sectionPaddingX: 20
coverage:
statesFound: 61
gradientsFound: 6
rolesUnassigned: 5
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Kokamba's design system embodies a modern, enterprise-focused aesthetic built for African business management. The visual language balances bold, confident primary accents with a clean, minimal foundation. The design prioritizes clarity and accessibility through generous whitespace, precise typography, and strategic color blocking rather than layered shadows. The primary brand purple ({colors.primary} — #8612C9) commands attention in calls-to-action and interactive elements, anchoring an otherwise neutral palette that emphasizes content hierarchy and readability. Decorative dot-pattern gradients and subtle color transitions between sections create gentle visual interest without compromising professional credibility. The system reflects a platform designed for business users across diverse technological contexts, balancing sophistication with approachability.
Key Characteristics
#8612C9) as the dominant call-to-action colour#082471) for hero sections and visual anchoring{rounded.full} — 9999px){colors.primary} — #8612C9): Dominant accent for primary calls-to-action, buttons, brand identity, active states, and hero highlights. Applied to links, badges, and key interactive moments to drive user attention.{colors.accent} — #082471): Deep navy used for hero section backgrounds, secondary visual anchoring, and elevated informational contexts. Provides sophisticated contrast to primary.{colors.link} — #1A1A2E): Inline link color for navigation and text-based interactions, near-black for maximum legibility.{colors.canvas} — #FFFFFF): Default page background and text color on brand-colored surfaces. Ensures maximum contrast and readability.{colors.surface} — #E0E7FF): Card and panel background, providing subtle visual separation from canvas. Soft indigo tint maintains brand cohesion.{colors.surface-alt} — #F5F5F5): Alternating section band background for visual rhythm and section delineation.{colors.ink} — #111111): Headings and primary text color. Near-black for maximum hierarchy and emphasis.{colors.body} — #0E1424): Body copy color, warm near-black for extended reading legibility.{colors.muted} — #1A1A1A): Captions and secondary text. Slightly lighter than body for hierarchical distinction.{colors.faint} — #212529): Tertiary text, placeholder text, and de-emphasized content.{colors.hairline} — #EBE8F3): 1px borders and dividers, providing delicate visual structure without harsh lines.{colors.accent-1} — #6B7280): No measured role; used decoratively in patterns or non-functional contexts.{colors.accent-2} — #5B6072): No measured role; used decoratively in patterns or non-functional contexts.{colors.accent-3} — #8A8FA0): No measured role; used decoratively in patterns or non-functional contexts.{colors.accent-4} — #0C0832): No measured role; used decoratively in patterns or non-functional contexts.{colors.accent-5} — #4338CA): No measured role; used decoratively in patterns or non-functional contexts.Primary: Google Sans (https://fonts.googleapis.com/)
Fallback stack: Google Sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Secondary: Caveat (https://fonts.googleapis.com/) Used sparingly for decorative or stylized contexts.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Google Sans | 70.4px | 800 | 1.12 | -2.82px | Hero headline, highest emphasis |
| Display LG | Google Sans | 57.6px | 800 | 1.05 | -1.44px | Large hero or section lead |
| Display LG 2 | Google Sans | 57.6px | 800 | 1.05 | -1.15px | Alternate large display variant |
| Display MD | Google Sans | 48px | 800 | 1.5 | 0px | Section headline |
| Display SM | Google Sans | 46.08px | 700 | 1.18 | -0.92px | Medium display headline |
| Display XS | Google Sans | 43.2px | 700 | 1.18 | -1.3px | Smaller display heading |
| Heading XL | Google Sans | 28px | 500 | 1.2 | 0px | Section subheading |
| Heading LG | Google Sans | 24px | 500 | 1.2 | 0px | Subsection heading |
| Heading LG Strong | Google Sans | 24px | 700 | 1.2 | 0px | Emphasized subsection heading |
| Heading MD | Google Sans | 20px | 700 | 1.2 | 0px | Feature heading |
| Heading SM | Google Sans | 18px | 700 | 1.2 | 0px | Card or module heading |
| Heading XS | Google Sans | 14px | 500 | 1.2 | 0px | Small heading or label |
| Body LG | Google Sans | 17.6px | 400 | 1.6 | 0px | Extended reading, large contexts |
| Body MD | Google Sans | 17px | 400 | 1.5 | 0px | Standard body copy |
| Body SM Strong | Google Sans | 16px | 400 | 1.5 | 0px | Body copy with standard weight |
| Body SM 2 | Google Sans | 16px | 600 | 1.5 | 0px | Emphasis within body |
| Body SM | Google Sans | 16px | 300 | 1.5 | 0px | Light body copy or secondary text |
| Body XS | Google Sans | 13.6px | 400 | 1.7 | 0px | Caption or small text |
| Button XL | Google Sans | 20px | 700 | 1.5 | 0px | Large button text |
| Button LG | Google Sans | 16px | 600 | 1 | 0px | Large CTA button |
| Button LG Strong | Google Sans | 16px | 700 | 1.45 | 0px | Large emphasized button |
| Button MD | Google Sans | 14.4px | 600 | 1.5 | 0px | Standard button |
| Button SM | Google Sans | 14.08px | 400 | 1.6 | 0px | Small or secondary button |
| Caption | Google Sans | 14px | 600 | 1.5 | 0px | Figure captions, metadata |
| Navigation | Google Sans | 15px | 500 | 1 | 0px | Navigation link label |
Primary Button
{colors.primary} (#8612C9){colors.canvas} (#FFFFFF){typography.button-lg} (16px, weight 600)11px 22px{rounded.full} (9999px)Primary Button - Large
{colors.primary} (#8612C9){colors.canvas} (#FFFFFF)14.4px 32px{rounded.full} (9999px)Secondary Button (Filled / Dark)
#0D1117 (near-black){colors.canvas} (#FFFFFF){typography.button-lg} (16px, weight 600)12px 26px{rounded.full} (9999px)Ghost / Outlined Button
{colors.accent} (#082471){colors.accent} (#082471){rounded.full} (9999px)Hover States
:hover via CSS custom properties (--cc-btn-primary-hover-color, --cc-btn-secondary-hover-color)Card - Default (Surface)
{colors.surface} (#E0E7FF)rgba(67, 56, 202, 0.1){rounded.xs} (3px)32px 24px#212529Card - Large (Canvas)
{colors.canvas} (#FFFFFF)#E8E8E8{rounded.md} (8px)0px (full-bleed)#212529Badge - Primary
{colors.primary} (#8612C9){colors.canvas} (#FFFFFF)5.6px 9.6px{rounded.sm} (6px)Badge - Filled (Dark)
#2A1A5E{colors.canvas} (#FFFFFF)5.6px 9.6px{rounded.sm} (6px)Text Input - Default
{colors.canvas} (#FFFFFF){spacing.xxs} (1px) solid {colors.hairline} (#EBE8F3){rounded.md} (8px){colors.body} (#0E1424)Text Input - Focus
#84B2B8 (custom focus ring)rgba(8, 36, 113, 0.25) 0px 0px 0px 0.25remscale(0.85) translateY(-0.5rem) translate(0.15rem) (label animation)Text Input - Disabled
var(--bs-secondary-bg) (slightly muted)Input - Valid Focus
0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25)var(--bs-form-valid-border-color)Input - Invalid Focus
0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25)var(--bs-form-invalid-border-color)Header Navigation
rgba(255, 255, 255, 0.85) (semi-transparent white){colors.muted} (#1A1A1A)Navigation Link
{typography.nav} (15px, weight 500){colors.link} (#1A1A2E)Navigation Link - Hover
{colors.primary} (#8612C9)Navigation Link - Focus
rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25remFooter Container
0px 0px 20px 20px#212529Link - Default
{colors.primary} (#8612C9){colors.primary} on certain contexts (inline button-style links)Link - Hover
{colors.primary} (via var(--cc-primary-color))Base Unit: {spacing.xs} = 8px
Scale:
{spacing.xxs} = 4px (micro-spacing, inline gutters){spacing.xs} = 8px (base unit for small separations){spacing.sm} = 12px (tight padding, icon spacing){spacing.md} = 16px (standard padding, card gutters){spacing.lg} = 20px (generous padding, section margins){spacing.xl} = 24px (header/footer spacing){spacing.xxl} = 28px (large component gaps){spacing.xxxl} = 32px (section spacing){spacing.section} = 40px (major section breaks){spacing.band} = 44px (full-width section padding)Usage Context:
{spacing.md} (16px) padding{spacing.xl} (24px) padding{spacing.section} (40px) or {spacing.band} (44px){spacing.lg} (20px){spacing.lg} (20px) consistent across all breakpointsThe system embraces generous whitespace as a core principle, not an afterthought. Sections breathe with {spacing.section} (40px) or {spacing.band} (44px) vertical spacing, and cards maintain consistent {spacing.xl} (24px) internal padding. This approach prioritizes content hierarchy, scannability, and perceived quality over information density. Body copy uses relaxed line heights (1.5–1.7) to enhance legibility, and interactive elements are generously padded to avoid crowding. Borders are hairline ({colors.hairline} — #EBE8F3) rather than thick, and shadows are absent, allowing color blocking and spacing alone to establish depth.
{rounded.none} = 0px (cards, overlays, sharp edges){rounded.xs} = 3px (subtle rounded corners, card default){rounded.sm} = 6px (badge corners, small component rounding){rounded.md} = 8px (input fields, moderate rounding){rounded.lg} = 10px (decorative elements){rounded.xl} = 14px (components with pronounced rounding){rounded.xxl} = 15px (slightly aggressive rounding){rounded.r-16} = 16px (large component rounding){rounded.full} = 9999px (pill-shaped buttons and fully rounded elements)Component-Specific Contexts:
{rounded.full} (9999px pill shape){rounded.xs} (3px) or {rounded.md} (8px) depending on variant{rounded.sm} (6px){rounded.md} (8px){rounded.none} (0px, sharp)The design system employs color-blocking as its primary depth strategy. Depth is communicated through intentional background color shifts (canvas → surface → accent) rather than layered shadows. The site extract shows no measurable box-shadow implementation, confirming a flat, modern aesthetic where visual separation relies on color relationships and spatial positioning.
Elevation Philosophy: No multi-level shadow system is implemented. The absence of shadows reinforces the system's contemporary, accessible feel and ensures legibility across all contexts, especially on lower-fidelity screens or printed materials. Elevation is instead established through:
rgba(67, 56, 202, 0.1) on card borders)Usage Contexts:
| Context | Z-index | Usage |
|---|---|---|
| Base | 1 | Default document flow |
| Base | 2 | Slightly elevated elements (e.g., card hovers) |
| Base | 3 | Low-priority overlays |
| Dropdown | 10 | Dropdown menus and popovers |
| Modal | 1055 | Modal dialogs and overlays |
| Modal | 9000 | High-priority modals or interrupts |
| Toast | 100000 | Floating notifications, always on top |
{colors.primary} (#8612C9) for all primary calls-to-action and interactive highlights{spacing.section} (40px) or {spacing.band} (44px){rounded.full} (9999px) to all button and pill-shaped interactive elements{typography.display-xl} (70.4px, weight 800) with negative letter-spacing (-2.82px) for hero headlines to create confident visual presence{colors.surface} (#E0E7FF) and {colors.canvas} (#FFFFFF) backgrounds for clear visual hierarchy{typography.heading-xs} (14px, weight 500) for consistencyrgba(8, 36, 113, 0.25) 0px 0px 0px 0.25rem box-shadow{colors.hairline} — #EBE8F3, 1px solid) for subtle visual separation{rounded.full} (9999px) — maintain the pill aesthetic{spacing.band} (44px) for section padding horizontally; maintain visual consistency{colors.ink} (#111111) or {colors.body} (#0E1424) for interactive element backgrounds| Breakpoint | Width | Content Column | Grid Columns | Nav Links Visible | Menu Toggle | Largest Heading | Notes |
|---|---|---|---|---|---|---|---|
| Mobile | 375px | 351px | 1 | 1 link | yes | 40px | Single-column stack, nav menu collapsed |
| Tablet Small | 768px | 728px | 2 | 1 link | yes | 38px | Two-column layout, menu still compact |
| Tablet Large | 1024px | 1016px | 2 | 1 link | yes | 51px | Maintained two-column, heading size increases |
| Desktop | 1280px | 1270px | 5 | 4 links | yes | 58px | Five-column grid, multiple nav links visible |
| Desktop Large | 1440px | 1430px | 5 | 4 links | yes | 70px | Full-width content, all nav links shown |
Breakpoint Strategy:
{spacing.lg} (20px) horizontal padding{spacing.md} (16px) minimum{spacing.md} (16px) horizontally and vertically for comfortable touch{spacing.band} (44px) remains consistent horizontally but may compress vertically{colors.primary} — #8612C9){colors.accent} — #082471){colors.canvas} — #FFFFFF){colors.surface} — #E0E7FF){colors.ink} — #111111){colors.body} — #0E1424){colors.muted} — #1A1A1A){colors.hairline} — #EBE8F3)Button Styling: All buttons are pill-shaped ({rounded.full} — 9999px). Primary buttons use #8612C9 background with white text. Secondary buttons use near-black backgrounds. Maintain 2px medium border stroke on outlined variants.
Typography Hierarchy: Display sizes (Display XL–SM) use aggressive negative letter-spacing (-2.82px to -0.92px) to create confident headlines. Body copy maintains 0px letter-spacing and 1.5–1.7 line height for legibility. Buttons use tight line heights (1–1.5) for compact visual stability.
Spacing System: Base unit is 8px ({spacing.xs}). Sections break at {spacing.section} (40px) or {spacing.band} (44px). Cards use {spacing.xl} (24px) internal padding. Consistent {spacing.lg} (20px) section edge padding across all breakpoints.
Depth via Color-Blocking: No shadows are used. Depth is established through intentional background color shifts (white → soft indigo → accent navy). Use {colors.hairline} (1px, #EBE8F3) for subtle borders.
Responsive Collapse Points: Navigation hides into menu toggle below 1280px. Grid shifts 5 columns (1280px+) → 2 columns (768px) → 1 column (375px). Headline sizes reduce proportionally: 70.4px at 1440px → 40px at 375px.
Focus & Interaction: Focused elements receive rgba(8, 36, 113, 0.25) 0px 0px 0px 0.25rem box-shadow with #84B2B8 border color. Hover states reduce opacity to 0.9 or shift color via CSS custom properties. Disabled states use 0.5 opacity.
Card Variants: Default cards use {colors.surface} (#E0E7FF) with 3px radius. Large cards use white background with 8px radius and minimal internal padding. Both use 1px hairline borders ({colors.hairline}).
Navigation Structure: Header height is 90px. Nav links are 15px weight-500 Google Sans. Navigation background is rgba(255, 255, 255, 0.85) (semi-transparent). Links transition to primary color on hover.
Form Inputs: Default text inputs use white background with 1px hairline border and 8px radius. Focus state triggers label animation (scale(0.85) translateY(-0.5rem)) and blue focus ring. Disabled inputs reduce opacity to 0.5.
Footer Styling: Footer has 20px border-radius on bottom corners only. Padding-top is 70px. Text color is body gray (#212529). No background shadow or border; rely on layout spacing for separation.
{colors.accent-1} through {colors.accent-5}) have no measured semantic role and are treated as decorative only. Their functional purposes (if any) remain unmapped.