Kira Learning Design System

Overview

Kira Learning presents itself as a sophisticated yet approachable AI-powered education platform, wrapped in a design language that balances institutional authority with modern warmth. The dominant canvas is not sterile white but a gentle cream ({colors.surface-warm} — #fffdf0), which immediately signals approachability and differentiates it from the cold SaaS norm. Against this warmth, near-black ink ({colors.ink}) and deep charcoal body text ({colors.body}) create strong typographic hierarchy without aggression.

The brand's voltage lives in two distinct modes: first, through signature inline highlight treatments where key terms—"AI" and "education"—receive colored background boxes ({colors.accent-purple} lavender and {colors.accent-mint} mint respectively), creating memorable typographic punctuation within the editorial headline; second, through a rich indigo-purple ({colors.brand-purple}) that powers the primary CTA system, the demo environment background, and active UI states. This dual-voltage approach means the brand feels both intellectual (the serif headlines, the restrained palette) and vibrant (the playful highlights, the saturated CTAs).

Typography is the system's defining move. Headlines use {typography.display-lg} in Recife Text Web—a refined serif with modest weight (400 only, never bold)—while all body and interface text flows in Messina Sans Web. There is no bold in the heading system; emphasis comes from scale, color contrast, and the highlight box technique. This restraint is unusual for education tech and signals confidence.

Shape language leans toward the gently rounded: {rounded.lg} (14px) on major containers, {rounded.sm} (4px) on buttons and inputs, and {rounded.pill} on status badges. Cards breathe with generous internal padding ({spacing.lg} = 24px) and subtle elevation ({extensions.shadows.sm}). The demo preview section introduces a dramatic band of solid {colors.brand-purple} that houses the product mockup, creating visual rhythm through alternating surface temperatures.

A sub-system dialect emerges in the product preview: the dashboard-style interface within the demo band uses darker surfaces ({colors.ink} sidebar), tool-selector cards with branded fills, and status badges with semantic color coding. This suggests Kira maintains an editorial marketing face while its product surface adopts a more functional, higher-density information design.

Key Characteristics:

• Warm cream hero canvas ({colors.surface-warm}) replaces default white for emotional warmth
• Serif headlines ({typography.display-lg}) at weight 400 only—no bold, ever
• Signature highlight boxes ({colors.accent-purple}, {colors.accent-mint}) punctuate key headline terms
• Deep indigo-purple ({colors.brand-purple}) as the single CTA/active-state brand color
• Dual typeface pairing: Recife Text for display, Messina Sans for everything else
• Rounded container vocabulary ({rounded.lg} = 14px) with sharp-ish buttons ({rounded.sm} = 4px)
• Generous vertical rhythm with {spacing.hero} (100px) hero padding and {spacing.section} (64px) section breaks
• Product preview sub-system uses inverted dark-mode aesthetics against {colors.brand-purple} field

Colors

Brand & Accent

• Primary ({colors.primary} — #0000ee): Standard web blue used primarily for links and semantic info states. Appears in navigation anchor text.
• Primary Hover ({colors.primary-hover} — #0000cc): Darkened blue for interactive hover states on links.
• Accent Purple ({colors.accent-purple} — #b8b3f7): Soft lavender background for inline headline highlight treatment (e.g., the "AI" box in the hero).
• Accent Mint ({colors.accent-mint} — #56eaf9): Bright mint-cyan background for the "education" highlight box—higher visual energy than the purple counterpart.
• Brand Purple ({colors.brand-purple} — #7551f0): The core action color—used on primary CTAs ("Preview Kira 2.0", "Accept"), active tool cards, demo band background, and active sidebar icons.
• Brand Purple Dark ({colors.brand-purple-dark} — #5a3dc7): Deeper shade for pressed/active states on brand-purple buttons.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white used for content cards, modals, chat panels, and the base page background below the fold.
• Surface Soft ({colors.surface-soft} — #f5f5f4): Near-white neutral for rejected button backgrounds, subtle surface differentiation.
• Surface Warm ({colors.surface-warm} — #fffdf0): The signature cream tone for the entire header and hero section. This is the most emotionally resonant surface in the system.
• Surface Lavender ({colors.surface-lavender} — #c9c4f5): Muted lavender used in decorative gradient bands or subtle background texture in the demo area.
• Surface Indigo ({colors.surface-indigo} — #a99cf5): Richer purple-lavender for the main demo section background gradient layer.
• Surface Blue Tint ({colors.surface-blue-tint} — #f4f6fc): Very pale cool gray-blue for ghost/secondary button backgrounds ("Assessment", "ChatPods").

Text & Ink

• Ink ({colors.ink} — #000000): Pure black for maximum-contrast elements: headline text, logo, primary nav items, solid-fill buttons.
• Body ({colors.body} — #1a1a1a): Near-black (95% black) for subheads, navigation labels, and primary paragraph text when maximum punch is needed.
• Muted ({colors.muted} — #6b6761): Warm mid-gray for hero subheading copy, descriptive text, and secondary information.
• Body Text ({colors.body-text} — #504d49): Dark taupe-gray for standard body paragraphs—the workhorse reading color.
• Muted Dark ({colors.muted-dark} — #444444): Medium-dark gray for input placeholder text or tertiary labels.
• Muted Soft ({colors.muted-soft} — #999999): Light gray for disabled text, timestamps, or de-emphasized metadata.
• On Primary ({colors.on-primary} — #ffffff): White text on colored backgrounds—brand-purple buttons, active tool cards, sidebar active states.
• On Dark ({colors.on-dark} — #ffffff): White text on black/dark backgrounds—nav primary buttons, sidebar icons, footer text.
• On Warm ({colors.on-warm} — #1a1a1a): Dark text specifically calibrated for readability on {colors.surface-warm} cream backgrounds.

Hairlines & Borders

• Hairline ({colors.hairline} — #ebebeb): Very light gray for subtle dividers between content zones or card borders.
• Border Soft ({colors.border-soft} — #dddddd): Medium-light gray for outlined button borders ("Book a demo") and input fields in default state.
• Border Input ({colors.border-input} — #cccccc): Standard form border color for focused or interactive input boundaries.

Semantic

• Error ({colors.error} — #cc3333): Red for validation errors, overdue status badges, destructive actions.
• Success ({colors.success} — #228822): Green for confirmation states, successful submissions.
• Warning ({colors.warning} — #cc8800): Amber/orange for due-today status badges and cautionary notices.
• Info ({colors.info} — #0000ee): Blue for informational callouts, matching the primary/link color.
• Link ({colors.link} — #0000ee): Standard hyperlink blue for inline navigation text.
• Link Hover ({colors.link-hover} — #0000cc): Darkened blue on hover for interactive feedback.

Typography

Font Family

The system employs a carefully chosen dual-typeface pairing that separates editorial voice from functional clarity. Recife Text Web serves as the display and heading face—a transitional serif with elegant terminals, moderate stroke contrast, and a literary quality that signals thoughtfulness and academic rigor. It appears exclusively in the {typography.display-xl}, {typography.display-lg}, {typography.title-md}, and {typography.title-sm} roles, always at weight 400 (regular). There are no bold or italic variants deployed in the current design; hierarchy is achieved through scale alone.

Messina Sans Web handles all body text, interface labels, navigation, buttons, and data. It's a clean geometric-humanist hybrid with excellent screen legibility, appearing in regular (weight 400) for body copy and semibold (weight 600) for buttons and emphasis. Fallback stacks include system fonts (-apple-system, BlinkMacSystemFont, sans-serif) ensuring graceful degradation. Both fonts appear to be proprietary/Kira-hosted webfonts rather than Google Fonts or Adobe Fonts CDN deliveries.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 64px | 400 | 1.1 | -0.3px | Future-use mega headlines (not yet observed in screenshot) | | {typography.display-lg} | 48px | 400 | 1.1 | -0.3px | Hero headline: "The AI operating system for education" | | {typography.title-md} | 32px | 400 | 1.1 | -0.3px | Section headings below hero | | {typography.title-sm} | 24px | 400 | 1.2 | -0.2px | Modal titles, card headings, sub-section titles | | {typography.body-md} | 16px | 400 | 1.4 | -0.3px | Hero subhead paragraph, body copy, card content | | {typography.body-sm} | 14px | 400 | 1.45 | 0 | Secondary descriptions, fine print, metadata | | {typography.caption} | 13px | 400 | 1.38 | 0 | Status badges, timestamps, labels | | {typography.button} | 14px | 600 | 1.25 | 0 | All button text, CTA labels | | {typography.label} | 13px | 500 | 1.3 | 0 | Tool card labels, tag text, small UI labels | | {typography.nav-link} | 15px | 400 | 1.4 | 0 | Top navigation menu items |

Principles

The typography system operates on a philosophy of restraint over emphasis. Unlike typical SaaS patterns that reach for weight 700 (bold) or 800 (extra-bold) for headlines, Kira's display type never exceeds weight 400. This is a deliberate choice: the Recife Text serif carries enough intrinsic authority at regular weight that bolding would cheapen it. Hierarchy is established through dramatic size jumps (48px → 16px is a 3× ratio between headline and body), negative letter-spacing on large type (-0.3px tightens the 48px headline elegantly), and color value shifts (headline at {colors.ink}, subhead at {colors.muted}).

The highlight box technique is the system's signature typographic moment. By wrapping individual words in colored background rectangles ({component.hero-highlight-purple}, {component.hero-highlight-mint}), the design creates visual interest and scannable keywords without resorting to weight or case changes. This also serves as a mini-brand moment—the lavender/mint combination becomes recognizable.

Line heights are relatively tight for a reading-focused site (1.1 on headlines, 1.4 on body), which creates a compact, modern feel. Letter-spacing is slightly negative on larger sizes to optically correct for the increased whitespace inside big characters. Button text uses Messina Sans Semibold at 14px—the only place weight increases—to ensure CTAs pop against their backgrounds.

Note on Font Substitutes

Both Recife Text Web and Messina Text Web are proprietary fonts (likely custom or from a commercial foundry). For open-source implementation:

• Recife Text Web can be approximated by Source Serif 4 (Google Fonts) or Lora (Google Fonts) for the serif display role. Set CSS variable --font-display: 'Source Serif 4', serif.
• Messina Sans Web maps closely to DM Sans or Plus Jakarta Sans (both Google Fonts) for the sans-serif UI role. Set --font-body: 'DM Sans', -apple-system, sans-serif.
• For monospace needs (code snippets, data tables), Fragment Mono was detected in the @font-face declarations and should be preserved as-is via Google Fonts import.

If exact fidelity is required, these fonts may be available through Kira's brand assets or a commercial licensing arrangement.

Layout

Spacing System

• Base unit: 4px (inferred from the 8/12/16/20/24/32 progression).
• Tokens: {spacing.xxs} (2px — micro-adjustments), {spacing.xs} (4px — icon gaps), {spacing.sm} (8px — tight internal padding), {spacing.md} (16px — standard element gap), {spacing.lg} (24px — card internal padding, component gaps), {spacing.xl} (32px — section-internal breathing room), {spacing.xxll} (48px — major section breaks), {spacing.section} (64px — vertical band transitions), {spacing.hero} (100px — hero vertical padding).
• Section padding (vertical): {spacing.hero} (100px) in the hero band; {spacing.section} (64px) for content sections below.
• Card internal padding: {spacing.lg} (24px) on {component.demo-surface-card} and {component.modal-card}; tighter {spacing.md} equivalent on smaller tool cards.
• Gutters: Horizontal page gutter is approximately 30px (from extracted section padding: 0px 30px). Nav bar uses 20px horizontal padding.

Grid & Container

• Max content width: 1440px (extracted from both <main> and <section> container widths). Content is centered within viewport.
• Editorial density: The hero section uses a centered single-column layout (text block roughly 800-900px max-width) for optimal reading. The demo band switches to a wider, more cinematic layout showing the product surface edge-to-edge within the container.
• Specific grid behaviors: The hero presents a centered text column above a full-width (within 1440px container) demo illustration band. No multi-column text grids were observed in this viewport.
• Hero column splits: Single centered column for headline + subhead + CTA group. The CTA buttons sit horizontally adjacent with a gap of approximately {spacing.md} (16px).

Whitespace Philosophy

Kira embraces generous, confident whitespace—particularly vertically. The 100px hero padding ({spacing.hero}) and 64px section breaks ({spacing.section}) create a luxurious, unhurried reading experience. Horizontally, content breathes but doesn't waste space: the headline wraps naturally, buttons cluster tightly, and the demo preview fills its container. This is editorial-airy, not marketplace-dense. The warm cream background amplifies the sense of openness by feeling like paper rather than screen.

Header Architecture

+------------------------------------------------------------------+
| [Kira Logo]   Resources v  Company v  Privacy     Login  Teach..  [See Kira 2.0] |
+------------------------------------------------------------------+
                 ^--- max-width: ~979px (nav) ---^        ^- button -^
                  ^-------- full width: 1440px -----------^

The top navigation ({component.top-nav}) sits on the {colors.surface-warm} background at ~72px height. Logo flush-left, dropdown menus center-left with chevron indicators, utility links (Login, Teacher Sign up) flush-right, followed by the primary CTA button ({component.nav-button-primary}) in solid black.

Hero Section

+------------------------------------------------------------------+
|                                                                  |
|              The [AI ] operating                                 |
|              system for [education ]                             |
|                                                                  |
|         Kira runs instruction, assessment, and intervention...   |
|                                                                  |
|            [ Preview Kira 2.0 ]  [ Book a demo ]                |
|                                                                  |
|                     ^-- hero-band padding: 100px vertical --^    |
+------------------------------------------------------------------+

Centered text column with {typography.display-lg} headline featuring inline highlight boxes. Subhead in {typography.body-md} at muted color. CTA pair: solid black primary ({component.button-primary-solid}) + outline secondary ({component.button-secondary-outline}).

Demo Band Section

+==================================================================+
||  =============================================================== ||
||  ||  [AI Tools]                              [View All]       || ||
||  ||  [Lesson Studio][Course Studio][Assessment][ChatPods][ > ] || ||
||  ||                                                            || ||
||  ||  [Sidebar]  |  [Content List]  |  [Chat Panel Kira AI]    || ||
||  ||                                                            || ||
||  =============================================================== ||
||                        (decorative circle)                      ||
+==================================================================+
       ^----------- brand-purple background ----------^

Full-width (within 1440px) band in {colors.brand-purple} containing a white {component.demo-surface-card} that mocks up the product dashboard. Tool selector pills across the top, three-column inner layout (sidebar nav / scrollable content list / chat panel). Large decorative {component.decorative-circle-large} overlaps bottom-right corner.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, no border | Base surfaces: {colors.canvas}, {colors.surface-warm} | | 1 (Hairline) | {extensions.shadows.sm} (subtle light shadow) | Floating cards: {component.demo-surface-card}, {component.tool-card-inactive} | | 2 (Raised) | {extensions.shadows.md} (medium drop) | Modals, dropdowns (inferred) | | 3 (Modal) | {extensions.shadows.lg} (deep drop) | Overlay panels, cookie consent modal | | Inset | {extensions.shadows.inset} (inner shadow) | Input focus rings, pressed button states | | None | Zero-opacity shadow | Flat elements explicitly avoiding depth |

The system favors a layered-flat approach: most surfaces live at Level 0 or Level 1, with only modals and overlays earning significant elevation. The demo card floats subtly above its purple field, and the cookie modal rises clearly above the content beneath it. Shadows are neutral-cool (no warm tinting), keeping them invisible until needed.

Color-blocking provides more depth than shadow-work does: the dramatic shift from cream ({colors.surface-warm}) to deep purple ({colors.brand-purple}) between hero and demo sections creates visual strata without relying on drop shadows.

Decorative Depth

Beyond functional elevation, the design employs decorative depth elements:

• The large overlapping circle ({component.decorative-circle-large}) in solid {colors.brand-purple} that breaks the frame of the demo card, creating a playful "breaking the grid" moment.
• The subtle gradient wash in the demo band background transitioning from {colors.surface-lavender} toward {colors.surface-indigo}.
• Highlight boxes on headline text act as flat-decorative depth—colored planes sitting atop the text line.

These elements signal creativity and approachability while the structural UI remains disciplined and clean.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Buttons, inputs, small tags, sharp UI controls | | {rounded.DEFAULT} | 8px | Default component rounding (general-purpose) | | {rounded.md} | 12px | Tool cards, medium containers, panel corners | | {rounded.lg} | 14px | Major surface cards (demo preview, modals), hero highlight boxes (mint variant) | | {rounded.xl} | 20px | Large feature cards, image containers (inferred) | | {rounded.pill} | 9999px | Status badges (overdue, due-today, due-tomorrow) | | {rounded.full} | 9999px | Fully circular elements: avatar placeholders, decorative circles |

The shape vocabulary is intentionally narrow: four functional radii (4/8/12/14px) cover 90% of cases, with pill and full reserved for special badge and circular uses. The distinction between {rounded.sm} buttons (sharp, actionable) and {rounded.lg} cards (soft, containery) creates a tactile micro-hierarchy.

Photography Geometry

No photography was prominently featured in the observed viewport. The demo preview contains what appears to be a generative/AI-produced abstract image (swirling pink-blue textures) within the chat panel, displayed with slight rounding consistent with {rounded.lg}. If imagery is added to other sections, it should follow the card-container radius convention (14px) and maintain the warm-or-vibrant color palette established by the highlight accents.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-solid} has no explicit -hover entry; add hover styling at implementation time per your stack's conventions).

Buttons & CTAs

{component.button-primary-solid} — The main conversion button in the hero context ("Preview Kira 2.0"). Solid {colors.ink} background with {colors.on-dark} white text, {typography.button} semibold typeface, {rounded.sm} tight corners, {spacing.lg} horizontal padding plus 12px vertical. This is the highest-commitment CTA on the page. Its state variants would include hover (slight darken or lift) and active (pressed inset).

{component.button-secondary-outline} — The companion lower-commitment CTA ("Book a demo"). Transparent background with 1px {colors.border-soft} border, {colors.ink} text, same type and radius as primary. Used alongside {component.button-primary-solid} in the hero CTA group ({component.hero-cta-group}), positioned to the right of the solid button with ~16px gap.

{component.nav-button-primary} — Compact version of the primary solid pattern used in the top navigation bar ("See Kira 2.0"). Black background, white text, {rounded.sm}, tighter padding (10px 20px). Smaller than the hero CTA to fit the nav bar's constrained vertical space.

{component.button-primary-brand} — Purple-branded button ("Accept" in cookie modal). Uses {colors.brand-purple} background instead of black, signaling a secondary brand action. White text, semibold, {rounded.sm}. Also used for active tool selection states in the demo preview.

{component.button-secondary-ghost} — Very light ghost/filled-secondary button for inactive tool selectors ("Assessment", "ChatPods"). {colors.surface-blue-tint} pale blue background, dark text, subtle presence that doesn't compete with the active purple tool card.

{component.modal-button-reject} — Neutral/reject action in the cookie consent modal ("Reject"). {colors.surface-soft} near-gray background, dark text, visually deemphasized relative to the Accept counterpart.

{component.modal-button-accept} — Confirm/accept action in cookie modal. Identical spec to {component.button-primary-brand}—purple fill, white text, confirming the brand-purple-as-affirmation pattern.

Cards & Containers

{component.hero-band} — The full-width hero container spanning the upper viewport. {colors.surface-warm} cream background, 100px vertical padding, centers its child content. Contains {component.hero-headline}, {component.hero-subhead}, and {component.hero-cta-group}. No visible border or shadow—it bleeds warmth into the experience.

{component.demo-surface-card} — The central white card floating within the demo band. Pure {colors.canvas} background, {colors.lg} internal padding, {rounded.lg} (14px) corners, {extensions.shadows.sm} subtle lift. Houses the entire product mockup (tool selectors, sidebar, content list, chat panel). This is the most complex container in the system, acting as a stage-within-a-stage.

{component.tool-card} — Active/in-selected state for the AI Tools pills ("Lesson Studio" appears selected). Solid {colors.brand-purple} background, white text ({typography.label}), {rounded.md} (12px) corners, 14px × 20px padding. Includes an icon prefix (book icon for Lesson Studio).

{component.tool-card-inactive} — Unselected tool pill state ("Course Studio", "Assessment", "ChatPods"). White background, dark text, thin border (implied), same dimensions and radius as active state. These sit in a horizontal row within {component.demo-surface-card}'s toolbar area, followed by a chevron-right navigation arrow.

{component.chat-panel} — Rightmost column within the demo card simulating the "Kira AI" chat interface. White background, rounded corners matching parent card, contains a header bar with bot icon and title, plus message bubbles and an abstract generative image.

{component.modal-card} — The cookie consent modal overlaying the bottom-left viewport area. White background, {rounded.md} corners, {spacing.lg} padding, contains title, body text, and action row. Elevated with {extensions.shadows.md} or greater. Backed by {component.modal-overlay} semi-transparent dark scrim.

{component.status-badge-overdue} — Red-tinted pill badge for overdue items in the demo content list. Light red background (#fff0f0), red text, {rounded.pill} fully rounded ends, compact horizontal padding. Part of a semantic status family.

{component.status-badge-due-today} — Amber-tinted pill badge for today's deadlines. Light amber background, amber-orange text, same geometry as overdue sibling.

{component.status-badge-due-tomorrow} — Blue-tinted pill badge for upcoming deadlines. Light blue background, blue text, completing the status triad.

Inputs & Forms

{component.text-input} — Standard text input field as seen in the cookie modal (if expanded) or inferred from form patterns. White background, 44px height for comfortable touch/click targeting, {rounded.sm} corners, 10px padding, {extensions.shadows.inset} on focus. Text color {colors.ink}, placeholder in {colors.muted-dark}.

Navigation

{component.top-nav} — The global header navigation strip. {colors.surface-warm} background, ~72px height, 1440px max-width, contains logo, dropdown menus, utility links, and primary CTA. Typography uses {typography.nav-link} (15px regular). No visible bottom border—relies on background color change to separate from hero.

{component.top-nav-link} — Individual navigation anchor items ("Resources", "Company", "Privacy"). Dark text on warm background, includes dropdown chevron indicator for expandable items. Hover state would likely show underline or color shift to {colors.primary}.

{component.sidebar-nav} — Dark vertical navigation bar within the demo preview (leftmost column of the mockup). Solid {colors.ink} black background, 60px width, contains icon-only navigation items stacked vertically. Represents the product's persistent rail navigation.

{component.sidebar-icon-active} — Active/selected state for sidebar nav icons. Square-ish container (36px × 36px), {colors.brand-purple} background fill, white icon, {rounded.sm} corners. Indicates the currently selected tool/view.

{component.sidebar-icon-inactive} — Default state for unselected sidebar icons. Transparent background, white/light icon, no fill. Simple and quiet until activated.

Signature Components

{component.hero-highlight-purple} — Inline highlight box wrapping "AI" in the hero headline. {colors.accent-purple} soft lavender background, inherits headline typography ({typography.display-lg}), {rounded.sm} corners, tight padding (2px × 10px). Creates a colored rectangle around a single word without breaking the text flow. This is the brand's most distinctive micro-component.

{component.hero-highlight-mint} — Inline highlight box wrapping "education" in the hero headline. {colors.accent-mint} bright mint-cyan background, slightly larger than the purple variant with {rounded.lg} (14px) softer corners and more generous padding (4px × 16px). The asymmetry between the two highlight styles (different radii, different colors, different padding) is deliberate—it creates visual rhythm and prevents mechanical repetition.

{component.decorative-circle-large} — Massive decorative circle overlapping the demo card's bottom-right corner. Solid {colors.brand-purple} fill, {rounded.full} (perfectly circular), extends partially off-card to break the rectangular frame. Adds playfulness and organic counterpoint to the structured UI grid.

{component.view-all-link} — Small "View All" link appearing above content lists in the demo preview. Muted text color, caption size, right-aligned. Low-noise navigation affordance.

Do's and Don'ts

Do

• Do use {colors.surface-warm} (#fffdf0) for the hero and header band—not pure white. The warmth is essential to the brand's emotional register.
• Do keep all Recife Text headlines at weight 400 only. Never apply bold (font-weight: 700) to {typography.display-lg} or any serif role. Emphasis comes from scale, not weight.
• Do use {colors.brand-purple} (#7551f0) for all primary affirmative CTAs and active states. Reserve {colors.ink} (#000000) for the highest-conversion hero button only.
• Do apply {rounded.sm} (4px) to buttons and inputs for a crisp, actionable feel, while using {rounded.lg} (14px) on content cards for a softer, more containery presence.
• Do maintain the 100px ({spacing.hero}) vertical padding in the hero section. The airiness is intentional and distinguishes Kira from dense competitor pages.
• Do use the highlight box technique ({component.hero-highlight-purple}, {component.hero-highlight-mint}) for 1-2 key terms per headline. Overuse dilutes impact; underuse misses brand recognition.
• Do pair {typography.body-md} (Messina Sans 16px) with {colors.body-text} (#504d49) for body paragraphs—the warmer gray is easier on eyes than pure black at reading length.
• Do use {rounded.pill} for status badges and tag-like elements. The fully rounded ends signal "label" rather than "button."
• Do keep the demo/product preview band in solid {colors.brand-purple} (or purple gradient) to create strong sectional contrast against the cream hero above.
• Do set letter-spacing: -0.3px on all display type 32px and larger. The optical tightening is critical for the serif's elegance at scale.

Don't

• Don't substitute {colors.primary} (web blue #0000ee) for {colors.brand-purple} (indigo #7551f0) in CTAs. The blue is for links and semantic info only; the purple owns action.
• Don't add gradient overlays, mesh gradients, or glassmorphism to the hero section. The {colors.surface-warm} canvas is intentionally flat and clean.
• Don't use {typography.button} (semibold 14px) for body text or headings. The semibold weight is reserved for interactive elements only.
• Don't round corners beyond {rounded.lg} (14px) on structural cards. The system stops at "friendly soft"—never reaches "bubble" territory (24px+) except for circles.
• Don't place {colors.ink} (#000000) text directly on {colors.brand-purple} (#7551f0) background except in the sidebar icon pattern (where icons are white-on-purple). Body text on purple must be {colors.on-primary} (white).
• Don't introduce new highlight box colors beyond {colors.accent-purple} and {colors.accent-mint}. These two form the brand's signature accent palette.
• Don't reduce the {spacing.lg} (24px) internal padding on cards. The generosity is part of the premium feel.
• Don't mix font families across roles—serif stays in display/headline, sans-serif stays everywhere else. No sans-serif headlines, no serif buttons.
• Don't add heavy shadows ({extensions.shadows.lg} or deeper) to non-modal elements. The system prefers subtlety; save depth for overlays.
• Don't let the cookie consent modal ({component.modal-card}) exceed 480px width. It should remain a compact, dismissible overlay, not a full-screen interruption.

Motion & Animation

Transition Tokens

Extracted CSS transitions indicate a lightweight motion model:

/* Global transition shorthand */
--transition-all: all 0.2s ease;

/* Color-specific transition (observed on interactive elements) */
--transition-color: color 0.2s cubic-bezier(0.44, 0, 0.56, 1),
                    background-color 0.2s cubic-bezier(0.44, 0, 0.56, 1);

The easing curve cubic-bezier(0.44, 0, 0.56, 1) is a symmetric ease-in-out (similar to ease-in-out but with slightly snappier endpoints). Duration is uniformly 200ms—fast enough to feel responsive, slow enough to perceive.

Keyframe Animations

No explicit @keyframes rules were detected in the extracted CSS. The page relies on CSS transitions for interaction feedback rather than programmatic animation. Any entrance animations (fade-up on scroll, stagger reveals) are likely handled via JavaScript libraries (Framer Motion, given the framework detection) or intersection observers not captured in static extraction.

Interaction Patterns

Observed and inferred interaction behaviors:

• Button hover: Background color darkens (black → #1a1a1a; purple → {colors.brand-purple-dark}) with 200ms transition. Subtle Y-translate (-1px) lift possible on primary buttons.
• Link hover: Color shifts from {colors.link} to {colors.link-hover} (standard blue darken), possibly with underline appearance.
• Input focus: Border color intensifies to {colors.border-input} or {colors.brand-purple}; inset shadow appears ({extensions.shadows.inset}); 200ms color transition.
• Tool card selection: Background transitions from white ({component.tool-card-inactive}) to purple ({component.tool-card}) with color fade. Icon and text flip to white.
• Dropdown reveal: "Resources" and "Company" nav items show chevron indicators suggesting dropdown menus on click/hover. Likely fade-down animation.
• Modal appearance: Cookie consent card likely fades in with scale transform (0.98 → 1.0) over 200-300ms.
• Sidebar icon activation: Background color fill animates from transparent to {colors.brand-purple} on selection.

Recommended timing for any added motion not yet present: 200-240ms for micro-interactions (hovers, focus), 400ms for structural transitions (section reveals, modal opens), using the existing cubic-bezier(0.44, 0, 0.56, 1) easing or a deceleration curve for entrances.

Imagery Style

• Generative/AI-produced abstract art: The chat panel within the demo preview displays a swirling, fluid abstract image with pink-cyan-blue gradients, resembling diffusion-model output or fluid simulation. This reinforces the "AI" positioning.
• Product mockup as hero imagery: Rather than photography or illustration, the hero's visual weight comes from the product UI mockup itself—a screenshot/simulation of the Kira dashboard. This is "dogfooding" the product as the primary visual asset.
• Flat iconography within UI: Tool cards and sidebar use simple, filled or outlined icons (book, presentation, clipboard, chat bubble) in a clean vector style—likely Lucide-based or custom.
• Decorative geometric shapes: The large purple circle overlapping the demo card is pure geometric decoration—no texture, no imagery, just solid-color shape-play.
• No photography observed: The landing page avoids stock photography entirely, relying on typography, color, product UI, and geometric shapes for visual interest. This is a deliberate "interface-as-image" strategy common in developer-tool and platform products.
• Color temperature alignment: All imagery and decoration exists within the established palette—purples, mints, creams, blacks. No jarring outside colors introduced.
• Image treatment: Where images do appear (the generative art piece), they're contained within rounded containers ({rounded.lg}) matching the card system, never hard-edged or bleeding raw.

Icon System

• Library: Custom SVG icons (no standard library class names like lucide-* or heroicons-* detected in the CSS classes). Icons are likely hand-crafted or sourced and customized to match the brand's specific proportions.
• Specific icons observed:
  • Book/open-book icon (Lesson Studio tool card)
  • Presentation/screen icon (Course Studio tool card)
  • Clipboard/checklist icon (Assessment tool card)
  • Chat bubble icon (ChatPods tool card)
  • Chevron down (navigation dropdown indicators)
  • Chevron right (tool carousel navigation arrow)
  • Home/house icon (sidebar navigation)
  • User/profile icon (sidebar navigation, active state)
  • Bot/robot face icon (Kira AI chat header)
  • Expand/maximize icon (chat panel header)
  • Edit/pencil icon (chat panel header)
• Treatment: Mixed stroke and fill usage. Sidebar icons appear as filled shapes when active (white on purple), outlines when inactive (white lines on black). Tool card icons are filled white shapes on colored backgrounds. Size ranges from 16px (inline) to 24px (sidebar) to 20px (tool cards).
• Alignment: Icons are center-aligned within their containers (square icon buttons, pill-shaped tool cards). Vertical-centering with text labels in tool cards uses flexbox baseline or center alignment.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Framer Sites (detected framework: framer)
- Styling:        CSS Modules or Tailwind CSS v4 (custom config matching token values)
- Fonts:          Self-hosted woff2 files for Recife Text Web + Messina Sans Web
                   Fallback: Source Serif 4 (display) + DM Sans (body) via Google Fonts
- Animation:      Framer Motion (if using Framer) or CSS transitions (200ms base)
- Icons:          Custom SVG sprite (current) or Lucide React with custom sizing/stroke
- Component lib:  Radix UI Primitives (for accessible dropdowns, dialogs, tooltips)
- Deployment:     Vercel (optimal for Next.js/Framer)

Font Setup (CSS Variables):

:root {
  --font-display: "Recife Text Web Regular", "Recife Text Web Regular Placeholder", "Source Serif 4", Georgia, serif;
  --font-body: "Messina Sans Web Regular", "Messina Sans Web Regular Placeholder", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body-semibold: "Messina Sans Web SemiBold", "Messina Sans Web SemiBold Placeholder", "DM Sans SemiBold", -apple-system, sans-serif;
}

Import Source Serif 4 and DM Sans from fonts.googleapis.com as fallbacks if proprietary fonts aren't available.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column stack; hero headline scales down (~32px); CTA buttons stack vertically; nav collapses to hamburger; demo card simplifies to single-column; cookie modal goes full-width bottom sheet | | Tablet | 640–1024px | Two-column layouts begin; hero retains centered text; demo preview may show simplified 2-column (content + chat, sidebar collapses); nav items may truncate or wrap | | Desktop | 1024–1440px | Full layout as shown in screenshot; 3-column demo card (sidebar + content + chat); all nav items visible | | Wide | > 1440px | Container maxes at 1440px with auto margins; additional horizontal padding may increase slightly |

Touch Targets

• {component.button-primary-solid}: 12px × 24px padding + 14px text ≈ 44px+ height ✓ (WCAG AAA compliant)
• {component.button-secondary-outline}: Same dimensions ≈ 44px+ height ✓
• {component.nav-button-primary}: 10px × 20px padding + 14px text ≈ 40px height ⚠ (slightly below AAA; recommend increasing to 12px vertical padding on mobile)
• {component.text-input}: 44px height exactly ✓ (meets AAA minimum)
• {component.tool-card}: 14px × 20px padding + 13px text ≈ 42px height ⚠ (close; acceptable for pill-shaped targets)
• {component.sidebar-icon}: 36px × 36px ✗ (below 44px minimum—acceptable only for icon bars with sufficient spacing; consider 44px on touch devices)

Collapsing Strategy

• Navigation: Top nav ({component.top-nav}) collapses to a hamburger menu icon on mobile (< 768px). Dropdown menus become accordion panels in a slide-out drawer or fullscreen overlay.
• Hero section: Headline scales from 48px desktop → 32px tablet → 28px mobile (maintaining {typography.display-lg} → {typography.title-md} → custom). Highlight boxes persist but may stack words differently. Subhead reduces to 14px ({typography.body-sm}). CTA pair stacks vertically: primary on top, secondary below, both full-width.
• Demo band: On mobile, the 3-column demo card ({component.demo-surface-card}) reflows: sidebar collapses to a bottom tab bar or top dropdown, content list takes full width, chat panel moves below or becomes a tappable overlay. Tool selector pills become a horizontal scroll row.
• Cookie modal: Transforms from bottom-left floating card to a fixed bottom-sheet banner on mobile, stretching full width with Reject/Accept buttons side-by-side or stacked.
• Spacing compression: Vertical padding reduces from {spacing.hero} (100px) to {spacing.section} (64px) on tablet, then {spacing.xl} (32px) on mobile. Section gaps compress proportionally.

Image Behavior

• Demo preview mockup: On desktop, shows full 3-column layout within the card. On tablet, may crop sidebar or chat panel. On mobile, either shows a simplified single-view version or replaces with a static hero image of the product.
• Generative art piece (inside chat panel): Scales with its container ({component.chat-panel}), maintaining aspect ratio. May be hidden on smallest screens to save space.
• Decorative circle: Hidden on mobile (< 768px) to prevent overflow issues and reduce visual noise. It's a desktop-only delight.

Iteration Guide

1. Start with the token foundation: Extract every color, font, radius, spacing, and shadow value from the YAML frontmatter via their {section.token} paths. Define CSS custom properties for each (e.g., --color-brand-purple: #7551f0;). Never hard-code a hex or px value that has a token.

2. Build the surface layers first: Implement {colors.surface-warm} on the header/hero, then {colors.canvas} below, then the {colors.brand-purple} demo band. Get the sectional color-block architecture working before adding components.

3. Type before layout: Set up @font-face declarations for Recife Text and Messina Sans (or their Google Font substitutes). Confirm {typography.display-lg} renders correctly at 48px/weight 400 before writing any other CSS. The serif headline is the visual anchor.

4. Implement the highlight box components early: Create reusable .highlight-purple and .highlight-mint classes matching {component.hero-highlight-purple} and {component.hero-highlight-mint} specs. These are the brand's most distinctive elements—get them pixel-perfect (padding, radius, background color match).

5. Component-by-component assembly: Build in this order—top nav → hero band (headline + subhead + CTAs) → demo band (purple field) → demo card (white surface) → inner demo components (tools, sidebar, content, chat) → modal (cookie consent). Each component references its frontmatter entry for all style properties.

6. Add state variants per your stack's conventions: The frontmatter documents Default and Active/Pressed states (e.g., {component.tool-card} vs {component.tool-card-inactive}). Add :hover, :focus, :disabled, [aria-pressed="true"] variants following your framework's patterns (Tailwind's hover:, React's conditional classes, etc.).

7. Sub-system awareness: Recognize that the demo preview area is a dialect within the system—it uses inverted colors (dark sidebar, purple active states, status badges) that differ from the marketing shell. When building product surfaces, switch to this dialect's tokens.

8. Responsive breakpoint implementation: After desktop layout is complete, add media queries at 1024px, 768px, and 640px. Reference the collapsing strategy above for specific layout changes at each breakpoint.

9. Motion as enhancement layer: With static layout complete, add transition: color 0.2s cubic-bezier(0.44, 0, 0.56, 1) to all interactive elements. Test that hover/active states feel responsive but not sluggish. Add entrance animations last (Framer Motion motion.div with initial={{ opacity: 0 }} / animate={{ opacity: 1 }}).

10. Validation: Run accessibility checks (contrast ratios for {colors.body-text} on {colors.canvas}, {colors.on-primary} on {colors.brand-purple}), verify all token references resolve (no undefined variables), and test on physical mobile devices for touch target sizing. Run npx @google/design.md lint DESIGN.md if available to catch broken refs and orphaned tokens.

Font Substitute Mapping Summary:

| Proprietary | Google Fonts Equivalent | CSS Variable | |---|---|---| | Recife Text Web Regular | Source Serif 4 (weight 400) | --font-display | | Messina Sans Web Regular | DM Sans (weight 400) | --font-body | | Messina Sans Web SemiBold | DM Sans SemiBold (weight 600) | --font-body-semibold | | Fragment Mono | Fragment Mono (already Google Fonts) | --font-mono |

Import via: https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400&family=DM+Sans:wght@400;500;600&family=Fragment+Mono&display=swap

Known Gaps

• Hover state styling: Per the no-hover policy, all :hover pseudo-class styles are inferred rather than extracted. Implementation should add background darkens (5-10% luminance reduction), subtle lifts (-1px translateY), or color shifts based on the documented Active/Pressed variants.
• Loading skeletons / pending states: No loading indicators, skeleton screens, or spinners were visible in the screenshot. These will need design decisions for product surfaces (dashboard loading, submission processing).
• Form validation states beyond focus: Only default and focus states were extractable for {component.text-input}. Error (red border + message), success (green check), and disabled (grayed, reduced opacity) states need specification.
• Authenticated/user dashboard surfaces: The screenshot shows only the landing page + a simulated dashboard preview. Actual logged-in teacher/student interfaces, grading views, analytics dashboards, and settings panels were not observable.
• Dark mode adaptation: The entire system is documented for light mode ({extensions.mode}: "light"). A dark mode variant would require inverting surface/text relationships and recalibrating the warm cream canvas (perhaps to a deep charcoal or navy).
• Mobile navigation drawer: The collapsed mobile nav (hamburger → drawer) wasn't visible. Its contents (full menu tree, search, user profile), animation (slide from right), and backdrop treatment are unspecified.
• Internationalization / RTL support: No RTL (right-to-left) layout or translated content was observable. Text direction, logo flipping, and nav reordering for Arabic/Hebrew locales need consideration.
• Pixel-exact highlight box measurements: The padding values on {component.hero-highlight-purple} (2px 10px) and {component.hero-highlight-mint} (4px 16px) are estimated from visual inspection. Exact metrics may vary by 1-2px.
• Decorative element animations: The large purple circle and potential gradient shimmer in the demo band may have subtle parallax or float animations not captured in static CSS. These would require JS-driven scroll listeners.
• Accessibility focus indicators: Beyond standard browser focus rings, no custom focus-visible styles (outlines, glow effects) were extracted. Recommend implementing a visible focus ring (2px solid {colors.brand-purple} with 2px offset) for keyboard navigation.