kihealth.com — Design System

1. Visual Theme & Atmosphere

KI Health presents as a warm, approachable wellness brand — a deliberate departure from the clinical sterility typical of healthcare. The palette centers on a creamy off-white (#FFFCF8) ground with deep forest green as the primary brand expression. Accent yellows and oranges introduce warmth and optimism without veering into the garish. The typography system (Assistant, a humanist sans-serif) reinforces accessibility and friendliness. Animation tokens are unusually detailed — six duration levels from .1s to 3s — signaling a brand that uses motion expressively to guide users through an intentional journey. The result feels like a premium wellness app brought to web: warm, trustworthy, alive.

2. Color Palette & Roles

The palette tells a clear story: a warm, earthy wellness brand rooted in nature (forest green, cream) with optimistic accents (yellow, peach). The error red is kept purely functional. No cool greys — warmth is maintained throughout.

3. Typography Rules

A single-family system (Assistant) across all contexts. Heading weight token is 400 — hierarchy is established through size and spacing rather than weight contrast. Letter-spacing of 0.6px is used on certain elements, adding a subtle openness. Font scale token 1.0 means no global scaling — type renders at designed sizes throughout. Clean, democratic, and accessible.

4. Component Stylings

Buttons

• Shadow system: vertical offset + blur radius custom properties (--buttons-shadow-vertical-offset, --buttons-shadow-blur-radius)
• Corner radius controlled by --buttons-radius token
• Full opacity on background and border by default (--alpha-button-background: 1, --alpha-button-border: 1)
• Slide-in animation on appearance: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards

Cards (Collection)

• Corner radius: --collection-card-corner-radius
• Text alignment: --collection-card-text-alignment
• Shadow opacity: --collection-card-shadow-opacity

Blog Cards

• Shadow blur: 0.5rem
• Distinct shadow system from collection cards

Media / Images

• Border: 1px at 5% opacity — near-invisible structure
• Radius: 0px — rectangular by default (overridable)
• Shadow: disabled (--media-shadow-opacity: 0.0)

Badges

• Corner radius: --badge-corner-radius
• Border at 10% opacity — subtle definition

Inputs / Forms

• Radius: --inputs-radius
• Border width: --inputs-border-width
• Input color: #9EB4B1 (sage mist)

Navigation / Header

• Gradient fade from brand color to transparent mint
• --header-sticky-height token for sticky positioning

5. Layout Principles

• Grid system uses --grid-desktop-horizontal-spacing: 8px — tight column gutters
• --grid-mobile-vertical-spacing for vertical rhythm on mobile
• Body padding at 4rem on sides — generous breathing room
• Max-width suggested at 1440–1500px range
• --page-width and --content-max-width-with-nav tokens control layout bounds
• Full-width variant available via --full-page-width

6. Depth & Elevation

The shadow system is token-driven and multi-layered:

• Media: shadows disabled by default (flat cards)
• Buttons: configurable vertical offset + blur — subtle lift
• Blog cards: 0.5rem blur — moderate card depth
• Collection cards: separate opacity-based shadow control
• Popup: --popup-corner-radius, --popup-border-opacity — modal-level elevation

Depth escalates with UI importance: flat media → button lift → card depth → modal prominence. A clear, intentional elevation scale.

7. Do’s and Don’ts

Do:

• Use #FFFCF8 as the default background — never pure white
• Use #003F3C for all primary brand expressions (CTAs, headers, key labels)
• Apply the 6-step animation duration scale for all motion (.1s → 3s)
• Use cubic-bezier(0, 0, .3, 1) (ease-out-slow) for all UI transitions
• Keep Assistant at 400 for headings; use size, not weight, for hierarchy
• Use #9EB4B1 only for input/form contexts

Don’t:

• Use pure white (#FFF) as a background — it breaks the warm brand tone
• Add cold greys to the palette
• Override media radius to non-zero without a strong reason (flat is default)
• Mix in a second typeface — Assistant handles everything
• Use the error red (#EB0000) outside of form validation

8. Responsive Behavior

• Desktop grid: 8px horizontal spacing
• Mobile: vertical spacing token (--grid-mobile-vertical-spacing)
• Content max-width: ~1440–1500px with generous side padding (4rem desktop)
• Navigation height collapses via --header-sticky-height token
• The --media-padding token (currently px — likely 0) suggests full-bleed images on mobile

9. Agent Prompt Guide

Quick color reference:

• Canvas: #FFFCF8 warm cream
• Brand: #003F3C forest green
• Sage input: #9EB4B1
• Accent yellow: #FFF7B2
• Accent peach: #FFD79A
• Error: #EB0000

Prompt to recreate this style:

“Design a wellness brand website in the style of kihealth.com: warm cream background (#FFFCF8), deep forest green (#003F3C) for primary brand elements, humanist sans-serif (Assistant 400) throughout, subtle card shadows, optimistic yellow and peach accents. Atmosphere: approachable, premium wellness, warm and trustworthy.”

Prompt for a component:

“Create a product card: cream background, forest green heading in Assistant, peach or yellow accent badge, 0.5rem shadow blur, rectangular image (no radius), 8px grid gutter. Slide in on load using ease-out-slow.”

Generated by Sparkbites — extracted from live CSS analysis