Maket Design System

Overview

Maket presents an architectural technology platform distilled into its most essential visual form: a centered authentication experience set against a warm, subtly patterned canvas. The design language is one of radical restraint—no gradients, no drop shadows on containers, no decorative flourishes beyond a faint geometric watermark that suggests blueprint or architectural drafting heritage. Every element serves function; every pixel earns its place.

The brand voltage lives almost entirely in the typographic weight spectrum of PP Telegraf, a grotesque-inspired sans-serif that carries from ultralight (200) through black (900). On this login surface, the system deploys only weights 400–600, reserving heavier drama for marketing contexts. Color authority rests with {colors.primary} — absolute black — applied as the solid-fill background of the primary CTA ({component.button-primary}). This is a confident choice: rather than reaching for a saturated accent, Maket treats black itself as the signature hue.

The shape language is defined by pill geometry. Both the primary sign-in button and the secondary Google OAuth button share {rounded.pill} (9999px radius), creating a soft, approachable container that contrasts with the slightly squarer {rounded.md} (8px) used on text inputs. This dual-radius vocabulary—pill for actions, modest-round for inputs—creates tactile differentiation without visual noise.

The single typographic move defining this system is weight-based hierarchy over size variation. The "Welcome to Maket" headline and field labels both occupy 24px and 13px respectively, but the headline pushes to weight 600 while body copy sits at 400. Size does the heavy lifting for the display-to-body transition (24px → 13px), while weight distinguishes labels from their input values.

Key Characteristics

