Maket Design System

Overview

Maket presents itself as a confident, product-centric AI tool for architectural visualization — a design language built on high-contrast minimalism and theatrical depth. The visual system opens on a pristine {colors.canvas} white field, letting oversized {typography.display-xl} headlines in proprietary PP Telegraf Medium command attention with their tight letter-spacing ({typography.display-xl.letterSpacing}) and measured medium weight. This is not a shy brand; it uses {colors.primary} electric blue as its sole accent voltage on interactive elements, while reserving absolute {colors.surface-dark} black for the primary call-to-action — a deliberate inversion where the most important button carries maximum weight rather than brand color.

The shape vocabulary is distinctly modern and friendly: {rounded.pill} fully-rounded buttons sit alongside {rounded.lg} through {rounded.xl} cards that soften the otherwise stark black-on-white palette. Where the design truly distinguishes itself is in its treatment of product imagery — interface mockups float above the canvas with dramatic layered shadows ({extensions.shadows.lg}), creating a "lifted" effect that suggests the software itself is tangible and within reach. Pastel signature surfaces ({colors.signature-blue}, {colors.signature-lavender}, {colors.signature-teal}, {colors.signature-coral}) appear as subtle environmental color behind product screenshots, adding warmth without compromising the technical authority of the presentation.

Typography operates on a dual-axis system: PP Telegraf handles all display and titling roles at weights never exceeding 500, while a system sans-serif carries body copy at a surprisingly bold 700 weight — an inversion of conventional hierarchies where headlines stay restrained and body text asserts presence. The overall mood is one of capable minimalism: a tool that doesn't need to shout because its product speaks clearly enough.

Key Characteristics

