Tiimo Design System

Overview

Tiimo's visual identity is built on warmth and approachability — a deliberate departure from the cold clinicality typical of productivity tools. The system rests on a near-white warm canvas ({colors.canvas}) that reads slightly ivory rather than sterile, paired with a signature lavender ({colors.primary}) that feels gentle yet distinctively branded. This is not a tech-startup violet; it's softer, more human, closer to the pastel end of the spectrum.

The typeface pairing is the system's most defining characteristic: Recoleta — a high-contrast serif with editorial gravitas — handles all display and heading work, lending the brand a magazine-quality voice that signals trustworthiness without corporate sterility. SF Pro Text, Apple's system sans-serif, carries all body copy, ensuring readability and native-feeling interaction patterns on iOS-adjacent platforms. This dual-family strategy means every page has a clear typographic hierarchy: serif = attention, sans-serif = information.

Shape language leans toward generous rounding. Buttons use {rounded.xs} (5px) — barely perceptible but enough to soften edges — while larger containers like the cookie modal employ {rounded.md} (16px). Toggle switches and avatar-like elements push into extreme territory with {rounded.full} (150px), creating pill-shaped affordances that feel tactile and friendly.

The cookie consent interface visible in the screenshot reveals a layered surface strategy: the main modal sits on {colors.canvas}, while the consent categories row below drops to {colors.surface-warm} (a warmer beige), creating visual zoning without harsh dividers. The primary CTA ({component.button-primary}) uses the full-saturation lavender, while the secondary decline button ({component.button-secondary}) stays flat-white with a subtle border treatment implied by its elevation.

Key Characteristics