• Warm off-white {colors.surface} (#f7f6f3) canvas with geometric pattern overlay sets architectural mood
• Absolute-black {colors.primary} (#000000) as sole brand-color carrier on CTAs
• PP Telegraf across all roles, weight range 400–600 on auth surfaces
• Pill-shaped action buttons ({rounded.pill}) vs. rounded-square inputs ({rounded.md})
• Generous internal input padding of 15px 18px for comfortable touch/mouse targeting
• Subtle 1px {colors.hairline} borders on inputs and secondary buttons
• Transition timing locked to 150ms via cubic-bezier(0.4, 0, 0.2, 1) easing
• Muted {colors.muted} (#a3a3a3) for helper icons and tertiary links
• Zero box-shadow elevation on cards and containers — flat design ethos throughout

Colors

Brand & Accent

• Primary ({colors.primary} — #000000): Absolute black, applied exclusively as the solid background fill on {component.button-primary}. This is the single brand-color touchpoint on the authentication surface.
• Primary Active ({colors.primary-active} — #212121): Deep charcoal for pressed/down states of primary buttons.
• Primary Hover ({colors.primary-hover} — #1a1a1a): Near-black for hover states, providing subtle lift from pure black.
• Accent ({colors.accent} — #000000): Aligned with primary in this monochromatic context; would differentiate on richer surfaces.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white, used for the top banner strip, elevated card surfaces (Google button interior), and input backgrounds.
• Surface ({colors.surface} — #f7f6f3): Warm off-white with slight yellow undertone — the dominant page background carrying the geometric pattern overlay.
• Surface Soft ({colors.surface-soft} — #fafafa): Near-white, used as hover state background for secondary and Google buttons.
• Surface Elevated ({colors.surface-elevated} — #ffffff): Pure white for elements requiring visual lift from the warmer base.
• Surface Input ({colors.surface-input} — #ffffff): Explicitly white input fields against the warm background.

Text / Ink

• Ink ({colors.ink} — #000000): Pure black for maximum-contrast elements: the "Welcome to Maket" heading and form labels.
• Body ({colors.body} — #212121): Dark charcoal for primary reading text, button labels on secondary variants, and the Google sign-in text.
• Body Secondary ({colors.body-secondary} — #424242): Medium gray for placeholder text within inputs ("Enter your email").
• Muted ({colors.muted} — #a3a3a3): Light gray for the eye toggle icon, top-banner utility links, and tertiary UI chrome.
• Muted Dark ({colors.muted-dark} — #808080): Medium-light gray for less-emphasized helper text.
• On Primary ({colors.on-primary} — #ffffff): Pure white text on black primary button backgrounds.
• On Surface ({colors.on-surface} — #212121): Dark text intended for light surface contexts.
• On Dark ({colors.on-dark} — #ffffff): White text reserved for dark-mode surfaces or inverted treatments.

Hairlines & Borders

• Hairline ({colors.hairline} — #e0e0e0): Standard 1px border color for the Google sign-in button outline and input fields.
• Hairline Soft ({colors.hairline-soft} — #e5e5e5): Slightly lighter variant for subtle dividers.
• Border Input ({colors.border-input} — #e0e0e0): Dedicated token for input field borders.
• Border Strong ({colors.border-strong} — #cccccc): Darker border for focused or active states where emphasis is needed.

Semantic

• Error ({colors.error} — #dc2626): Red for validation failures and destructive actions.
• Success ({colors.success} — #16a34a): Green for confirmation states.
• Link ({colors.link} — #212121): Dark charcoal matching body text, used for "Forgot your password?" and "Sign up" navigation links.
• Link Active ({colors.link-active} — #000000): Black for hovered/focused link states.
• Info ({colors.info} — #2563eb): Blue for informational callouts.
• Warning ({colors.warning} — #d97706): Amber for caution states.

Typography

Font Family

The entire system runs on PP Telegraf, a proprietary grotesque-style sans-serif from Pangram Pangram. The @font-face declarations reveal eight loaded weights spanning ultralight (200) through black (900), though the authentication surface visible here employs only the regular (400), medium (500), and semibold (600) cuts. The fallback stack is simply "PP Telegraf", sans-serif. PP Telegraf's character is distinctly modern-grotesque: neutral letterforms with subtle personality in the numeral treatment and slightly condensed proportions that allow headlines to pack density without feeling cramped. This is not a free font—it must be served from Maket's asset pipeline (/assets/PPTelegraf-*.woff2) or substituted.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 32px | 600 | 1.25 | -0.01em | Marketing headlines (not seen on auth, reserved for landing pages) | | {typography.display-lg} | 24px | 600 | 1.33 | 0 | Page heading: "Welcome to Maket" | | {typography.title-md} | 24px | 600 | 1.33 | 0 | Equivalent to display-lg for section titles | | {typography.title-sm} | 16px | 500 | 1.5 | 0 | Card titles, modal headers | | {typography.body-lg} | 15px | 400 | 1.6 | 0 | Input placeholder text, button content | | {typography.body-md} | 13px | 400 | 1.85 | 0 | Primary body copy, metadata lines | | {typography.body-sm} | 13px | 400 | 1.5 | 0 | Compact body, footer text | | {typography.caption} | 13px | 400 | 1.38 | 0 | Timestamps, badges, fine print | | {typography.label} | 13px | 500 | 1.38 | 0 | Form field labels ("Email address", "Password") | | {typography.button} | 16px | 500 | 1.25 | 0 | Button label text (Sign in, Sign in with Google) | | {typography.button-sm} | 14px | 500 | 1.25 | 0 | Small button variants, toolbar actions |

Principles

Maket's typographic system trusts size contrast first, weight contrast second, and avoids all other hierarchy mechanisms. The jump from the 24px heading to 13px body copy provides a 1.85× scale factor that creates clear visual separation without needing bold headings (the heading is semibold 600, not bold 700+). Labels sit at the same 13px size as body text but gain 100 units of weight (500 vs. 400), making them feel anchored without demanding attention.

The system notably avoids letter-spacing manipulation entirely—all roles use letter-spacing: 0 except the reserved display-xl which applies a barely-perceptible -0.01em tightening for larger sizes. There is no uppercase transformation anywhere on the auth surface; even the button labels ("Sign in", "Sign in with Google") remain title case, reinforcing the conversational, product-over-brand tone.

Line heights are deliberately spacious: 1.85 for the 13px body role gives each line ~24px of vertical breathing room, ensuring readability even when users are quickly scanning form fields. Button text tightens to 1.25 for compact, centered visual impact within the 40px button height.

Note on Font Substitutes

PP Telegraf is a commercial font not available on Google Fonts. For prototyping and open-source implementations, substitute with Inter (Google Fonts) for its similar grotesque proportions and extensive weight range, or DM Sans for a slightly more geometric alternative that captures the same neutral-modern voice. Define CSS variables:

:root {
  --font-family: 'Inter', 'PP Telegraf', -apple-system, BlinkMacSystemFont, sans-serif;
}

For production Maket implementations, ensure the PP Telegraf font files are hosted at the expected /assets/ paths or loaded from a CDN with appropriate licensing.

Layout

Spacing System

• Base unit: 4px (the smallest explicit spacing value observed).

• Tokens:

  • {spacing.xxs} (2px): Micro-adjustments, internal icon gaps.
  • {spacing.xs} (4px): Icon button padding, inline icon gaps.
  • {spacing.sm} (8px): Vertical rhythm between label and input, small gaps.
  • {spacing.md} (12px): Minor component separation.
  • {spacing.lg} (16px): Horizontal padding for compact sections.
  • {spacing.xl} (20px): Horizontal padding for the auth form container.
  • {spacing.xxl} (32px): Between major element groups.
  • {spacing.section} (40px): Vertical padding above/below the auth form block.
  • {spacing.section-xl} (61px): Extended section spacing for marketing contexts.
  • {spacing.hero} (143px): Hero-scale vertical padding for landing page hero bands.

• Section padding (vertical): {spacing.section} (40px) — used above and below the centered auth card area.

• Card internal padding: Not applicable in the traditional sense; the auth form uses fluid horizontal padding of {spacing.xl} (20px).

• Gutters: The main container constrains to 1440px max-width with no visible gutters on the single-column auth layout.

Grid & Container

The authentication page operates on a single-column centered grid with no multi-column complexity. The <main> element has an implicit max-width of 1440px (extracted from container styles), but the auth form itself is visually constrained to approximately 380–420px wide, centered both horizontally and vertically via flexbox. This creates a "floating card" effect against the patterned background without an explicit card wrapper element.

For marketing or dashboard contexts (not visible here but implied by the platform nature), expect a transition to a 12-column grid with sidebar rail layouts common to SaaS applications. The current surface is intentionally minimal: one column, one task (authenticate), zero distraction.

Whitespace Philosophy

Maket practices generous vertical compression, moderate horizontal breathing room. The 40px of space between the logo and heading, then again between heading and first input, creates a stately pace that signals trustworthiness and deliberation. Input fields receive ample internal padding (15px vertical, 18px horizontal) so they never feel cramped. However, there's no wasted horizontal space—the form hugs a comfortable narrow width that keeps the eye traveling vertically down a clear completion path.

Header Architecture

┌─────────────────────────────────────────────────────────────┐
│  Switch back to Maket 1.0 →                    [max-width]   │
│  (top-banner, full-width, {colors.canvas})                   │
└─────────────────────────────────────────────────────────────┘

The top banner is a minimal utility bar spanning full viewport width, containing a single left-aligned navigation link in {typography.body-sm}. Height is approximately 36–40px. Below it begins the {colors.surface} patterned background.

Hero Section / Auth Section

┌─────────────────────────────────────────┐
│                                         │
│            [LOGO 48px]                  │
│                                         │
│       Welcome to Maket                  │
│     ({typography.display-lg})           │
│                                         │
│   Email address                         │
│   ┌───────────────────────────┐         │
│   │ Enter your email          │         │
│   └───────────────────────────┘         │
│   ({component.text-input})              │
│                                         │
│   Password                              │
│   ┌───────────────────────────┐ 👁      │
│   │ Enter your password       │         │
│   └───────────────────────────┘         │
│   ({component.password-input-wrapper})  │
│                                         │
│   ┌───────────────────────────┐         │
│   │        Sign in            │         │
│   └───────────────────────────┘         │
│   ({component.button-primary})          │
│                                         │
│   ┌───────────────────────────┐         │
│   │  G  Sign in with Google   │         │
│   └───────────────────────────┘         │
│   ({component.button-google})           │
│                                         │
│     Forgot your password?               │
│        ({component.link-underline})     │
│                                         │
│                                         │
│  Don't have an account? Sign up         │
│       ({component.footer-text})         │
└─────────────────────────────────────────┘
   (centered, ~400px wide, on {colors.surface})

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, {colors.canvas} or {colors.surface} background | Base page background, banner | | 1 — Border only | 1px solid {colors.hairline} | Text inputs, secondary/Google buttons | | 2 — Focus ring | 0 0 0 2px rgba(0,0,0,0.08) | Focused input fields | | 3 — Hover lift | Background shift to {colors.surface-soft} | Secondary button hover states |

Maket's depth philosophy is aggressively flat-layered: there are no drop shadows on any container, card, or button. Elevation is communicated solely through background color shifts (canvas → surface-soft on hover) and border presence/absence (inputs have borders, the primary button does not). The only "shadow-like" treatment is the subtle focus ring on inputs—a 2px black-at-8%-opacity outset that provides accessibility-compliant focus indication without the heavy material-design shadow stack.

This flatness is intentional: the geometric pattern on the {colors.surface} background already provides textural depth, so adding drop shadows would create visual competition. The design trusts the warmth of the background pattern and the crispness of the 1px hairline borders to create sufficient layering.

Decorative Depth

The page background features a subtle geometric line pattern rendered in a color slightly lighter than {colors.surface} (appearing as faint white or very-light-gray lines forming repeating hexagonal/isometric shapes). This watermark-quality decoration evokes architectural blueprints, technical drawings, or wireframe overlays—directly supporting Maket's positioning as an architecture/AI-planning tool. The pattern is non-interactive, low-opacity (~10–15% lighter than background), and covers the full viewport behind the centered auth form.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Small badges, tag elements (not observed, available) | | {rounded.DEFAULT} / {rounded.md} | 8px | Text input fields, content containers | | {rounded.lg} | 12px | Cards, modals (available for expansion) | | {rounded.xl} | 16px | Large panels, image containers | | {rounded.pill} / {rounded.full} | 9999px | Primary CTA button, Google sign-in button, all action buttons |

The dual-radius system is immediately legible: pill geometry = clickable action, modest round = data entry container. This distinction helps users develop muscle memory for interaction patterns before they even read labels.

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

Buttons

{component.button-primary} — The principal call-to-action: "Sign in". Full-width within the form container (via w-full class), 40px tall, filled with absolute {colors.primary} black, carrying {colors.on-primary} white text in {typography.button} (16px/500 weight). Rounded to {rounded.pill} for infinite corner softness. No border, no shadow—pure color block. Transitions background color at {extensions.motion.duration} (150ms) with standard ease. State variants: {component.button-primary-hover} (darkens to {colors.primary-hover}), {component.button-primary-active} (deepens to {colors.primary-active} for pressed feel), {component.button-primary-disabled} (shifts to {colors.muted} gray background).

{component.button-secondary} — A ghost/outline button style with {colors.canvas} background, {colors.body} text, and a 1px {colors.hairline} border. Shares the pill radius and 40px height dimensions of primary. Used for auxiliary actions outside the main conversion path. Hover variant ({component.button-secondary-hover}) shifts background to {colors.surface-soft} and text toward {colors.ink} for tactile feedback.

{component.button-google} — Specialized social-auth variant: white background ({colors.canvas}), {colors.body} text, 1px {colors.hairline} border, pill-rounded, containing the Google "G" mark (external SVG/icon) followed by "Sign in with Google" in {typography.button}. The Google icon introduces the only multicolor element on the page. Hover state ({component.button-google-hover}) mirrors secondary button behavior with {colors.surface-soft} background lift.

{component.icon-button} — Minimalist square/circular hit target for icon-only actions (observed as the password visibility toggle trigger). Transparent background, {colors.muted} colored icon, 24px × 24px target area with 4px internal padding. Hover variant ({component.icon-button-hover}) darkens to {colors.ink} for discoverability.

Cards & Containers

{component.auth-page-background} — The full-viewport container rendering the {colors.surface} (#f7f6f3) warm off-white background with geometric pattern overlay. Sets the stage for all child elements; no intrinsic padding (children handle their own spacing).

{component.auth-container} — Centers the form content horizontally and vertically using flexbox. Applies {spacing.section} (40px) vertical padding and {spacing.xl} (20px) horizontal padding to create breathing room around the form cluster. Max-width constrains to ~420px for optimal reading/input length.

{component.top-banner} — Full-width utility strip at viewport top, {colors.canvas} background, containing the "Switch back to Maket 1.0 →" navigation link. Approximately 36–40px tall, minimal padding, {typography.body-sm} text.

Inputs & Forms

{component.text-input} — Standard single-line text entry field (email input). White ({colors.canvas}) background, 1px {colors.border-input} border, {rounded.md} (8px) corners, 52px height with 15px 18px internal padding. Placeholder text renders in {colors.body-secondary} (#424242) at 15px size. Focus variant ({component.text-input-focus}) maintains structure while shifting text color to {colors.ink} for active-state clarity; implementers should add the focus ring from {extensions.shadows.focus}.

{component.label-text} — Form field labels ("Email address", "Password"). Renders in {colors.ink} at {typography.label} (13px/500 weight), positioned 8px ({spacing.sm}) above the associated input. Medium weight (500) provides subtle emphasis distinguishing labels from body text without resorting to size changes.

{component.password-input-wrapper} — Compound container wrapping the password input field and the visibility toggle icon-button. Transparent background, positions the input (which has transparent background and no border in the extracted DOM—likely the border lives on a parent or the extraction captured a styled-down state) alongside the eye toggle. The password field's actual styling should mirror {component.text-input} for consistency.

{component.password-toggle-button} — Icon-only button (eye-open/eye-closed) positioned inside/adjacent to the password field. Uses {component.icon-button} styling: transparent background, {colors.muted} icon color, 20px sizing.

Navigation & Links

{component.link} — Inline navigation link ("Sign up", "Forgot your password?" underline portion). Transparent background, {colors.link} color (dark charcoal), {typography.caption} sizing. Underline appears via text-decoration on the specific "Forgot your password?" instance; hover variant ({component.link-hover}) darkens to {colors.link-active} (black).

{component.link-underline} — Link variant explicitly showing underline decoration. Same token foundation as {component.link} with added text-decoration: underline in {colors.muted} tone for reduced prominence. Used for "Forgot your password?" on this surface.

{component.footer-text} — Tertiary information line: "Don't have an account? Sign up". Combines static text in {colors.muted-dark} or {colors.muted} with an embedded {component.link} for the actionable "Sign up" portion. {typography.body-sm} sizing.

Signature Components

{component.auth-logo} — The Maket brand mark (isometric cube icon in blues/grays). 48px × 48px display size, positioned above the page heading with ~40px spacing. This is the sole brand identifier on the authentication surface—no wordmark accompanies it, relying on the heading below to name the product.

Do's and Don'ts

Do

• Use {colors.primary} (#000000) exclusively for the primary CTA background—never for body text or borders.
• Apply {rounded.pill} to all actionable buttons (primary, secondary, Google auth) to maintain the soft-touch interaction language.
• Reserve {typography.display-lg} (24px/600) for the page-level heading only; don't promote sub-headings to this weight/size combination.
• Set input fields to 52px height with 15px 18px internal padding following {component.text-input} specifications for comfortable touch targets.
• Use {colors.surface} (#f7f6f3) as the page background on authentication and onboarding flows to maintain the warm, architectural atmosphere.
• Keep transitions at {extensions.motion.duration} (150ms) with cubic-bezier(0.4, 0, 0.2, 1) easing for consistent, snappy feel across all interactive elements.
• Render form labels in {typography.label} (13px/500) directly above inputs with {spacing.sm} (8px) gap—never placeholder-only labeling.
• Apply {colors.hairline} (#e0e0e0) as the 1px border color on inputs and outlined buttons; avoid darker borders that add unwanted visual weight.
• Use {typography.button} (16px/500) for all button labels regardless of variant—don't shrink text on secondary actions.
• Maintain the 1440px max-width container constraint even on wider viewports; center content rather than stretching edge-to-edge.

Don't

• Don't introduce drop shadows or elevation to cards, buttons, or modals—the system is intentionally flat, relying on color and borders for depth.
• Don't substitute {colors.link} (#212121) for {colors.primary} (#000000)—links are dark charcoal, the brand color is absolute black.
• Don't use weights heavier than 600 (semibold) on authentication surfaces—heavier weights (700+) exist in the PP Telegraf family but are reserved for marketing headlines.
• Don't apply {rounded.md} (8px) to action buttons—this radius is exclusive to input fields and content containers.
• Don't add gradient backgrounds, glassmorphism, or backdrop-blur effects to any surface; the aesthetic is opaque and clean.
• Don't remove the geometric pattern from {colors.surface} backgrounds on auth pages—it's a core part of the brand's architectural identity.
• Don't uppercase button labels or labels—"Sign in" stays title case, "Email address" stays sentence case.
• Don't reduce input padding below 15px vertical; the generous internal space is intentional for usability.
• Don't introduce new colors outside the defined palette—if you need emphasis, use weight/size before reaching for a new hue.
• Don't place multiple primary buttons in view simultaneously—the black CTA should be the unambiguous next action.

Motion & Animation

Transition Tokens

--transition-base: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                   background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                   border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                   text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                   fill 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                   stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1);

This comprehensive transition declaration (extracted verbatim from the site's CSS) covers all paint-property mutations in a single 150ms duration with Material Design-standard easing. Applied globally via Tailwind's transition-colors utility class.

Keyframe Animations

The following keyframes are declared in the global stylesheet (likely inherited from a component library or animation utilities):

• bannerSlideDown — Top-utility-bar entrance animation (slides down from negative Y offset).
• modalSlideUp — Modal/dialog entrance (slides upward from below viewport).
• ping — Radial ripple/ping effect (notification indicators).
• pulse — Opacity/breathe animation (loading states).
• spin — Continuous rotation (loading spinners).
• slideUpAndFade / slideRightAndFade / slideLeftAndFade / slideDownAndFade — Directional reveal animations for dropdowns/tooltips.
• fadeIn — Simple opacity fade-in.
• react-spinners-ScaleLoader-scale / react-spinners-MoonLoader-moon — Third-party loading indicator animations (React Spinners library).

None of these animations appear actively invoked on the static authentication screenshot—they represent the available motion vocabulary for dynamic states (modals, loaders, notifications).

Interaction Patterns

• Button hover: Background color shifts 150ms to lighter/darker variant (black → dark charcoal for primary; white → off-white for secondary).
• Input focus: Border may intensify or show focus ring; text color shifts from {colors.body-secondary} to {colors.ink}.
• Link hover: Color darkens 150ms from {colors.link} to {colors.link-active}; underline may appear or darken.
• Password toggle: Icon swaps between eye-open/eye-closed SVGs; likely instant (JS-driven) or cross-fade.
• Top banner link: Standard hover color transition matching the global timing curve.

No parallax, scroll-triggered animations, or complex choreography are present on this authentication surface. Motion is strictly functional—state feedback only.

Imagery Style

• The auth logo (isometric cube) is the sole imagery element on this surface: a small 3D-rendered or vector-built icon showing stacked geometric forms in muted blues, grays, and a coral/salmon accent face.
• Style is minimal technical illustration—clean edges, soft shading suggesting dimensionality, no texture or photorealism.
• The background pattern qualifies as abstract imagery: repeating thin-line geometric shapes (hexagons/isometric grids) in near-white on the warm {colors.surface} base, creating a blueprint/wireframe aesthetic.
• No photography, no gradients, no 3D scenes, no illustrations beyond the brand mark.
• Image-to-space ratio is extremely low (~2% of viewport occupied by the logo); this is a text-and-form-dominant surface.
• If expanded to marketing surfaces, expect architectural visualization (renderings, floor plans, 3D models) given the product domain—but none appears here.

Icon System

• Library: Lucide React (detected from framework analysis and icon naming conventions).
• Specific icons observed: Eye/Eye-off (password toggle), Arrow-right (top banner link "→"), and the Google "G" brand mark (external, not Lucide).
• Treatment: Stroke-based icons (Lucide default), currentColor inheritance for color, 20px × 20px for the eye toggle, aligned inline with text baseline or vertically centered within the 40px input height.
• Stroke width: Appears to be default 2px or 1.5px for the delicate, lightweight feel matching the overall aesthetic.
• Color: Icons inherit {colors.muted} by default, shifting toward {colors.ink} on hover/active states.

Recommended Frontend Stack

- Framework:      Next.js (App Router) or Remix — matches SPA-pattern auth flow
- Styling:        Tailwind CSS v3+ (utility classes confirmed: h-10, px-5, py-2,
                 rounded-full, font-telegraf, transition-colors, bg-monochrome-black)
- Fonts:          PP Telegraf self-hosted (/assets/*.woff2) with fallback to
                 system sans-serif; variable for --font-family override
- Animation:      CSS transitions (Tailwind transition-colors) + Framer Motion
                 for any complex entrance animations (modalSlideUp etc.)
- Icons:          Lucide React (npm: lucide-react) for stroke icons; custom SVG
                 for brand marks and social provider logos
- Component lib:  Likely custom components + headless UI primitives (Radix patterns
                 detected in keyframe names like slideUpAndFade)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Form container expands to full width minus 20px gutters; logo may shrink to 40px; button height maintained at 40px | | Tablet | 640–1024px | Container constrains to ~420px centered; pattern background fills viewport | | Desktop | 1024–1440px | Identical to tablet; max-width container active | | Wide | > 1440px | Main container stops expanding at 1440px; pattern background continues edge-to-edge |

Touch Targets

• {component.button-primary}: 40px height × full-width (within ~400px form) — exceeds 44px AAA minimum comfortably.
• {component.button-google}: 40px height × full-width — meets WCAG AAA.
• {component.text-input}: 52px height × full-width — generously exceeds minimums.
• {component.password-toggle-button}: 20px × 20px icon with 4px padding = ~28px effective — below 44px recommendation; consider enlarging to 44px for mobile touch reliability.
• {component.icon-button}: 24px × 24px — also below 44px; acceptable for mouse but marginal for thumb reach.

Collapsing Strategy

• Top banner: Remains full-width at all breakpoints; text truncates if viewport narrows below ~320px.
• Auth form: Maintains single-column centered layout; horizontal padding reduces from 20px to 16px on mobile.
• Button stacking: Primary and Google buttons remain full-width and stacked (not side-by-side) at all sizes.
• Logo: May reduce from 48px to 40px on narrow mobile viewports to preserve vertical space.
• Background pattern: Scales continuously; tile size remains constant regardless of viewport (CSS background-repeat handles coverage).

Image Behavior

• Auth logo: Fixed 48px (or responsive 40px–48px) using width/height attributes or aspect-ratio; never stretches beyond native resolution.
• No hero images, illustrations, or photographs on this surface to address responsively.
• Pattern background: CSS background-size likely set to auto or fixed tile dimension; repeats infinitely to cover any viewport width.

Iteration Guide

1. Build the authentication page as a single-column centered layout on {colors.surface} (#f7f6f3) with the geometric pattern background. Use Next.js or Remix with Tailwind CSS for utility-first styling that matches the extracted class patterns.

2. Pull every color value from the YAML frontmatter via {colors.token-name} references—never hard-code a hex. The palette is intentionally limited (monochromatic with warm undertone); respect that constraint.

3. Install PP Telegraf from Maket's asset pipeline (the @font-face declarations list exact file paths under /assets/). Define fontFamily: "'PP Telegraf', sans-serif" as a CSS variable and apply it to all typography tokens.

4. Implement state variants (-hover, -focus, -active, -disabled) as separate component entries in your component library, mirroring the frontmatter structure. Use Tailwind's hover: and focus: variants for production classes.

5. When adding components beyond this auth surface (dashboards, marketing pages, settings panels), decide whether they belong to the auth dialect (warm surface, centered, minimal) or a product dialect (likely cooler, denser, more navigational). Don't export auth-specific choices (like pill-only buttons) as universal rules.

6. Run npx @google/design.md lint DESIGN.md after any edits to catch broken {token.path} references, orphaned components missing prose entries, or contrast-ratio violations between {colors.primary} and {colors.on-primary}.

7. When in doubt about visual emphasis: increase font size or weight before introducing new colors. If the primary action doesn't read as "primary," check that it's using {colors.primary} (#000000) on a pill-shaped button—not gray, not outlined, not rounded-square.

8. Maintain the flat-elevation philosophy: no box-shadow on cards or modals unless specifically documenting a new elevation level in the Extensions > Shadows section. Use 1px borders and background color shifts instead.

Font Setup: For development without access to PP Telegraf licensed files, substitute Inter from Google Fonts:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
  :root {
    --font-family: 'Inter', 'PP Telegraf', -apple-system, BlinkMacSystemFont, sans-serif;
  }
</style>

Known Gaps

• Hover state specifics: While {component.*-hover} entries document expected color shifts, exact opacity values, transform translations (if any), and border-color changes on hover are inferred from the transition declaration, not visually verified.
• Loading/authentication states: No spinner, skeleton, or pending-indicator styling was extractable from the static screenshot, despite pulse, spin, and react-spinners keyframes being declared globally.
• Form validation states: Error messaging styling (red text, error-icon placement, input border shift to {colors.error}) is assumed but not visually confirmed.
• Password input discrepancy: Extracted CSS shows the password input with transparent background and no border, which contradicts the visible bordered field in the screenshot—likely the border/background lives on a wrapper element not fully captured by the DOM extractor.
• Dashboard/product surfaces: The complete Maket application (post-authentication) is not represented here; pricing tables, project dashboards, AI generation interfaces, and documentation pages likely introduce new components, denser layouts, and potentially additional brand colors not present in this auth-focused sample.
• Dark mode: Despite extensions.mode: "dark" appearing in pre-assigned values, the visual evidence strongly indicates a light-theme surface. A true dark mode (inverted canvas, adjusted text colors) either doesn't exist or wasn't captured—implement dark tokens cautiously.
• Geometric pattern specification: The background pattern's exact SVG/CSS construction (tile size, line weight, opacity percentage, color value relative to {colors.surface}) was not extractable; recreate as a subtle 60px–80px repeat unit in rgba(255,255,255,0.4) or similar.
• Focus-visible ring implementation: The focus ring described in {extensions.shadows.focus} is recommended based on accessibility best practices, as the extracted CSS showed no explicit :focus-visible or :focus-ring class output for the inputs shown.