• Pure white {colors.canvas} background with {colors.ink} near-black text forming a >21:1 contrast baseline
• Proprietary PP Telegraf Medium for all display/type roles at {typography.display-xl.fontSize} (72px) down to {typography.title-sm.fontSize} (20px)
• Single brand voltage color: {colors.primary} (#0000ee) applied sparingly to links and secondary actions
• Primary CTA uses inverted {colors.surface-dark} black with {colors.on-dark} white text
• Pill-shaped {rounded.pill} (99px) radius on all major action buttons
• Dramatic {extensions.shadows.lg} shadows on product showcase cards creating floating effect
• Four pastel signature surface colors for environmental warmth behind mockups
• Bold {typography.body-lg} body copy at weight 700, 18px — unusually heavy for paragraph text
• Generous {spacing.section-xl} (120px) vertical rhythm in hero zones

Colors

Brand & Accent

• Primary ({colors.primary} — #0000ee): Electric blue used for hyperlinks, the "Get started for free" ghost button outline in nav, and secondary interactive states. Appears only on actionable elements, never as a fill.
• Primary Hover ({colors.primary-hover} — #0000c7): Darkened blue for hover/active states on primary-colored elements.
• Primary Active ({colors.primary-active} — #000099): Deepest press state for primary-colored interactions.
• Accent Blue Surface ({colors.accent} / {colors.signature-blue} — #d6e8ff): Light pastel blue used as a background wash behind product mockups to add environmental warmth without competing with content.

Surface

• Canvas ({colors.canvas} — #ffffff): The universal page background. Pure white, no tint, no gradient. Every section begins here.
• Surface Soft ({colors.surface-soft} — #fafafa): Near-white for subtle zoning differences in dense UI areas or alternating band backgrounds.
• Surface Warm ({colors.surface-warm} — #f7f6f3): Warm undertone off-white, likely used in lifestyle photography contexts or warmer feature sections.
• Surface Strong ({colors.surface-strong} — #f0ece6): Deeper warm gray for elevated cards or secondary backgrounds needing more separation from canvas.
• Surface Dark ({colors.surface-dark} — #000000): Absolute black, reserved exclusively for the primary CTA button fill and highest-emphasis actions.
• Surface Elevated ({colors.surface-elevated} — #ffffff): White surface with shadow treatment — functionally identical to canvas but semantically "lifted" via {extensions.shadows.md} or {extensions.shadows lg}.

Text / Ink

• Ink ({colors.ink} — #000000): Headline and display text color. Pure black for maximum authority on {colors.canvas}.
• Body ({colors.body} — #212121): Slightly softened black for body copy, reducing harshness at small sizes while maintaining ~16.5:1 contrast.
• Muted ({colors.muted} — #605f5f): Medium gray for supporting text — hero subheadlines, descriptions, metadata. Provides clear hierarchy below body text (~4.6:1 contrast).
• Muted Soft ({colors.muted-soft} — #5a5b5e): Similar to muted, observed in tertiary UI labels and cookie consent body copy.
• On Primary ({colors.on-primary} — #ffffff): White text rendered on {colors.primary} blue or {colors.surface-dark} black backgrounds.
• On Dark ({colors.on-dark} — #ffffff): White text on black surfaces — used on {component.button-primary} and {component.button-cookie-accept}.
• On Surface ({colors.on-surface} — #1a1a1a): Near-black for text sitting on non-white surfaces (cards, modals).

Hairlines & Borders

• Hairline ({colors.hairline} — #e8e8e8): Subtle dividers between content zones, input borders at rest state.
• Border Strong ({colors.border-strong} — #d0d0cf): Visible outlines for focused inputs, rejected-state cookie button borders, and structural separators needing more visibility than hairline.

Semantic

• Link ({colors.link} — #1863dc): Standard web blue for inline links within body copy (observed in cookie consent "Show more" expander).
• Error ({colors.error} — #cc0000): Reserved for validation errors and destructive actions.
• Success ({colors.success} — #006400): Reserved for confirmation states and positive feedback.

Signature / Brand-Specific Surfaces

• Signature Blue ({colors.signature-blue} — #d6e8ff): Pastel blue backdrop behind floor-plan mockup windows.
• Signature Lavender ({colors.signature-lavender} — #f3d5f8): Soft purple-pink surface for adjacent mockup panels.
• Signature Teal ({colors.signature-teal} — #def8f7): Mint-green environmental color for variety in multi-panel showcases.
• Signature Coral ({colors.signature-coral} — #fae5d8): Warm peach tone completing the four-color pastel rotation behind product imagery.

Typography

Font Family

Maket's type system centers on PP Telegraf, a proprietary geometric grotesque from Pangram Pangram. The "Medium" weight (500) serves every display, heading, and titling role from {typography.display-xl} (72px) down to {typography.title-sm} (20px). A "Regular" variant exists in the loaded font stack but appears less frequently in this view. For body copy, the system falls back to the platform sans-serif stack — rendering as San Francisco on macOS/iOS, Segoe UI on Windows, or Roboto on Android. The @font-face declarations also load Albert Sans, Geist, and Inter Tight from Google Fonts at weight 500, suggesting these may serve as PP Telegraf substitutes in environments where the custom font fails to load, or they may power different sections of the broader site not visible in this viewport.

The critical typographic move: PP Telegraf stays at weight 500 always — never 600, never 700. Hierarchy comes from size (72→40→20px) and aggressive negative letter-spacing (-3.6px at display size). Meanwhile, body text inverts this by using system sans-serif at weight 700 — making paragraphs unexpectedly assertive while headlines remain coolly restrained.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 72px | 500 | 1.1 | -3.6px | Hero headline ("The AI Floor Plan Studio") | | {typography.display-lg} | 56px | 500 | 1.12 | -2.8px | Section headlines (inferred) | | {typography.title-md} | 40px | 500 | 1.1 | -2px | Feature section titles | | {typography.title-sm} | 20px | 500 | 1.3 | -1px | Card titles, modal headings | | {typography.body-lg} | 18px | 700 | 1.33 | 0 | Hero subheadline, lead paragraphs | | {typography.body-md} | 18px | 700 | 1.33 | 0 | Standard body copy (same as body-lg in this view) | | {typography.body-sm} | 16px | 400 | 1.5 | 0 | Secondary descriptive text | | {typography.caption} | 14px | 400 | 1.43 | 0 | Cookie consent body, metadata, fine print | | {typography.label} | 14px | 500 | 1.4 | 0 | Button labels, small UI labels | | {typography.button} | 14px | 500 | 1.25 | 0 | All button text (primary, secondary, cookie) | | {typography.button-nav} | 16px | 400 | 1.5 | 0 | Navigation link text |

Principles

The typography system enforces a strict division of labor: PP Telegraf owns presence through scale, not weight. At 72px with -3.6px tracking, the hero type feels expansive and architectural — appropriate for a tool about physical space planning. The choice of weight 500 over 300 or 400 keeps glyphs from becoming fragile at large sizes while avoiding the aggression of true bold. Negative letter-spacing tightens the color of the wordmark, making "The AI Floor Plan Studio" read as a single graphic object rather than a sequence of characters.

Body text at weight 700 is the system's most unconventional choice. Most design systems reserve 700 for short spans (labels, captions); here it's the default paragraph weight. This works because the size (18px) is already generous, and line-height at 1.33 provides enough internal breathing room that the heavy strokes don't collide. The effect is one of confident clarity — every sentence reads as a statement.

There are no italic styles observed in this viewport, and uppercase is reserved for the logo wordmark only. Color carries hierarchy as much as size: {colors.ink} black for headlines, {colors.muted} gray (#605f5f) for supporting text creates a natural reading order without relying solely on size differentiation.

Note on Font Substitutes

PP Telegraf is a commercial font from Pangram Pangram and not available on Google Fonts. For open-source reimplementation:

• Headlines/Titles: Substitute Inter Tight (available on Google Fonts) at weight 500 with matching negative letter-spacing. Inter Tight shares PP Telegraf's compact geometric proportions and handles large display sizes well. Define CSS variable --font-display: 'Inter Tight', sans-serif.
• Body Copy: System sans-serif stack is already optimal and requires no substitution. If a specific font is preferred, Geist (also loaded in the font stack) at weight 600 would approximate the bold body feel.
• CSS Variable Mapping:

  :root {
    --font-display: 'Inter Tight', 'PP Telegraf Medium', sans-serif;
    --font-body: sans-serif;
  }
  

If PP Telegraf licenses are available, use the provided placeholder names "PP Telegraf Medium Placeholder" in the font-stack to allow graceful fallback loading.

Layout

Spacing System

• Base unit: 4px ({spacing.xxs}).
• Tokens: {spacing.xxs} (4px — micro-adjustments, icon gaps), {spacing.xs} (8px — inline element gaps, tight padding), {spacing.sm} (10px — button padding vertical), {spacing.md} (12px — card internal spacing, form gaps), {spacing.lg} (16px — component margins), {spacing.xl} (20px — section gutters, comfortable padding), {spacing.xxl} (24px — card padding, modal internals), {spacing.section} (80px — vertical section rhythm), {spacing.section-xl} (120px — hero top padding).
• Section padding (vertical): {spacing.section-xl} (120px) — used in the hero band to create dramatic opening whitespace above the headline.
• Card internal padding: Varies by component — {component.cookie-banner} uses {spacing.xxl} (24px); product showcase cards have no internal padding (edge-to-edge imagery).
• Gutters: Horizontal page margins appear to be {spacing.xl} (20px) to {spacing.xxl} (24px) on mobile, scaling up on desktop. The nav bar uses explicit 32px horizontal padding per container data.

Grid & Container

• Max content width: 1440px (from section container data). Content is centered within this.
• Editorial density: The hero zone uses a centered single-column layout (820px header width constraint) with text block roughly 70% of viewport width, leaving room for the product showcase to breathe below.
• Desktop grid behavior: Product mockups arrange in an overlapping collage format rather than a strict column grid — this is a free-form compositional layer using absolute positioning or CSS transforms, not a CSS Grid template.
• Hero column split: Text is center-aligned vertically and horizontally in the upper portion; product imagery occupies the lower 60% of the viewport in a staggered arrangement.

Whitespace Philosophy

Maket practices generous, confident whitespace. The 120px top padding before the 72px headline means the first text a user sees sits well below the fold midpoint — the brand earns attention through restraint rather than density. Between the hero subheadline and the CTA button, there's approximately 40px of vertical space. Below the button, another ~60px separates the action from the product showcase. This is editorial-airy spacing: each element has room to complete its visual thought before the next begins.

Header Architecture

|--------------------------------------------------------------------------------|
| [logo]  maket                              Sign In   | Get started for free → |   |
|--------------------------------------------------------------------------------|
   ↑                                          ↑                    ↑
 32px left                               center-right          pill btn, right-edge
 padding                                  text link            24px h padding

The nav bar sits at {component.top-nav.height} (64px) height with transparent background ({colors.canvas}). Logo flush-left, authentication link and primary CTA flush-right, with substantial horizontal breathing room (32px per side per container data). No visible bottom border — the nav floats seamlessly on the canvas.

Hero Section

|================================================================================|
|                                                                                |
|                     The AI Floor Plan Studio                                   |
|                ({typography.display-xl} — 72px, -3.6px tracking)               |
|                                                                                |
|        Generate floor plans, explore layouts, and visualize your              |
|                   home with AI at your side.                                  |
|             ({typography.body-lg} — 18px, weight 700, muted)                  |
|                                                                                |
|                         [ Get started for free → ]                             |
|                      ({component.button-primary}, pill, black)                 |
|                                                                                |
|     ┌──────────────┐       ┌─────────────────────────────────┐                |
|     │  Living      │       │         Floor Plan Canvas        │                |
|     │  Room Photo  │       │    ┌─────────┐  ┌──────────┐    │                |
|     │              │       │    │ Room 1  │  │ Room 2   │    │                |
|     └──────────────┘       └─────────────────────────────────┘                |
|           ({component.product-showcase-card}, shadow-lg, overlap)              |
|                                                                                |
|================================================================================|

Hero uses centered text column (max ~820px) with the headline, subheadline, and CTA stacked vertically centered. Product showcase cards float below in a layered arrangement with {extensions.shadows.lg} creating depth separation. Each mockup window has {rounded.md} (24px) corners and casts a distinct drop shadow.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} background | Page base, nav bar, hero text band | | 1 (Hairline) | 1px {colors.hairline} border or none | Input fields at rest, subtle dividers | | 2 (Soft Lift) | {extensions.shadows.sm} — 0 5px 15px rgba(0,0,0,0.2) | Cookie banner, minor raised surfaces | | 3 (Float) | {extensions.shadows.md} — 0 25px 60px rgba(0,0,0,0.18) + 1px border | Product mockup windows, elevated cards | | 4 (Dramatic Float) | {extensions.shadows.lg} — 0 30px 80px rgba(0,0,0,0.2) + 1px border | Hero showcase cards, featured product panels | | 5 (Modal) | Same as Level 4 + backdrop filter (inferred) | Consent modal overlay |

The elevation philosophy is theatrical rather than functional. Shadows aren't used to indicate interactivity or z-index stacking in a traditional app sense — they're compositional tools that make the product screenshots appear to float above the page like physical objects on a desk. The shadow color is neutral-cool (pure black at varying opacities), never tinted toward the brand blue. This keeps the focus entirely on the lifted object's silhouette.

A subtle inner glow shadow ({extensions.shadows.inner-glow} — rgba(172,171,171,0.3) 0 -1px 10px) was detected once, likely used on pressed button states or input focus rings to create an inset appearance.

Decorative Depth

Pastel signature surfaces ({colors.signature-blue}, {colors.signature-lavender}, {colors.signature-teal}, {colors.signature-coral}) provide color-block depth behind product mockups. These aren't gradients or photographic backgrounds — they're flat hex fills that act as colored pedestals for the interface windows, creating a soft environmental context without competing with the crisp white of the actual UI being showcased. The effect is similar to how Apple places devices on softly colored backdrops in product photography.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 8px | Small UI chrome, checkboxes, minor containers | | {rounded.DEFAULT} | 20px | Default card radius, outlined buttons, input fields | | {rounded.md} | 24px | Product mockup windows, image containers | | {rounded.lg} | 32px | Feature cards, showcase panel corners | | {rounded.xl} | 40px | Large surface cards, hero image frames | | {rounded.pill} | 99px | Fully rounded: primary CTA, nav CTA, all major action buttons | | {rounded.full} | 9999px | Avatar circles, icon buttons (reserved) |

The shape language skews aggressively round. Even "sharp" elements like the cookie consent reject button use a modest 2px radius (not zero). There are no truly rectangular corners in the system except possibly in the logo mark. The progression from 8px → 20px → 24px → 32px → 40px → 99px shows a clear intent spectrum: utility chrome gets gentle rounding, user-facing cards get noticeably soft corners, and anything asking for a click becomes a pill.

Photography Geometry

Product mockup images (floor plan UI screenshots, interior photos) are displayed inside {rounded.md} (24px) containers with edge-to-edge fill — no internal padding, no border, just the image cropped to fill the rounded rectangle. Aspect ratios vary: interior photo mockups appear ~4:3 or 3:2, while the floor plan canvas looks closer to 16:10. Images do not have overlay gradients or tinting — the product UI is shown with full fidelity, and the surrounding pastel signature surface provides all necessary separation from the page background.

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

{component.top-nav} — The persistent global navigation bar spanning full viewport width at 64px height. Background {colors.canvas}, no border, no shadow. Contains logo (left), sign-in link (center-right), and {component.nav-button-primary} (right edge).

{component.nav-link} — Simple text-based navigation links like "Sign In". Transparent background, {colors.ink} text at {typography.button-nav} size (16px, weight 400). Minimal padding for clickable area.

{component.nav-button-primary} — The "Get started for free" button appearing in the top navigation. White/canvas background with {colors.ink} black text, {rounded.pill} (99px) fully rounded, 10px × 24px padding. Has a right-arrow icon inline. This is an outlined/ghost-style entry point — the conversion CTA lower on the page uses the inverted black version ({component.button-primary}).

{component.button-primary} — The main conversion call-to-action: "Get started for free" in the hero section. Solid {colors.surface-dark} (black) background with {colors.on-dark} (white) text. Fully {rounded.pill} rounded. Generous 14px × 28px padding making it physically prominent. Includes a right-arrow circle icon. Shadow: {extensions.shadows.sm} for subtle lift. State variant: {component.button-primary-active} darkens to #1a1a1a on press.

{component.button-secondary} — Ghost button variant with {colors.canvas} background and {colors.ink} text. Same pill rounding as primary. Used where a softer action is needed alongside the main CTA.

{component.button-secondary-outline} — Outlined button with visible border, {rounded.DEFAULT} (20px) — slightly less round than primary actions. Observed pattern for tertiary actions.

{component.button-cookie-reject} — The "Reject" button in the cookie consent banner. White background, black text, 2px solid {colors.border-strong} border, sharp 2px radius (unusually square for this system). Smaller padding (8px 16px). This follows the cookieconsent library defaults rather than Maket's primary design language.

{component.button-cookie-accept} — The "Accept" button in cookie consent. Black ({colors.surface-dark}) background, white ({colors.on-dark}) text, 2px border, 2px radius. Mirrors the reject button's geometry but inverts the fill. Matches the visual weight of {component.button-primary} at a smaller scale.

Cards & Containers

{component.hero-band} — The full-width hero section container. {colors.canvas} background, {spacing.section-xl} (120px) top padding. Centers its child content (headline, subhead, CTA, product show case) within a max-width constraint (~820px for text). No border, no shadow — pure flat canvas.

{component.product-showcase-card} — Individual floating product mockup panels in the hero. White ({colors.surface-elevated}) background with {rounded.lg} (32px) corners. Casts {extensions.shadows.lg} dramatic shadow for float effect. Edge-to-edge content (no padding). These overlap each other in a layered composition.

{component.product-mockup-window} — The inner browser-window-like frame containing actual floor plan UI screenshots. White background, {rounded.md} (24px) corners. May contain a thin title bar or chrome row at top. Sits inside {component.product-showcase-card} or directly on a signature surface.

{component.cookie-banner} — The GDPR/privacy consent modal fixed to bottom-right. White background, {rounded.lg} (32px) corners, {spacing.xxl} (24px) internal padding. Uses {extensions.shadows.md} elevation to separate from page content. Title uses {typography.label}, body uses {typography.caption} in {colors.muted}. Contains {component.button-cookie-reject} and {component.button-cookie-accept} in a row.

{component.surface-blue} / {component.surface-lavender} / {component.surface-teal} / {component.surface-coral} — Pastel colored surface blocks serving as backdrops for product mockups. Each applies its respective signature color as background with {rounded.md} (24px) corners. These create the "pedestal" effect beneath floating UI windows.

Inputs & Forms

{component.text-input} — Standard text input field. White background, {colors.ink} text, {rounded.DEFAULT} (20px) corners, 10px × 14px internal padding, 44px fixed height. Border is likely {colors.hairline} at rest. State variant: {component.text-input-focus} maintains same geometry with potential border color change or ring.

{component.checkbox-input} — Custom styled checkbox. Background color #d0d5d2 (neutral mid-gray), {colors.ink} checkmark when checked, fully rounded at 50px radius making it pill/capsule shaped. 20px size. Unusual geometry for a checkbox — consistent with the system's roundness bias.

Navigation

{component.top-nav} — See Buttons section. Fixed-position navigation bar with logo, auth link, and CTA. Transparent background blending into hero canvas. 64px height matches comfortable touch/click targets.

Signature Components

{component.hero-headline} — The "The AI Floor Plan Studio" <h1>. Transparent background, {colors.ink} text, {typography.display-xl} (72px, weight 500, -3.6px tracking). Centered alignment. This is the most visually dominant element on the page — its size alone commands the entire upper viewport.

{component.hero-subheadline} — Supporting paragraph below headline. {colors.muted} (#605f5f) text, {typography.body-lg} (18px, weight 700). Centered, max-width constrained for readability. Provides the "what" and "why" after the "who" established by the headline.

{component.footer} — Page footer (inferred from pattern). White background, {colors.muted} text at caption size. Generous {spacing.section} (80px) vertical padding. Likely contains legal links, social icons, copyright — standard footer architecture.

Do's and Don'ts

Do

• Do use {colors.surface-dark} (black) for the single most important conversion action on any page — this is the "primary CTA" pattern, even though it feels counterintuitive compared to brand-colored buttons.
• Do apply {rounded.pill} (99px) radius to every button that initiates a user journey (sign up, start free trial, get demo). Reserve smaller radii for utility actions.
• Do keep PP Telegraf headlines at weight 500 and let size carry hierarchy — never artificially bold display text beyond what the font provides.
• Do use {typography.body-lg} at weight 700 for all paragraph text. The heavy body voice is intentional and part of the brand's confident tone.
• Do apply {extensions.shadows.lg} to product showcase cards to create the "floating UI" effect. The shadow is a core visual signature, not optional decoration.
• Do place product mockups on {colors.signature-blue}, {colors.signature-lavender}, {colors.signature-teal}, or {colors.signature-coral} pastel surfaces when showing them outside their native white context.
• Do maintain {spacing.section-xl} (120px) minimum padding above hero headlines. The airiness is a brand attribute.
• Do center-align hero text blocks. Left alignment breaks the composed, gallery-like quality of the landing experience.
• Do use negative letter-spacing on display text proportional to size: -3.6px at 72px, -2px at 40px, -1px at 20px. This tightens wordmarks into cohesive graphic objects.
• Do keep {colors.primary} blue strictly for links and secondary actions. Never fill a large surface with it.

Don't

• Don't substitute {colors.primary} (#0000ee) for the primary button fill. The primary CTA is always {colors.surface-dark} black — blue is reserved for hyperlinks and ghost buttons.
• Don't round corners below {rounded.sm} (8px) on user-facing components. Even "square" elements like cookie buttons use 2px+ radius. Zero-radius rectangles don't exist in this vocabulary.
• Don't use font weights above 500 for any PP Telegraf text. If emphasis is needed, increase size or switch to the bold system sans-serif body font.
• Don't add gradient overlays to hero imagery or product showcases. The mockups display with full fidelity on flat white or flat pastel backgrounds — any gradient would obscure the UI being demonstrated.
• Don't compress vertical spacing below {spacing.section} (80px) between major sections. The generous rhythm is essential to the uncluttered feel.
• Don't introduce new colors into the pastel surface rotation. The four signature colors (blue, lavender, teal, coral) are a closed set.
• Don't use shadows smaller than {extensions.shadows.sm} on elevated elements. Barely-visible shadows read as rendering artifacts, not intentional depth, in this system's dramatic context.
• Don't mix alignment systems within the hero — if the headline is centered, the subheadline, CTA, and product showcase must also center on the same axis.
• Don't apply {typography.caption} (14px) to body copy or important descriptive text. Caption is reserved for legal text, metadata, and cookie disclaimers.
• Don't create new border radius values between the defined tokens. The 8→20→24→32→40→99px scale is complete; intermediate values break the system's consistency.

Motion & Animation

Transition Tokens

--transition-all: all 0.2s ease;
--transition-height: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);

The extracted CSS shows minimal transition declarations — primarily all property transitions at 200ms (likely for hover states and simple interactions) and a specific height transition at 500ms with a custom cubic-bezier easing (likely for accordion/expander components like the cookie consent "Show more" detail reveal).

Keyframe Animations

No @keyframes rules were detected in the extracted stylesheet. Any motion on the live site (scroll-triggered reveals, parallax on product mockups, entrance animations) is likely implemented via JavaScript libraries (Framer Motion, given the Framer framework detection) or CSS scroll-driven animations not captured in static extraction.

Interaction Patterns

Based on observable structure and framework inference:

• Button hover: Background color darkening (black → #1a1a1a, blue → {colors.primary-hover}) at 200ms via {extensions.motion.easing}.
• Cookie consent expand: Height transition over 500ms revealing additional privacy details when "Show more" clicked.
• Product showcase composition: Static overlapping layout on load — may animate into position via JS orchestration (not extractable).
• Focus rings: Likely 2px solid {colors.border-strong} or subtle shadow ring on input focus ({component.text-input-focus}).
• Scroll reveals: Hero content and product cards likely fade/slide in on scroll-into-view given the Framer framework basis — recommended implementation uses opacity + translateY transforms.

Recommendation for added motion: Keep transitions fast (150–250ms) and easing near-default (ease-out or cubic-bezier(0.4, 0, 0.2, 1)). Avoid springy or bouncy curves — the brand voice is precise and architectural, not playful. Entrance animations should use opacity fades with slight upward translation (20–30px), never scale or rotation.

Imagery Style

• Primary imagery type: Product UI screenshots (floor plan editor interface, room configuration canvases) presented in floating browser-chrome frames.
• Secondary imagery: Interior/lifestyle photography (living room scenes) shown as reference material within the product workflow demonstration.
• Color treatment: Product UI shown with full color fidelity (white backgrounds, blue accent UI elements, colored room fills). No filters, no duotones, no overlays.
• Composition: Multiple mockup windows arranged in an overlapping, slightly rotated collage format creating depth through layering rather than a rigid grid.
• Background relationship: Each mockup sits on a solid pastel signature surface (blue/lavender/teal/coral) or directly on white canvas. The pastel acts as a "shadow substitute" providing ground plane without literal shadow complexity.
• Role: Imagery supports and demonstrates — the product UI is the star, photography is contextual evidence of real-world application.
• Corner treatment: All image containers use {rounded.md} (24px) or {rounded.lg} (32px) radius. No sharp-cornered images.
• Shadow: Every image-containing card casts {extensions.shadows.md} or {extensions.shadows.lg} — the floating effect is mandatory for product visuals.

Icon System

• Library: Custom SVG icons. No Lucide, Heroicons, Material Icons, or other standard library classes detected. The arrow-in-circle icon on the primary CTA is custom-drawn.
• Specific icons observed:
  • Right arrow inside circle (→) — used on {component.button-primary} and {component.nav-button-primary}
  • Maket logo mark — geometric cube/isometric box outline (top-left of nav)
  • Close (×) — inferred on cookie banner dismiss (standard pattern)
• Treatment: Stroke-based icons (outlined, not filled), rendered in currentColor. The arrow icon appears to match its parent button's text color (white on black button).
• Size: Arrow icon approximately 18–20px diameter within the button. Logo mark approximately 24×24px.
• Alignment: Icons are inline with text, vertically centered via flexbox alignment. Padding between icon and text appears to be ~8px.

Recommended Frontend Stack

- Framework:      Next.js (App Router) or Framer Sites (actual stack inferred: Framer)
- Styling:        CSS Modules or Tailwind CSS (with heavy custom token overrides)
- Fonts:          PP Telegraf (self-hosted woff2) → Inter Tight (Google Fonts fallback) → system sans-serif
- Animation:      Framer Motion (for scroll-triggered reveals and orchestrated entrance sequences)
- Icons:          Custom SVG components (inline React components for arrow, logo, close)
- Component lib:  Custom components (no shadcn/Radix detected — hand-built button, card, input primitives)

Font loading strategy: PP Telegraf should be self-hosted with font-display: swap to prevent FOIT. Load Inter Tight from Google Fonts as the @font-face fallback chain already declares. The system sans-serif needs no external request — rely on OS defaults.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column hero, stacked product showcase (no overlap), hamburger nav (inferred), reduced type scale (display-xl → ~48px) | | Tablet | 640–1024px | Two-column product showcase possible, nav remains horizontal, padding reduces to {spacing.xl} (20px) | | Desktop | 1024–1440px | Full hero layout, overlapping mockup collage, max-content container active | | Wide | > 1440px | Content centers in 1440px max-width, extra horizontal whitespace |

Touch Targets

• {component.button-primary}: Height ~48px (14px padding × 2 + text + border) — exceeds WCAG AAA 44×44px minimum ✓
• {component.button-cookie-reject} / {component.button-cookie-accept}: ~36px height (8px padding × 2 + 14px text) — below AAA target, acceptable for secondary cookie actions but consider increasing to 44px for touch devices
• {component.text-input}: 44px height explicitly — meets AAA target ✓
• {component.nav-link}: Text-only, relies on line-height padding; ensure min 44px tap area via padding expansion on mobile

Collapsing Strategy

• Navigation: At mobile breakpoint, the horizontal "Sign In / Get started" nav items collapse into a hamburger menu or slide-over panel. The logo remains fixed left.
• Hero columns: The single-column centered text stack persists at all breakpoints (it's already single-column). Font size scales down: 72px → 48px (mobile), 56px (tablet), 72px (desktop).
• Product showcase collage: Overlapping mockup arrangement collapses to a vertical stack on mobile — each card full-width with {spacing.md} (12px) vertical gap. Tablet may show 2-column grid. Only desktop renders the artistic overlap.
• Cookie banner: Remains fixed bottom-right on all screens but may reduce width to ~90vw on mobile with stacked buttons (reject above accept rather than side-by-side).
• Spacing compression: Vertical section padding reduces from {spacing.section-xl} (120px) to {spacing.section} (80px) on mobile to avoid excessive scrolling before content.

Image Behavior

• Hero product mockups: Scale proportionally maintaining aspect ratio. On mobile, each mockup takes full container width minus gutters. Corner rounding ({rounded.md} / {rounded.lg}) preserved at all sizes. Shadow intensity may reduce slightly on mobile (use {extensions.shadows.md} instead of {extensions.shadows.lg}).
• Interior photography: Contained within mockup window frame — scales with parent. Never bleeds outside the rounded container.
• Logo: Fixed pixel size (24–32px) regardless of viewport, with consistent left margin.

Iteration Guide

1. Start with the token foundation: Build your tailwind.config.ts or CSS custom properties file by extracting every value from the YAML frontmatter. Define --color-canvas: #ffffff, --radius-pill: 99px, --font-display: 'PP Telegraf Medium', ... and reference nothing else.
2. Implement the hero band first: Create {component.hero-band} with 120px top padding, centered content, white background. Add the {typography.display-xl} headline at exactly 72px with -3.6px letter-spacing. Get the type feeling right before adding anything else — it's the brand's loudest voice.
3. Build the primary CTA: Implement {component.button-primary} as a black pill button with white text and the arrow icon. This button's geometry (99px radius, specific padding) repeats everywhere — get it perfect once, reuse as a component.
4. Layer the product showcase: Position 2–3 {component.product-showcase-card} elements with {rounded.lg} and {extensions.shadows.lg}. Place them on {colors.signature-*} pastel surfaces. Use CSS transforms (slight rotate, translate) for the overlapping collage effect visible in the screenshot.
5. Add the nav bar: {component.top-nav} at 64px height, transparent, with logo left and {component.nav-button-primary} right. Ensure 32px horizontal padding matches the container spec.
6. Implement state variants: For each interactive component, add -hover, -active, -focus, and -disabled variants as separate component entries (or as modifier classes). The spec documents default and active; infer hover from active.
7. Handle the cookie banner last: {component.cookie-banner} is functionally separate (likely a third-party script). Match its visual style (rounded-lg, shadow-md) but treat it as an overlay system independent of the core layout.
8. Substitute fonts intelligently: If you lack PP Telegraf license files, use Inter Tight at weight 500 for all display/heading roles. Define the CSS variable --font-display once and reference it throughout. Body copy uses system sans-serif — no substitution needed.
9. Validate with linter: Run npx @google/design.md lint DESIGN.md after any token changes. Watch for broken-ref warnings (typos in {token.path} syntax) and contrast-ratio alerts (especially on {colors.muted} body text).
10. Respect the pastel palette: When adding new showcase sections, cycle through the four {colors.signature-*} colors rather than inventing new tints. The set is intentionally limited.

Font Setup: PP Telegraf is available from pangrampangram.com. For immediate prototyping without licensing, use this CSS variable setup:

:root {
  --font-display: 'Inter Tight', 'PP Telegraf Medium', 'PP Telegraf Medium Placeholder', sans-serif;
  --font-body: sans-serif;
}
/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500&display=swap');

All {typography.display-*} and {typography.title-*} tokens reference var(--font-display). All {typography.body-*} and {typography.*} tokens reference var(--font-body).

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover colors, shadow elevations, and transform offsets are not documented. Infer from active states: darken fills by ~10%, elevate shadow one level.
• Loading/skeleton states: No skeleton loaders, spinners, or pending-state treatments were visible in the static screenshot. Recommend implementing skeleton cards matching {component.product-showcase-card} geometry with pulse animation.
• Form validation states: Beyond {component.text-input-focus}, there are no error ({colors.error}) or success ({colors.success}) input treatments documented. Design red-border + error-message + icon pattern following the rounded-{DEFAULT} convention.
• Dark mode: The entire design system is extracted from light mode. No dark-mode token values exist. The {colors.canvas} → dark gray, {colors.ink} → near-white, and shadow → lighter-or-remove transformation would need design direction.
• Dashboard/app surfaces: This DESIGN.md covers the marketing landing page only. The actual floor plan editor UI (seen in mockups) uses a different component vocabulary (tool palettes, canvas grids, drag handles) not captured here.
• Responsive breakpoint-specific values: Exact mobile type scale (what 72px becomes at 375px width), mobile nav interaction (hamburger vs. slide-over), and tablet grid columns are inferred from pattern, not extracted.
• Micro-copy and exact strings: Button labels, legal text, and metadata content are approximated from the screenshot. Source-of-truth copy lives in CMS or codebase.
• Third-party cookie widget styling: The {component.cookie-banner}, {component.button-cookie-reject}, and {component.button-cookie-accept} follow cookieconsent library defaults that partially conflict with Maket's design language (2px radius instead of rounded). These may be overridden or replaced with a custom implementation.
• Animation keyframes: Despite the Framer framework basis, no @keyframes or animation class names appeared in the extracted CSS. Scroll-triggered entrance animations, parallax offsets, and micro-interactions are implemented in JS and invisible to static extraction.
• Icon asset files: The arrow-circle icon, logo mark, and close icon are referenced descriptively only. SVG paths, viewBox dimensions, and stroke widths require access to the original component source or asset pipeline.