• Warm off-white canvas ({colors.canvas} — #fcfcfc) with subtle cream undertones, never pure #fff
• Signature lavender brand voltage ({colors.primary} — #9f85ff) reserved for CTAs, links, and active states only
• Recoleta serif for all headings/display text, SF Pro Text for body — never mix roles
• Generous border radius vocabulary from {rounded.xs} (5px) through {rounded.full} (150px) for toggles
• Muted text at 75% opacity of ink ({colors.muted}) for secondary information
• Single shadow token ({shadows.sm}) applied consistently to elevated surfaces
• Cookie banner modal ({component.cookie-banner-modal}) as the signature patterned-overlay component
• Toggle switches using extreme rounding ({rounded.full}) with track/thumb contrast
• Section containers capped at 1440px max-width for comfortable reading measure
• Transition timing locked to 300ms with cubic-bezier(0.25, 0.46, 0.45, 0.94) easing

Colors

Brand & Accent

• Primary ({colors.primary} — #9f85ff): The signature lavender used exclusively for CTAs ({component.button-primary}), inline links ({component.cookie-banner-link}), and active interactive states. This is the single brand-voltage color — it should never dominate a composition.
• Primary Active ({colors.primary-active} — #8a6ef0): Darker lavender variant for pressed/hover states on primary buttons ({component.button-primary-active}).
• Primary Disabled ({colors.primary-disabled} — #c9bff5): Desaturated, lightened lavender for disabled or locked toggle tracks ({component.toggle-switch-necessary-track}).

Surface

• Canvas ({colors.canvas} — #fcfcfc): The base page background — nearly white with imperceptible warmth. Used for the main cookie modal ({component.cookie-banner-modal}) and likely all full-page backgrounds.
• Surface Warm ({colors.surface-warm} — #f7f3f0): A cream-beige tone used for the consent categories row ({component.consent-categories-row}), creating visual separation within modals without borders.
• Surface Lavender ({colors.surface-lavender — #f5f3ff): Very faint lavender tint, likely used for hover states on primary-colored elements or subtle brand washes.
• Surface Tan ({colors.surface-tan} — #e5e0da): Deeper warm neutral for pressed/active states on secondary buttons ({component.button-secondary-active}).
• Surface Dark ({colors.surface-dark} — #161613): Near-black used for dark mode surfaces or high-contrast overlays.
• Surface Elevated ({colors.surface-elevated} — #ffffff): Pure white reserved for cards, buttons, and elements that must pop above {colors.canvas} — seen on {component.button-secondary} and toggle thumbs ({component.toggle-switch-thumb}).

Text

• Ink ({colors.ink} — #161613): The darkest near-black, reserved for headlines ({component.cookie-banner-headline}) and maximum-emphasis text.
• Body ({colors.body} — #1e1e1e): Standard reading text color for paragraphs, labels, and general content.
• Body Dark ({colors.body-dark} — #121210): Deepest black variant, used sparingly for maximum contrast requirements.
• Muted ({colors.muted} — rgba(22, 22, 19, 0.75)): 75% opacity ink for secondary body text, descriptions, and de-emphasized content.
• Muted Strong ({colors.muted-strong} — #808080): Medium gray for inactive toggle tracks ({component.toggle-switch-track-on}) and disabled UI chrome.
• Muted Deep ({colors.muted-deep} — #3c3d49): Dark gray-blue for metadata, timestamps, or tertiary information.
• On Primary ({colors.on-primary} — #ffffff): White text on {colors.primary} backgrounds, satisfying WCAG AA contrast requirements.
• On Dark ({colors.on-dark} — #ffffff): White text for any {colors.surface-dark} contexts.

Hairlines & Borders

• Hairline ({colors.hairline} — #e5e0da): Warm light gray for subtle dividers and input borders when visible.
• Border Light ({colors.border-light} — #888888): Mid-gray for more prominent borders or focus rings where needed.

Semantic

• Error ({colors.error} — #c13515): Reserved for validation errors and destructive actions.
• Success ({colors.success} — #006400): For confirmation states and positive feedback.
• Link ({colors.link} — #9f85ff): Inline link color, identical to {colors.primary} — the brand owns link blue.
• Link Active ({colors.link-active} — #8a6ef0): Hover/visited state for links, matching {colors.primary-active}.
• Info ({colors.info} — #3c3d49): Neutral informational text, same as {colors.muted-deep}.

Typography

Font Family

Tiimo employs a two-font system with strict role separation. Recoleta — a contemporary serif designed by Latinotype — serves as the brand's display face, appearing in Regular (400) and Medium (500) weights. It carries all h1–h4 level headings, feature titles, and the main cookie banner headline. Its high contrast between thick and thin strokes gives headlines editorial presence without feeling old-fashioned.

SF Pro Text is the workhorse sans-serif, deployed in Regular (400) and Semi-Bold (600) cuts. It handles body copy, UI labels, button text, captions, and all functional interface text. As Apple's system typeface, it ensures the product feels native on iOS/iPadOS devices — critical for Tiimo's core platform. The fallback stack degrades gracefully: Arial, sans-serif.

Both fonts load via Webflow-hosted OTF files with font-display: swap to minimize layout shift.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 60px | 400 | 1.1 | normal | Hero headlines (H1), major section openers | | {typography.display-lg} | 32px | 400 | 1.18 | normal | Modal headlines, feature titles (H2/H4) | | {typography.title-md} | 27px | 500 | 1.2 | normal | Section subheadings, card titles | | {typography.title-sm} | 20px | 400 | 1.25 | normal | Tertiary headings, accordion headers | | {typography.heading-xs} | 15px | 600 | 1.33 | normal | Small caps-style labels, category names | | {typography.body-md} | 15px | 400 | 1.47 | normal | Primary body copy, paragraph text | | {typography.body-sm} | 14px | 400 | 1.43 | normal | Secondary body, helper text | | {typography.caption} | 13px | 400 | 1.38 | normal | Footer attribution, metadata, legal | | {typography.button} | 14px | 600 | 1.29 | normal | All button and CTA text | | {typography.label} | 15px | 400 | 1.33 | normal | Form labels, consent categories |

Principles

The typography system trusts size and family to establish hierarchy, not weight. Note that {typography.display-xl} sits at 60px with weight 400 — deliberately light for its scale — while {typography.heading-xs} at the same 15px size as body text achieves emphasis through weight 600 and the Recoleta family. This creates a "big-and-light, small-and-bold" rhythm that feels modern and breathable.

Letter spacing remains normal (effectively 0) across every role. There are no tracked-out uppercase headlines here — the brand voice is conversational, not institutional. Line heights are generous: 1.47 for body text supports dyslexia-friendly reading, aligning with Tiimo's neurodiversity mission.

Color also participates in hierarchy: {colors.ink} for headlines, {colors.body} for reading text, {colors.muted} (75% opacity) for secondary passages. Links pull the full {colors.primary} lavender, making them unmistakable without underline decoration in many contexts.

Note on Font Substitutes

Recoleta is a commercial Latinotype font without a Google Fonts equivalent. For prototyping or open-source implementations, substitute Playfair Display (Google Fonts) for display headings — it shares the high-contrast serif DNA, though it's slightly more traditional. Set the CSS variable --font-heading: 'Playfair Display', Georgia, serif;.

SF Pro Text substitutes cleanly to Inter or **-apple-system, BlinkMacSystemFontfor web. Define--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;`. Avoid system-ui alone as it resolves differently across platforms.

Layout

Spacing System

• Base unit: 5px ({spacing.xxs}).

• Tokens:

  • {spacing.xxs} (5px) — micro-gaps between inline elements, icon spacing
  • {spacing.xs} (8px) — tight internal padding, small gaps
  • {spacing.sm} (10px) — compact component padding, label gaps
  • {spacing.md} (16px) — standard internal padding for small components
  • {spacing.lg} (20px) — most common spacing: between paragraphs, modal sections, button gaps
  • {spacing.xl} (23px) — slightly larger gaps between major blocks
  • {spacing.xxl} (28px) — section-internal breathing room
  • {spacing.section} (32px) — standard section vertical padding
  • {spacing.section-lg} (60px) — large section padding, hero-to-content gap
  • {spacing.hero} (90px) — top-of-page hero zone padding
  • {spacing.container} (128px) — very large gaps, possibly inter-section spacing

• Section padding (vertical): {spacing.hero} (90px) at the top of pages, transitioning to {spacing.section-lg} (60px) for subsequent sections.

• Card internal padding: The cookie modal uses ~32px internal padding ({component.cookie-banner-modal}); the consent row uses 20px ({component.consent-categories-row}).

• Gutters: Not explicitly extracted, but the 1440px container implies generous side margins on desktop.

Grid & Container

• Max content width: 1440px per the extracted section container data. This is wide by SaaS standards, suggesting Tiimo uses expansive layouts with significant whitespace.
• Density choice: Editorial-airy. The 60px display text, generous line-heights (1.47+), and 90px hero padding all signal a spacious, uncluttered reading experience over information density.
• Grid behavior: Not fully extractable from a single modal screenshot, but the consent categories suggest a 4-column equal-width grid for the toggle rows (Necessary / Functional / Statistical / Marketing).
• Hero column splits: Inferred from the site structure — likely asymmetric with text-left, illustration-right given the "visual planner" positioning.

Whitespace Philosophy

Tiimo embraces generous whitespace as a design feature, not empty space to be filled. The 90px hero padding, 1.47 body line-height, and 32px modal internal margins all create breathing room that reduces cognitive load — directly serving the neurodiverse user base. Sections are separated by 60–128px vertical gaps. Nothing feels cramped.

Header Architecture

[Logo]                              [FAQ]  [Newsroom]
<-------- max-width: ~1200px -------->

Navigation appears minimal and flush-right based on the screenshot's top bar showing "FAQ" and "Newsroom". The nav container is transparent (backgroundColor: transparent) floating over whatever hero content sits beneath.

Hero Section

+------------------------------------------+
|                                          |
|   [Headline: 60px Recoleta]             |
|   [Subhead/body: 15px SF Pro]           |
|                                          |
|   [CTA Primary]  [CTA Secondary]        |
|                                          |
|   +-------------------------------+     |
|   |   Illustration / App Preview  |     |
|   +-------------------------------+     |
|          (padding: 90px top)            |
+------------------------------------------+

Inferred from meta description mentioning "visual daily planner" and the gradient-hero class in DOM.

Cookie Consent Modal Structure

+--------------------------------------------+
|                                            |
|  You control your data        [32px Recl.] |
|                                            |
|  We and our business partners...  [body]   |
|                                            |
|  Functional, Statistical, Marketing       |
|                                            |
|  Read more about cookies                  |
|  Show details ▼                            |
|                                            |
|  +-------------+  +------------------+     |
|  | DECLINE ALL |  | ACCEPT ALL (lav) |     |
|  +-------------+  +------------------+     |
|                                            |
|  +-----------+--+-----------+--+------+   |
|  | Necessary |  |Functional |  |Stat. |   |
|  | [toggle]  |  | [toggle]  |  |[togg]|   |
|  +-----------+--+-----------+--+------+   |
|                                            |
|         powered by: Cookie Information     |
+--------------------------------------------+
         (width: 720px, radius: 16px)

This is the most completely documented component from the screenshot.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, {colors.canvas} baseline | Page background, non-interactive surfaces | | 1 — Raised | {shadows.sm} — rgba(0,0,0,0.2) 0 2px 5px | Cookie modal ({component.cookie-banner-modal}), dropdowns, cards | | 2 — Floating | {shadows.md} — rgba(0,0,0,0.15) 0 8px 16px | Tooltips, popovers, sticky headers | | 3 — Modal | {shadows.lg} + {overlay-backdrop} | Full-screen overlays, consent banners | | Focus ring | 2px solid {colors.primary} or outline offset | Keyboard focus on buttons, inputs, toggles |

Philosophy: Tiimo favors a lightly layered approach over brutalist flatness. The cookie modal floats with a soft shadow ({shadows.sm}), but there's no heavy elevation stack. Shadows use black at low opacity (20%) with no color tint, keeping them neutral and warm. The overlay backdrop at 70% opacity provides depth for modals without complete darkness.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.xs} | 5px | Buttons ({component.button-primary}, {component.button-secondary}), small inputs | | {rounded.sm} | 8px | Cards, panels, medium containers | | {rounded.md} | 16px | Modal dialogs ({component.cookie-banner-modal}), large cards | | {rounded.lg} | 100px | Pill badges, tag shapes, extremely rounded rectangles | | {rounded.xl} | 120px | Avatar circles (slightly squircle), large decorative rounds | | {rounded.full} | 150px | Toggle switch tracks ({component.toggle-switch-track-off}), perfect pills |

Photography Geometry

Not strongly evidenced in this consent-modal screenshot, but the brand's "visual planner" positioning suggests app-preview imagery with moderate rounding ({rounded.md} or {rounded.lg}). Avatar/user imagery would likely use {rounded.xl} (120px) for a soft circular feel.

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-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & CTAs

{component.button-primary} — The primary call-to-action button, seen here as "ACCEPT ALL". Background {colors.primary} (lavender), text {colors.on-primary} (white) at {typography.button} weight 600, rounded {rounded.xs} (5px), padding 12px horizontal × 28px vertical, fixed height 48px. Uses the semi-bold SF Pro cut for confident legibility at small size. Active variant ({component.button-primary-active}) darkens to {colors.primary-active}. This button should be used exactly once per decision context — the affirmative path.

{component.button-secondary} — The alternative/decline action, seen as "DECLINE ALL". Background {colors.surface-elevated} (pure white), text {colors.ink}, same typography and dimensions as primary. It relies on being visually lighter than primary to signal "less recommended." Active state ({component.button-secondary-active}) shifts to {colors.surface-tan} (warm beige), providing tactile feedback without color intrusion. Pair this always with {component.button-primary} in a 2-button decision group.

{component.cookie-banner-show-details-btn} — A text-only disclosure button ("Show details"/"Hide details") with transparent background, {colors.body} text, {typography.body-md} styling. Height constrained to 28px. Functions as an accordion trigger — no border, no background change, pure text interaction. This pattern represents the "quiet action" tier of the component hierarchy.

Modals & Overlays

{component.cookie-banner-modal} — The central container for GDPR/cookie consent. Background {colors.canvas}, text {colors.body}, {typography.body-md} default, rounded {rounded.md} (16px), 32px internal padding, 720px fixed width. Floats on {shadows.sm} elevation. Contains the full consent flow: headline, body copy, detail toggle, button pair, and category grid. This is the most complex composite component in the system — treat it as a template for other modal dialogs (feature announcements, upgrade prompts).

{component.overlay-backdrop} — The dimming layer behind modals. Background rgba(0, 0, 0, 0.7) at full viewport coverage. Provides depth cue that separates modal content from underlying page. Click-to-dismiss behavior is standard for this pattern.

Consent-Specific Components

{component.consent-categories-row} — The four-column grid holding consent toggles (Necessary / Functional / Statistical / Marketing). Background {colors.surface-warm} (cream) creates visual separation from the main modal area, 20px internal padding. Each column contains a {component.consent-category-label} above a toggle switch.

{component.consent-category-label} — Text label for each consent category ("Necessary", "Functional", etc.). Transparent background, {colors.body} text, {typography.label} styling (15px SF Pro Regular). These are clickable buttons that may expand category details.

{component.toggle-switch-track-off} — The inactive state for consent toggles. Background {colors.muted-strong} (mid-gray #888888), {rounded.full} (150px), 44×44px size. Represents "off/disabled."

{component.toggle-switch-track-on} — The active/enabled state for toggles. Same gray as off-state ({colors.muted-strong}) in this particular implementation, though typically would shift toward {colors.primary} or a confirmation color. {rounded.full}, 44×44px.

{component.toggle-switch-necessary-track} — Locked/always-on toggle for "Necessary" cookies. Background {colors.primary-disabled} (desaturated lavender), signaling it's permanently enabled. Cannot be interacted with.

{component.toggle-switch-thumb} — The circular knob inside toggle tracks. Background {colors.surface-elevated} (white), {rounded.full} (150px), 36×36px size. Positioned left for "off," right for "on." Casts no shadow in current extraction but could benefit from {shadows.sm} for lift.

Navigation

{component.nav-container} — Top navigation bar. Transparent background (floats over hero content), {colors.ink} text, 80px height. Contains logo flush-left, utility links (FAQ, Newsroom) flush-right. Minimal chrome — no border, no background until scroll (inferred).

{component.nav-link} — Individual navigation items. Transparent background, {colors.ink} text at {typography.body-sm}. Likely gains underline or color shift on hover (per no-hover-policy, implement at build time).

Typography Components

{component.cookie-banner-headline} — "You control your data" — the modal's H1-equivalent. Transparent background, {colors.ink} text, {typography.display-lg} (32px Recoleta Regular). Sets the editorial tone for the entire consent experience.

{component.cookie-banner-body-text} — Legal/explanatory paragraphs. Transparent background, {colors.body} text, {typography.body-md} (15px SF Pro Regular, line-height 1.47). Generous leading for readability.

{component.cookie-banner-link} — Inline actionable text like "Read more about cookies." Transparent background, {colors.link} (lavender), {typography.body-md}. Underline optional — current styling shows underline present. Active variant ({component.cookie-banner-link-active}) uses {colors.link-active} (darker lavender).

Footer & Attribution

{component.footer-attribution} — "powered by:" text. Transparent background, {colors.muted} text, {typography.caption} (13px). Minimal visual weight.

{component.footer-link} — "Cookie Information" link in footer area. Transparent background, {colors.link} text, {typography.caption}. Smaller than body links, maintaining hierarchy even in metadata zones.

Layout Components

{component.section-container} — Reusable page section wrapper. Transparent background, 1440px max-width, contains {typography.body-md} default. Used for all major page sections outside the modal context.

Do's and Don'ts

Do

• Do reserve {colors.primary} (#9f85ff) exclusively for CTAs, links, and one brand moment per screen. Overusing lavender dilutes its impact — the eye should find exactly one lavender element per decision point.
• Do use Recoleta ({typography.display-xl}, {typography.display-lg}, {typography.title-md}) for all headlines and display text. Never apply SF Pro to headings; the serif/sans divide is the system's primary hierarchical signal.
• Do maintain 1.47+ line height for all body text ({typography.body-md}). Tiimo serves neurodiverse users who need generous leading — tightening below 1.4 harms readability.
• Do pair {component.button-primary} and {component.button-secondary} together in decision contexts. The primary/secondary visual weight difference guides users toward the recommended action.
• Do use {rounded.full} (150px) for all toggle switches and pill-shaped elements. This extreme rounding is part of the friendly, tactile design language — don't reduce it.
• Do apply {colors.surface-warm} (#f7f3f0) as a zoned background within modals and cards. The warm cream creates visual grouping without borders.
• Do keep modal internal padding at 32px ({component.cookie-banner-modal}) for comfortable reading density. Don't compress below 24px.
• Do use {colors.muted} (75% opacity ink) for secondary descriptive text. The transparency creates automatic hierarchy relative to full-opacity body text.
• Do set max container width to 1440px ({component.section-container}) for desktop layouts. Wider measures strain reading comfort.
• Do apply {shadows.sm} to any floating panel or modal. Even subtle elevation separates interactive layers from static background.

Don't

• Don't use {colors.primary} as a background for large areas. Lavender is a voltage color for interactive elements, not a surface fill. Large lavender fields overwhelm the delicate palette.
• Don't apply font-weight above 600 in this system. The heaviest available cut is SF Pro Semi-Bold at 600 for buttons. No bold (700) or black (900) exist in the font loading strategy.
• Don't substitute {colors.link} with a traditional blue (#0066cc or similar). Tiimo owns link color as brand lavender — blue links would look foreign and break the cohesive palette.
• Don't round buttons above {rounded.xs} (5px). While toggles and tags go fully round, buttons stay subtly softened. Highly rounded buttons (pill-shaped) read as tags or badges, not actions.
• Don't place {colors.body} text directly on {colors.surface-dark} (#161613). Always use {colors.on-primary} (white) or {colors.on-dark} on dark surfaces — body text lacks sufficient contrast against near-black.
• Don't invent new spacing values outside the {spacing.*} scale. The 5px-based progression (5, 8, 10, 16, 20, 23, 28, 32, 60, 90, 128px) covers all needed granularity. Arbitrary values (17px, 41px) break rhythm.
• Don't add gradients to button backgrounds. Both primary and secondary buttons are solid fills — gradients would conflict with the flat, clean aesthetic.
• Don't use letter-spacing adjustments. Every typography role specifies normal (0) tracking. Artificially spreading or tightening letters breaks the intentional typeface-native spacing.
• Don't make the cookie modal wider than 720px. The extracted width is optimized for comfortable reading measure — wider modals become scanning exercises.

Motion & Animation

Transition Tokens

--transition-color: color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--transition-transform: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
--transition-transform-expressive: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
--transition-opacity: opacity 0.3s ease-out;
--transition-opacity-fast: opacity 0.2s;
--transition-all: all 0.3s;

Keyframe Animations

• spin — Rotational animation, likely for loading indicators or refresh icons.
• ci-bounce — Bounce animation specific to the cookie consent interface (ci prefix suggests "cookie information"), probably applied to the modal entrance or toggle thumb movement.

Interaction Patterns

• Modal entrance: The cookie banner likely fades in with opacity 0.3s ease-out combined with a subtle Y-axis translate using transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) — a gentle upward slide with deceleration.
• Toggle switches: Thumb slides left/right via transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) — snappy, springy easing that feels physical.
• Button press: Color transitions use color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) — smooth but not sluggish, with slight overshoot in the bezier for liveliness.
• Link hover: Color shift from {colors.link} to {colors.link-active} over 300ms with standard ease-out.
• Accordion expansion: "Show details"/"Hide details" triggers a reveal with opacity transition, likely combined with height animation for smooth content exposure.
• Focus rings: Interactive elements gain a 2px {colors.primary} outline on keyboard focus, appearing instantly (0ms transition) for accessibility compliance.
• Overlay backdrop: Fades from opacity: 0 to opacity: 1 over 200–300ms when modal opens.

Imagery Style

Based on the brand positioning ("Visual Planner for Every Neurotype"), meta description, and observable design sensibility:

• Illustration-dominant: Tiimo's product is itself a visual tool, so marketing imagery likely showcases app screenshots, interface mockups, and workflow illustrations rather than stock photography.
• App-preview style: Clean device frames or floating UI cards showing the planner interface, with soft shadows ({shadows.sm} or {shadows.md}) creating depth against the warm canvas.
• Warm color treatment: Any photography or illustration would be color-graded toward the warm spectrum — cream, soft lavender, peach tones — avoiding cold blues that clash with {colors.primary}.
• Rounded image corners: Product imagery likely uses {rounded.md} (16px) or {rounded.lg} (100px) to match the overall shape language.
• Supportive, not dominant: Images support the editorial text rather than overpowering it — the 60px Recoleta headlines remain the focal point.
• Accessibility-conscious illustration: Given the neurodiversity mission, illustrations likely avoid busy patterns, optical illusions, or overwhelming detail — clean lines, clear subjects, generous negative space within the image frame.
• Possible gradient-hero: The DOM references a gradient-hero-new class with a noise child, suggesting the hero section may use a subtle gradient wash (likely {colors.surface-lavender} to transparent) with texture overlay for visual richness without photographic dependency.

Icon System

• Library: Custom SVG (Webflow-hosted webflow-icons font detected, but primary icons are custom SVGs embedded inline).
• Specific icons observed:
  • Toggle switch thumbs (circular SVG or CSS pseudo-element)
  • Chevron/down-arrow for "Show details" disclosure
  • External link icon (implied for "Cookie Information" footer link)
  • Close/dismiss icon (implied for modal dismissal, though not visible in this state)
  • Information circle (possible for tooltip/help interactions)
• Treatment: Stroke-based icons where visible (chevrons, links), filled for toggle thumbs. Color is almost certainly currentColor to inherit text color. Size ranges: 16px for inline icons (links), 20–24px for standalone icons, 36px for toggle thumbs (per {component.toggle-switch-thumb} size).
• Alignment: Icons sit on the same baseline as adjacent text with vertical-align: middle or flexbox alignment. Touch targets extend beyond icon bounds to meet 44×44px minimum.

Recommended Frontend Stack

- Framework:      Next.js 14+ (React) or Astro for marketing pages
- Styling:        CSS Modules or Tailwind CSS v4 (custom config mapping tokens)
- Fonts:          Self-hosted OTF files (Recoleta, SF Pro Text) via @font-face with font-display: swap
- Animation:      Framer Motion for modal entrances, vanilla CSS transitions for micro-interactions
- Icons:          Custom SVG components (React.createElement or inline <svg>)
- Component lib:  Radix UI Primitives for accessible toggle switches, dialogs, accordions
- Consent:       Custom implementation mirroring the documented cookie-banner-modal structure

Note on framework detection: The site is built in Webflow (detected from webflow-icons font-face, .home-april-2025 naming convention, and CDN-hosted assets at website-files.com). For reimplementation, Webflow exports to React-friendly code or can be replicated in any modern framework following this spec.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | ≤480px | Single-column everything; cookie modal becomes full-width with reduced padding; buttons stack vertically; consent grid becomes 2×2 or 1×4 stacked | | Tablet | 481–768px | Cookie modal constrains to ~90% width; 2-column consent grid possible; hero text stacks above illustration | | Desktop | 769–1440px | Full 720px cookie modal; 4-column consent grid; side-by-side hero layout; 1440px container max-width | | Wide | ≥1441px | Container centers with auto margins; extra horizontal whitespace; no content stretching |

Touch Targets

• {component.button-primary}: 48px height × minimum 112px width — exceeds WCAG AAA 44×44px minimum comfortably.
• {component.button-secondary}: Identical 48px height dimension — passes touch target guidelines.
• {component.toggle-switch-track-off} / {component.toggle-switch-track-on}: 44×44px — meets WCAG AAA minimum exactly.
• {component.cookie-banner-show-details-btn}: 28px height — below 44px recommendation. Should increase tap area with invisible padding or min-height override for mobile.
• {component.cookie-banner-link}: Inline text, no explicit sizing — ensure min-height: 44px and padding: 8px 0 for mobile tap safety.

Collapsing Strategy

• Navigation: On mobile, the top-right utility links (FAQ, Newsroom) collapse into a hamburger menu. Logo remains flush-left. Nav background may gain {colors.canvas} fill on scroll.
• Cookie modal: Transforms from centered 720px card to full-width bottom sheet on mobile (fixed position, bottom: 0, rounded-top-{md}), with scrollable internal content if height exceeds viewport.
• Consent category grid: 4-column row collapses to 2×2 on tablet portrait, then 1×4 stacked on mobile with each toggle getting full width.
• CTA buttons: Horizontal pair (Decline | Accept) stacks vertically on mobile with Accept on top (primary action first), full-width each.
• Hero section: Side-by-side headline + illustration layout stacks to single column (text → image) on mobile. Headline size may reduce from {typography.display-xl} (60px) to {typography.display-lg} (32px) or intermediate.
• Toggle switches: Maintain 44×44px touch target regardless of breakpoint — do not shrink.

Image Behavior

• Hero illustrations (app previews) likely use max-width: 100%; height: auto scaling with maintained aspect ratio (~16:9 or 4:3).
• On mobile, images constrain to container width minus padding (~32px gutters), potentially reducing to show less of the preview or cropping to focal area.
• Avatars/profile images (if present in authenticated views) maintain {rounded.xl} (120px) at smaller absolute size (64–80px) on mobile.

Iteration Guide

1. Start with the token foundation. Before writing any markup, define CSS custom properties for every value in this DESIGN.md's YAML frontmatter: --color-primary: #9f85ff, --font-heading: 'Recoleta Regular', --radius-full: 150px, etc. Reference these variables everywhere — never hard-code hex values or pixel measurements.

2. Build the cookie modal first. {component.cookie-banner-modal} is the most comprehensively specified component and exercises the full token set: colors, typography (both families), spacing, rounding, shadows, and nested sub-components. Validating this component validates the entire system.

3. Implement the typeface loading strategy. Host the four OTF files (Recoleta Regular, Recoleta Medium, SF Pro Text Regular, SF Pro Text Semi-Bold) locally or via CDN with @font-face declarations including font-display: swap. Define font-family variables --font-heading and --font-body that cascade to the correct stack.

4. Use Radix primitives for interactive components. The toggle switches ({component.toggle-switch-track-off} etc.) should use Radix UI's Switch or Toggle primitive for built-in keyboard accessibility, ARIA state management, and animated thumb positioning. Wrap them in Tiimo's visual tokens.

5. Respect the motion timing system. All transitions must use the extracted easing functions: cubic-bezier(0.25, 0.46, 0.45, 0.94) for color changes (300ms), cubic-bezier(0.645, 0.045, 0.355, 1) for transforms (200ms). Do not substitute ease-in-out or linear defaults.

6. Test with reduced-motion preference. Add @media (prefers-reduced-motion: reduce) rules that disable transform animations, set transition-duration to 0ms or 10ms, and ensure toggles snap instantly without slide animation.

7. Follow the surface layer model. When adding new components, decide which surface token they occupy: {colors.canvas} (page level), {colors.surface-elevated} (cards/buttons), or {colors.surface-warm} (zoned areas). Don't introduce new background colors without updating the palette.

8. Maintain the 1440px container discipline. All page-level sections should center within a max-width: 1440px container with auto horizontal margins. Content that needs to bleed full-width (background colors, hero imagery) lives outside this container.

9. Run the linter. Execute npx @google/design.md lint DESIGN.md after any token additions or removals. Watch specifically for broken-ref warnings (typos in {token.path} references), orphaned-tokens (defined but unused), and contrast-ratio failures (especially {colors.primary} on {colors.primary-disabled}).

10. When in doubt, choose warmth over precision. Tiimo's brand is intentionally soft: round up spacing, prefer the lighter text color ({colors.muted} over {colors.body} for secondary content), let the serif breathe with loose line-height. Clinical precision works against the empathetic positioning.

Font Setup

For implementations without access to the licensed Recoleta and SF Pro Text OTF files:

/* Google Fonts substitution for Recoleta */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&display=swap');

/* System font stack approximating SF Pro Text */
:root {
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

Define CSS variables for all typography tokens referencing these families. The visual result will be approximately 85% faithful to the original design intent.

Known Gaps

• Hover state styling: Per the no-hover policy, hover effects on buttons, links, and toggles are not documented. Implement based on active/pressed variants: darken backgrounds by ~8%, optionally add subtle translateY(-1px) lift.
• Loading/skeleton states: No skeleton loaders, spinners, or pending states were extractable from the static screenshot. Recommend using {colors.surface-tan} for skeleton backgrounds with {rounded.md} and a shimmer animation at opacity 1s ease-in-out infinite alternate.
• Form validation states: Beyond focus indication, error states (red borders, error messages) and success checkmarks are inferred from semantic tokens but not visually confirmed. Apply {colors.error} for invalid fields with a 2px border and accompanying message in {typography.caption}.
• Dark mode palette: The system documents {colors.surface-dark} and {colors.on-dark}, but a complete dark-mode surface/text inversion was not observable. Derive by inverting canvas→dark (#1a1a18), ink→off-white (#f0ede9), and adjusting primary to maintain perceived brightness.
• Authenticated/dashboard surfaces: This specification captures the public-facing marketing and consent layer. Internal app surfaces (calendar grids, task lists, settings panels) were not visible and likely introduce additional component types (date pickers, drag handles, progress bars) not covered here.
• Mobile-specific patterns: Bottom sheets, swipeable cards, gesture interactions, and safe-area insets for notch/notch-less devices are not documented. Extend based on platform guidelines (Human Interface Guidelines for iOS-first products).
• Exact shadow spread values: The single extracted shadow ({shadows.sm}) may have siblings at higher elevations (dropdowns, tooltips) that weren't visible. Use the provided {shadows.md} and {shadows.lg} tokens as reasonable extrapolations following the opacity-reduction pattern (0.2 → 0.15 → 0.12).
• Gradient hero specifics: The gradient-hero-new DOM class and noise texture child suggest a complex hero background treatment, but exact gradient stops, angle, and noise opacity couldn't be determined from the obscured screenshot. Implement as a subtle diagonal wash from {colors.surface-lavender} to transparent at ~15% opacity with a fine grain noise overlay at 3–5% opacity.
• Webflow-specific class names: Classes like .coi-consent-banner__category-name, .nav-func-bg, .home-april-2025 are framework artifacts, not semantic tokens. Do not carry these into a reimplementation — they represent Webflow's auto-generated naming, not intentional API.