Arcway Design System

Overview

Arcway presents itself as a luminous, forward-thinking platform at the intersection of luxury real estate and digital innovation. The design language balances warmth and precision: a near-white canvas ({colors.canvas}) serves as the foundation for expansive gradient washes that shift between electric lime ({colors.accent}) and periwinkle blue ({colors.surface-periwinkle}), creating an atmospheric depth that feels simultaneously natural and technological. This is not a stark SaaS aesthetic—it's something closer to high-end architectural visualization meets lifestyle editorial.

The brand's voltage concentrates in two distinct locations: the {button-accent} component, which renders CTAs like "BOOK DEMO" in that signature lime-green ({colors.accent}), and the gradient hero band that dominates the above-fold experience. Everywhere else, restraint governs. The primary ink color {colors.primary}—a deep forest green rather than pure black—carries headlines and body text with quiet authority, suggesting organic growth and permanence without heaviness.

The single typographic move defining this system is its dual-family architecture. JAF Lapture Display, an elegant transitional serif, commands all display roles from {typography.display-xl} down through {typography.title-lg}, rendered at generous sizes (76px–32px) with tight negative letter-spacing that gives each headline a bespoke, almost letterpress quality. Below that threshold, PP Frama—a geometric sans-serif available in Light, Medium, and Semibold weights—handles everything else: navigation labels set at just 12px with an unusually wide 0.96em letter-spacing that reads as refined tracking, body copy, buttons, and captions. The contrast between the warm, humanist serifs of Lapture and the crisp, engineered geometry of Frama creates a sophisticated tension: heritage meets innovation.

Shape language leans consistently toward the generous. The default corner radius sits at {rounded.DEFAULT} (10px), but cards favor {rounded.lg} (16px) or even {rounded.lg} (24px), while pill-shaped badges stretch to {rounded.pill} (160px)—an extreme value that produces genuinely capsule-like containers. Buttons occupy the middle ground at {rounded.md} (16px). Nothing here is sharp-edged; the entire vocabulary speaks to approachability and tactile comfort.

Sub-systems visible in this design include a pricing dialect (suggested by the presence of tier cards and featured-state variants) and a testimonial/content card dialect that uses warmer off-white backgrounds ({colors.surface-warm}) to create visual separation from the main canvas. The navigation system operates as a transparent overlay on gradient surfaces, requiring careful treatment of text contrast against shifting backgrounds.

Key Characteristics

• Gradient-first hero: The dominant visual signature is a multi-stop linear gradient transitioning from {colors.canvas} → {colors.accent} → {colors.surface-purple-light} → {colors.surface-periwinkle}, applied as a full-viewport background layer beneath the {component.hero-band}.
• Forest-green ink hierarchy: All readable text uses {colors.body} (#1b3025) or {colors.ink} (#000000), never pure grays—the palette is chromatic at every level.
• Lime accent voltage: The sole call-to-action color {colors.accent} (#e9fe89) appears only on {component.button-accent} and selected highlight surfaces; it is never used for text or borders.
• Serif display, geometric UI: {typography.display-xl} through {typography.title-lg} use JAF Lapture Display; everything from {typography.heading-sm} downward uses PP Frama.
• Extreme rounding on micro-elements: Badges and tags use {rounded.pill} (160px), producing true capsule shapes that feel distinctly modern.
• Wide-tracked navigation: Nav links employ letter-spacing: 0.96em at font-size: 12px, creating a spaced-out, luxurious label aesthetic.
• Soft elevation via layered box-shadows: Cards use a three-layer {extensions.shadows.card} definition with progressive blur and spread offsets, avoiding hard edges.
• Warm neutral surfaces: Secondary content areas use {colors.surface-warm} (#fffdf9) and {colors.surface-neutral} (#f6f3f0) rather than cool grays, maintaining the organic, architectural mood.

Colors

Brand & Accent

• Primary ({colors.primary} — #1b3025): Deep forest green used for all headlines, body copy, primary button backgrounds, and the main brand identity. This is darker than typical "green" brands—it reads nearly black but carries a subtle chromatic warmth that distinguishes it from neutral ink.
• Primary Active ({colors.primary-active} — #152119): Darkened forest green for pressed/active states on {component.button-primary} components.
• Primary Hover ({colors.primary-hover} — #243f31): Lightened forest green for hover interactions where implemented.
• Accent ({colors.accent} — #e9fe89): Electric lime-yellow, the signature CTA color used exclusively on {component.button-accent} surfaces and as a gradient stop in the hero background. High-voltage, attention-grabbing, deliberately limited in scope.
• Accent Active ({colors.accent-active} — #d4eb6a): Slightly desaturated lime for pressed states on accent buttons.
• Accent Hover ({colors.accent-hover} — #edff9f): Brightened lime for hover states on accent surfaces.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white baseline surface. The default background for the page body, cards, and most container elements.
• Surface Soft ({colors.surface-soft} — #e9fe89): Lime-tinted pale surface used for highlighted cards, CTA band backgrounds, and featured/pricing tier differentiation. Functions as a subtle brand-color wash.
• Surface Warm ({colors.surface-warm} — #fffdf9): Extremely faint cream-white used for testimonial cards and content blocks needing subtle separation from the main canvas without introducing new hue families.
• Surface Neutral ({colors.surface-neutral} — #f6f3f0): Warm gray-beige used for footers, secondary content bands, and areas requiring clear visual grounding.
• Surface Purple Light ({colors.surface-purple-light} — #d5d6fe): Pale lavender-periwinkle serving as a mid-tone gradient stop in the hero background; may also appear as a decorative surface tint in feature illustrations.
• Surface Periwinkle ({colors.surface-periwinkle} — #8181ff): Medium-brightness blue-violet forming the terminal gradient stop; used sparingly as an atmospheric depth element.

Text & Ink

• Ink ({colors.ink} — #000000): Pure black reserved for maximum-contrast elements: the {component.logo-text}, certain icon treatments, and absolute-top-of-hierarchy text where no chromatic nuance is desired.
• Body ({colors.body} — #1b3025): The workhorse text color—identical to {colors.primary}—used for all paragraph text, headings, and standard UI copy. Carries the forest-green cast throughout the reading experience.
• Body Dark ({colors.body-dark} — #0e1717): Near-black with cool undertone, used for text sitting on warm surfaces ({colors.surface-warm}) where the standard {colors.body} might lack sufficient perceived contrast.
• Muted ({colors.muted} — #5a6b62): Desaturated medium green-gray for secondary information: captions, metadata, helper text, footer links, and de-emphasized UI labels.
• Muted Soft ({colors.muted-soft} — #8a9b92): Lighter muted tone for tertiary/disabled-feeling text, placeholder content, and decorative elements.
• On Primary ({colors.on-primary} — #ffffff): White text for rendering on {colors.primary} backgrounds (buttons, dark badges).
• On Accent ({colors.on-accent} — #1b3025): Forest-green text for rendering on {colors.accent} backgrounds (the lime CTA button).
• On Dark ({colors.on-dark} — #ffffff): White text reserved for any future dark-mode surfaces or overlay contexts.
• On Surface ({colors.on-surface} — #1b3025): Standard text-on-surface alias pointing to {colors.body}.

Hairlines & Borders

• Hairline ({colors.hairline} — #e8e4e1): Very light warm gray for subtle dividers, input borders in resting state, and card edge definition where shadow alone is insufficient.
• Hairline Soft ({colors.hairline-soft} — #f0ede9): Near-invisible divider for minimal-separation contexts: table row boundaries, subtle field separators.
• Border Strong ({colors.border-strong} — #c9c4be): Visible warm gray for focused input borders, active tab indicators, and emphasized container outlines.

Semantic

• Error ({colors.error} — #c13515): Warm red for form validation errors, system alerts, and destructive action feedback.
• Success ({colors.success} — #1b7a3a): Green for confirmation states, success messages, and positive status indicators.
• Warning ({colors.warning} — #b8860b): Amber/gold for cautionary notices and attention-requiring states.
• Info ({colors.info} — #2563eb): Blue for informational tooltips, help text, and external link indicators.
• Link ({colors.link} — #0000ee): Standard web blue for inline hyperlinks within body copy.
• Link Active ({colors.link-active} — #00008b): Darker navy for visited or active link states.

Gradient Tokens

The hero and key decorative surfaces use a five-stop linear gradient (approximately 135° angle):

• Gradient Start ({colors.gradient-start} — #ffffff): White origin point (typically upper-left).
• Gradient Mid Accent ({colors.gradient-mid-accent} — #e9fe89): Lime quadrant.
• Gradient Canvas (via {colors.canvas} — #ffffff): White center transition.
• Gradient Mid Periwinkle ({colors.gradient-mid-periwinkle} — #d5d6fe): Lavender quadrant.
• Gradient End ({colors.gradient-end} — #8181ff): Periwiolet terminus.

Typography

Font Family

Arcway's typographic system rests on a deliberate two-face pairing that creates immediate hierarchical distinction:

JAF Lapture Display Regular ("DEMO JAF Lapture Display Regular") serves as the display face—a transitional serif with pronounced thick-thin stroke variation, bracketed serifs, and a slightly condensed proportion that lends elegance at large sizes. This font carries all headline and title roles from {typography.display-xl} (76px) down to {typography.title-lg} (32px). It is loaded from a custom Framer-hosted WOFF2 source with a font-display: swap strategy. Fallback is to generic Georgia, serif. Note: "DEMO" prefix indicates this is a trial/version-limited license of the commercial JAF Lapture family.

PP Frama (available in Light, Medium, and Semibold weights) handles all interface text. This is a clean geometric sans-serif with rationalized proportions, circular bowls, and uniform stroke width within each weight. It appears in:

• Light (300): Body-small, captions, fine print
• Medium (500): Body text, navigation, buttons, labels
• Semibold (600): Sub-headings, emphasized UI elements

Both faces are loaded from Framer CDN assets with placeholder fallback declarations. A generic sans-serif fallback chain exists behind both families.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 76px | 400 | 1.1 (83.6px) | -1.52px | Hero H1, major section headlines | | {typography.display-lg} | 72px | 400 | 1.1 (79.2px) | -1.44px | Logo lockup, feature headlines | | {typography.display-md} | 38px | 400 | 1.1 (41.8px) | -0.76px | Section titles, sub-hero heads | | {typography.title-lg} | 32px | 400 | 1.1 (35.2px) | -0.64px | Card titles, block quotes | | {typography.title-md} | 72px | 400 | 1.1 (79.2px) | -1.44px | Alternate display context (same spec as display-lg) | | {typography.heading-sm} | 14px | 600 | 1.3 | 0.05em | Card category labels, small section headers | | {typography.body-md} | 12px | 500 | 1.3 (15.6px) | 0.96px | Paragraph text, descriptions, standard body | | {typography.body-sm} | 11px | 300 | 1.4 | 0.04em | Secondary body, supporting copy | | {typography.caption} | 10px | 300 | 1.35 | 0.06em | Metadata, timestamps, legal | | {typography.label} | 12px | 500 | 1.25 | 0.96px | Form labels, button text, nav links | | {typography.button} | 12px | 500 | 1.25 | 0.96px | Button interiors, CTA labels | | {typography.nav-link} | 12px | 500 | 1.25 | 0.96px | Top-navigation menu items |

Principles

The most striking principle of this type system is size-as-hierarchy over weight-as-hierarchy. Despite having access to weights from 300 to 600 across the combined font families, the system relies primarily on dramatic size differentials (76px display vs. 12px body—a 6.3× ratio) to establish reading order. Headlines remain at fontWeight: 400 (normal) even at their largest sizes, allowing the intrinsic character of JAF Lapture Display to carry emphasis through scale and negative letter-spacing alone. This creates a refined, editorial voice that avoids the aggressive boldness common in tech marketing.

The second governing principle is extreme letter-spacing on UI text. At 0.96em, the body/nav/button text is tracked so wide it approaches a label aesthetic—each character breathes independently, suggesting luxury branding and careful craftsmanship. This is not a subtle refinement; it is a dominant characteristic of how Arcway's interface text reads visually. Combined with the small base size (12px for most UI text), the effect is reminiscent of fashion-house labeling or architectural blueprint annotations.

Third, color consistency reinforces hierarchy. Nearly all body and headline text shares the same {colors.body} (#1b3025) forest green, meaning hierarchy comes purely from size, weight, and position—not from lighter/darker text tones. Muted variants exist ({colors.muted}, {colors.muted-soft}) but are reserved strictly for truly secondary information (timestamps, footer copy).

Fourth, the negative letter-spacing on display text (-1.52px at 76px, proportional at smaller sizes) tightens the serif face into a cohesive visual block, counteracting the natural looseness of JAF Lapture at display sizes. This treatment makes headlines feel intentionally set rather than default-rendered.

Note on Font Substitutes

For implementations without access to the licensed JAF Lapture Display font, substitute Playfair Display (Google Fonts) for display roles—it shares the transitional serif DNA, bracketed serifs, and elegant proportions, though it is slightly more contrasty. Set font-display: swap and adjust letter-spacing values marginally (Playfair Display benefits from slightly less aggressive negative tracking at equivalent sizes).

For PP Frama, the closest Google Fonts equivalent is DM Sans—it shares the geometric construction, similar weight range (400/500/700 mapping to Light/Medium/Semibold), and rationalized proportions. Manrope is a viable alternative if a slightly more humanist geometric is preferred. Define CSS variables:

:root {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', 'PP Frama', sans-serif;
}

Layout

Spacing System

• Base unit: 2px (derived from {spacing.xxs}). Most functional increments are multiples: 4, 6, 8, 10, 16, 20, 24, 30, 32, 40, 48, 64.

• Tokens:

  • {spacing.xxs} (2px): Micro-adjustments, inner icon offsets
  • {spacing.xs} (4px): Tight gaps between inline elements
  • {spacing.sm} (6px): Small internal padding
  • {spacing.md} (8px): Standard compact gap
  • {spacing.base} (10px): The dominant atomic spacing—used pervasively for button padding, nav item spacing, input padding
  • {spacing.lg} (16px): Container gutters, card padding basis, nav vertical padding
  • {spacing.xl} (20px): Medium internal spacing
  • {spacing.xxl} (24px): Generous internal card padding
  • {spacing.section-sm} (30px): Minor section vertical rhythm
  • {spacing.section-md} (32px): Section internal padding
  • {spacing.section-lg} (40px): Major section breaks
  • {spacing.section-xl} (48px): Large band padding
  • {spacing.section-xxl} (64px): Hero-scale vertical padding

• Section padding (vertical): {spacing.section-xxl} (64px) for hero bands; {spacing.section-xl} (48px) for major content sections; {spacing.section-lg} (40px) for feature grids.

• Card internal padding: {component.card} uses {spacing.xxl} (24px) horizontal × {spacing.xxl} (24px) vertical; elevated cards add shadow depth.

• Gutters: Desktop container uses ~30px horizontal gutter (matching {component.top-nav} padding); grid column gaps typically 16–24px.

Grid & Container

• Max content width: 1440px (explicitly set on the navigation container, likely consistent across major sections).
• Density choice: Editorial/luxury sparse—large display type, generous whitespace, few elements competing for attention. This is not a marketplace-dense layout; each section has room to breathe.
• Grid behavior at desktop: Likely a flexible 12-column grid with asymmetric splits (hero appears to use ~50/50 or 60/40 text-to-visual columns). Feature sections may use 3-column or 4-column card grids with 24–32px gaps.
• Hero column split: Text column (left-aligned, ~50% width) carrying {typography.display-xl} headline + optional subhead + CTA pair; visual column (right) carrying gradient wash, illustration, or 3D preview.

Whitespace Philosophy

Arcway practices aggressive generosity with whitespace. The hero section is essentially empty space with a gradient atmosphere—text occupies perhaps 30% of the viewport height. Card interiors breathe with 24px+ padding on all sides. Navigation items sit 8–12px apart. This is an airy, confident layout language that signals premium positioning: the absence of density implies the product is self-evident and needs no shouting.

Header Architecture

┌─────────────────────────────────────────────────────────────────────┐
│ [Arcway]          PRODUCT   USE CASES   ABOUT   NEWS   [BOOK DEMO] │
│ (logo)            (nav-links)                           (cta-btn)   │
│                                                                     │
├─────────────────────────────────────────────────────────────────────→ 1440px max-width
│  padding: 16px 30px                                                  │
│  background: transparent                                             │
└─────────────────────────────────────────────────────────────────────┘

The top navigation is a transparent bar floating over the gradient hero. Logo left-flush, navigation items center-right distributed, CTA button right-flush. Height is auto-determined by content (~48px with padding).

Hero Section

┌─────────────────────────────────────────────────────────────────────┐
│ ███████████████████████████████ GRADIENT OVERLAY ██████████████████ │
│ █                                                                    │
│ █   ┌──────────────────────────┐     ┌─────────────────────────┐   │
│ █   │  Sell more homes,        │     │                         │   │
│ █   │  before they're built    │     │   [3D Preview /         │   │
│ █   │                          │     │    Illustration /       │   │
│ █   │  [CTA Primary] [Ghost]   │     │    Atmospheric Space]   │   │
│ █   └──────────────────────────┘     └─────────────────────────┘   │
│ █                                                                    │
│ ████████████████████████████████████████████████████████████████████ │
│  padding: 64px vertical                                               │
└─────────────────────────────────────────────────────────────────────┘

The hero uses a full-viewport gradient background ({component.gradient-overlay}) with content overlaid. The headline uses {typography.display-xl} (76px, JAF Lapture, {colors.body}). CTAs include one prominent {component.button-accent} (lime) and potentially a ghost/outline variant.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 – Flat | No shadow, solid {colors.canvas} background | Base surfaces, body background, flat cards | | 1 – Hairline outline | {colors.hairline} border, no shadow | Input fields resting state, subtle card borders | | 2 – Soft lift | {extensions.shadows.sm} (triple-layer, 13% opacity) | Hoverable cards, dropdown menus | | 3 – Elevated card | {extensions.shadows.md} (15% opacity base) | Featured cards, modals, persistent panels | | 4 – Modal/Dropdown | {extensions.shadows.lg} (18% opacity) | Dialogs, mega-nav, tooltip popovers | | 5 – Prominent card | {extensions.shadows.card} (20% opacity, 10px/30px) | Hero cards, pricing featured tiers, testimonials |

Philosophy: Arcway favors layered, warm-toned shadows over flat color blocking for elevation. Every shadow definition uses rgba(0,0,0,[0.13–0.20]) with no cool tint—this keeps depth feeling organic and physically grounded (like paper casting shadows under warm lighting) rather than digital/cold. The triple-layer shadow technique (tiny tight shadow + medium spread + large diffuse halo) mimics real-world material depth more convincingly than single-value box-shadows. Elevation increases incrementally; there are no dramatic jumps.

Decorative Depth

The gradient overlay ({component.gradient-overlay}) is the primary decorative depth mechanism. It is not a simple linear fade—it is a multi-stop composition spanning white → lime → white → lavender → periwiolet, likely at approximately 130–135° angle. This gradient lives behind hero content, possibly bleeding into subsequent sections or appearing as a recurring motif in feature-band alternating treatments. It functions as atmospheric perspective, giving the flat DOM a sense of luminous volume.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.xs} | 2px | Minimal rounding—subtle input corners, tiny tags | | {rounded.sm} | 8px | Input fields, small buttons, compact containers | | {rounded.DEFAULT} | 10px | Default system radius—standard buttons, small cards | | {rounded.md} | 16px | Primary button radius, medium cards, panel corners | | {rounded.lg} | 24px | Large cards, testimonial containers, image frames | | {rounded.xl} | 32px | CTA bands, hero containers, feature callout boxes | | {rounded.pill} | 160px | Capsule badges, pill-shaped tags, extreme roundness | | {rounded.full} | 9999px | Avatar circles, fully round icon buttons |

Shape philosophy: Consistent generosity. Even the smallest radius ({rounded.xs} at 2px) takes the edge off; nothing remains truly sharp-cornered. The {rounded.pill} value (160px) is notably extreme—it exceeds the height of many UI elements, guaranteeing perfect capsule shapes for any reasonably-sized badge or tag. This vocabulary supports the approachable, friendly, premium mood established elsewhere in the system.

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

Buttons

{component.button-accent} — The primary call-to-action button used for "BOOK DEMO" and conversion-focused actions. Background {colors.accent} (electric lime), text {colors.on-accent} (forest green), type {typography.button} (PP Frama Medium 12px with 0.96em tracking), rounded {rounded.md} (16px), padding 14px 28px. This button demands attention through its singular bright background while remaining legible via the high-contrast dark text. Its active state is {component.button-accent-active} which shifts to {colors.accent-active}; disabled state is {component.button-accent-disabled} using {colors.surface-soft} background with {colors.muted} text. No visible border or shadow in default state—relies on color alone for prominence.

{component.button-primary} — Secondary CTA using the forest-green brand color. Background {colors.primary}, text {colors.on-primary} (white), same type and dimensions as accent button but with {rounded.DEFAULT} (10px) radius. Active variant {component.button-primary-active} darkens to {colors.primary-active}. Used for less-prominent actions or when the accent color would compete with nearby lime elements.

{component.button-outline} — Tertiary button with transparent background, {colors.primary} text/border, {rounded.DEFAULT} (10px), padding 13px 27px (1px smaller than filled buttons to account for border inclusion). Used for "Learn More" or secondary paths.

{component.button-ghost} — Minimal interaction style: transparent background, {colors.ink} text, {rounded.full} (9999px/pill shape), padding 10px 20px. Used for subtle navigation actions, filter chips, or dismissible tags.

Cards & Containers

{component.card} — Standard content card. Background {colors.canvas}, text {colors.body}, type {typography.body-md}, rounded {rounded.lg} (24px), padding {spacing.xxl} (24px). In production, this would carry {extensions.shadows.sm} elevation for lift from the canvas. Houses feature descriptions, stat blocks, or text-heavy content modules.

{component.card-elevated} — Elevated variant with {rounded.md} (16px) and stronger shadow ({extensions.shadows.md}). Used for interactive cards, hover targets, or content needing visual prominence above standard cards.

{component.card-warm} — Testimonial or quote card using {colors.surface-warm} (cream-white) background with {colors.body-dark} text for subtle warmth and separation. Same padding and radius as standard card. Creates a "paper on desk" feeling.

{component.card-neutral} — Grounded card on {colors.surface-neutral} (warm beige) background. Used for footer-adjacent content, pricing details, or areas needing clear containment without drawing focus.

{component.cta-band} — Full-width conversion band. Background {colors.surface-soft} (lime tint), text {colors.primary}, type {typography.display-md} (38px serif), rounded {rounded.xl} (32px), padding {spacing.section-xl} × {spacing.xxl}. Acts as a visual exclamation point before footer or after feature scrolls.

{component.hero-band} — Transparent container for hero content, sitting atop the gradient overlay. Padding {spacing.section-xxl} (64px) vertical. Contains {component.hero-headline} and optionally {component.hero-subhead} plus CTA pair.

{component.testimonial-card} — Inherits {component.card-warm} specifications; specifically designated for user quotes, reviews, or social proof content.

Inputs & Forms

{component.text-input} — Standard form input. Background {colors.canvas}, text {colors.ink}, type {typography.label} (PP Frama Medium 12px, 0.96em tracking), rounded {rounded.sm} (8px), padding 12px 16px, fixed height 44px (meeting WCAG AAA touch target). Border would be {colors.hairline} (1px) in practice. Focus state {component.text-input-focus} retains same properties but border shifts to {colors.border-strong} with potential focus ring.

Navigation

{component.top-nav} — Full-width header bar. Transparent background (floats over hero gradient), text {colors.ink}, type {typography.nav-link}, padding 16px 30px, auto height. Contains {component.logo-text} on left, {component.nav-link} items centered, {component.button-accent} on right.

{component.nav-link} — Individual navigation menu item. Transparent background, {colors.ink} text, {typography.nav-link} styling (12px, 0.96em tracking), padding 8px 12px. Would show underline or opacity change on hover (undocumented).

{component.logo-text} — Brand wordmark. Uses {typography.display-lg} (72px JAF Lapture Display) in {colors.ink}, creating a strikingly oversized logotype relative to the diminutive nav items—an intentional scale contrast that establishes brand confidence.

Sub-Systems

{component.pricing-card} — Standard pricing tier container. {colors.canvas} background, {colors.body} text, {rounded.lg} (24px), {spacing.section-md} (32px) padding. Would contain tier name (heading), price (display type), feature list (body text), and CTA button.

{component.pricing-card-featured} — Highlighted pricing tier. {colors.surface-soft} (lime) background, {colors.primary} text, same structure as standard card. Visual prominence through background color alone—no border or shadow escalation documented.

{component.stat-block} — Large numeric display (e.g., "40% faster"). Transparent background, {colors.body} text, {typography.display-lg} (72px) or larger. Used in stats rows or impact metrics sections.

{component.stat-label} — Descriptive label beneath a stat block. {colors.muted} text, {typography.label} sizing. Pairs with {component.stat-block}.

{component.badge} — Small status indicator. {colors.surface-soft} background, {colors.body} text, {typography.caption} (10px), {rounded.pill} (160px) for perfect capsule shape, padding 4px 12px. Used for "New", "Featured", or category tags.

{component.tag} — Filter/category chip. Semi-transparent white background (rgba(255,255,255,0.2) for visibility on gradients), {colors.ink} text, {typography.label}, {rounded.pill}, padding 6px 16px. Appears in filtering interfaces or keyword clouds.

{component.footer} — Page footer container. {colors.surface-neutral} background, {colors.muted} text, {typography.body-sm} (11px), padding {spacing.section-xl} × {spacing.lg}. Contains {component.footer-link} items organized in columns.

{component.footer-link} — Footer navigation item. Transparent background, {colors.muted} text, {typography.body-sm}. Would dim or underline on interaction.

{component.gradient-overlay} — Decorative full-bleed gradient background. Defined as a linear interpolation from {colors.gradient-start} through lime, white, lavender, to periwiolet. Not a traditional "component" but treated as a composable surface layer applied to hero and select band sections.

Do's and Don'ts

Do

• Do reserve {colors.accent} exclusively for {component.button-accent} and {component.cta-band} surfaces—never use it for text, borders, or icons. The lime should appear only as a solid fill on high-visibility interactive elements or band backgrounds.
• Do apply {typography.button} (12px, 0.96em tracking) to all button interiors regardless of variant—maintain the wide-tracked label aesthetic across the entire button vocabulary.
• Do use {rounded.pill} (160px) for badges, tags, and filter chips to achieve true capsule shapes; anything smaller looks like a rounded rectangle rather than a pill.
• Do pair {typography.display-xl} (76px JAF Lapture) exclusively with {colors.body} (#1b3025) forest green—never render display headlines in black or gray.
• Do apply {extensions.shadows.card} (20% opacity, 10px/30px spread) to testimonial and featured cards to give them physical lift from the canvas; flatter cards can use {extensions.shadows.sm} or remain at Level 0.
• Do maintain {spacing.base} (10px) as your atomic padding unit for buttons and inputs; deviations should be multiples of 2px from this base.
• Do use {colors.surface-warm} (#fffdf9) for testimonial and quote card backgrounds to create subtle warmth separation from the main canvas without introducing new hue families.
• Do keep the {component.top-nav} transparent when positioned over the hero gradient—add a solid {colors.canvas} background only when the nav scrolls past the gradient into white-canvas territory (requires JS scroll listener).
• Do apply negative letter-spacing to all JAF Lapture Display text (use the token values: -1.52px at 76px, scaling proportionally down); this tightening is essential to the display typeface's intended appearance.
• Do use {colors.primary} (#1b3025) for both headline text and body text—hierarchy comes from size and typeface, not from lighter/darker ink values.
• Do ensure all interactive elements meet minimum 44×44px touch targets; {component.text-input} at 44px height complies, and {component.button-accent} at ~56px height (14px padding × 2 + line-height) exceeds it comfortably.

Don't

• Don't substitute {colors.link} (#0000ee standard web blue) for {colors.primary} or {colors.accent} anywhere in the interface—blue links exist only inside running body text for traditional hyperlink semantics.
• Don't bold display headlines—they're intentionally fontWeight: 400 (regular) even at 76px. If you need more emphasis, increase size or switch to {typography.display-xl} from {typography.display-md}, never push weight beyond 400.
• Don't add gradient backdrops or colored tints to the hero beyond the documented {component.gradient-overlay} five-stop specification. The gradient is precisely defined; improvisation breaks the atmospheric intent.
• Don't use {rounded.xs} (2px) for anything user-facing except the most minimal input decorations—it reads as "not rounded" and contradicts the system's generous shape philosophy.
• Don't promote the lime {colors.accent} to a text color—even on dark backgrounds, prefer {colors.on-primary} (white) or {colors.on-dark} (white). The lime is too low-contrast and too vibrant for comfortable reading at any length.
• Don't mix PP Frama weights below 500 for body copy; {typography.body-md} must stay at Medium (500) to maintain the engineered geometric presence. Reserve Light (300) for {typography.caption} and {typography.body-sm} only.
• Don't exceed 1440px max-width for content containers—the {component.top-nav} explicitly sets this, and it should serve as the system-wide constraint for desktop layouts.
• Don't add borders to {component.button-accent}—its prominence comes entirely from the lime background against the gradient/white canvas. Borders would clutter the clean fill treatment.
• Don't use pure black (#000000) for body text; always prefer {colors.body} (#1b3025) or {colors.ink} only where absolutely necessary (logos, highest-contrast icons).
• Don't expand the radius vocabulary beyond the nine defined tokens—especially avoid arbitrary values between {rounded.lg} (24px) and {rounded.xl} (32px). Stick to the scale.

Motion & Animation

Transition Tokens

--transition-base: all 300ms ease-in-out;
--transition-color: color 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out;
--transition-transform: transform 300ms ease-in-out;
--transition-shadow: box-shadow 300ms ease-in-out;
--transition-opacity: opacity 300ms ease-in-out;

Note: Extracted CSS shows a blanket transition: "all" declaration with a duration implied around 200–300ms. The easing function is not explicitly extracted but inferred as ease-in-out based on the moderate motion level. Implementations should scope these to specific properties rather than using the all keyword for performance.

Keyframe Animations

• arcway-slide — Detected in the stylesheet keyframes registry; likely a horizontal slide-in animation for entrance effects (cards sliding from left/right, text reveals). Purpose: orchestrated reveal sequences triggered by scroll-into-view or initial page load.

Interaction Patterns

• Scroll-triggered reveals: The presence of Framer animation JSON data in the source suggests elements animate into view (opacity 0 → 1, translate Y) as they enter the viewport during scroll.
• Gradient parallax potential: The hero gradient may exhibit subtle parallax movement (background translating slower than foreground content) to enhance atmospheric depth—common in Framer-built sites with this aesthetic.
• Button press feedback: Accent and primary buttons would show instant background-color transition on mousedown/touchstart (documented as -active variants).
• Nav transparency toggle: The top navigation likely transitions from background: transparent to background: {colors.canvas} with a subtle box-shadow addition once the user scrolls past the hero gradient into solid-white territory.
• Card hover lift: Elevated cards probably gain {extensions.shadows.md} → {extensions.shadows.lg} shadow escalation with a slight translateY(-2px) transform on hover.
• Focus rings: Form inputs would show a {colors.primary}-colored or {colors.accent}-colored outline ring (2px offset) on keyboard focus, replacing the default browser focus-visible treatment.
• Smooth anchor scrolling: Internal navigation links (if present) would use smooth scroll-behavior: smooth or JS-driven eased scrolling to target sections.

If implementing motion from scratch without existing animation code: recommended timing is 240–320ms for micro-interactions (hover, focus) and 400–600ms for orchestrated reveals. Easing should favor cubic-bezier(0.4, 0, 0.2, 1) (Material-standard deceleration curve) for enters and cubic-bezier(0.4, 0, 0.2, 1) symmetric for exits. Motion level is "moderate"—things move noticeably but not playfully; this is a premium real-estate brand, not a gaming interface.

Imagery Style

• Dominant imagery type: 3D architectural visualizations and rendered home interiors—consistent with Arcway's positioning as a "3D home buying platform." Expect photorealistic CG renders of residential spaces, floor plans with depth, and configurator previews.
• Color treatment: Imagery likely integrates with the brand palette—renders may incorporate the lime accent color in material highlights (cushions, accent walls, landscaping) and the forest green in structural elements or landscape.
• Role in layout: Images support rather than dominate—the hero appears to allocate significant space to atmospheric gradient and text, with imagery occupying the complementary column (right side in Western LTR layouts).
• Framing: Images likely use {rounded.lg} (24px) or {rounded.xl} (32px) corner rounding to harmonize with the card shape language. Full-bleed hero imagery would blend into or sit atop the gradient overlay.
• Aspect ratio: Hero visuals likely use 4:3 or 16:10 (landscape architectural), while card thumbnails could be 3:4 (portrait interior shots) or 1:1 (square detail crops).
• Depth integration: Photography/3D renders may use drop shadows matching {extensions.shadows.card} to appear lifted from the canvas, or blend seamlessly with the gradient atmosphere via transparent-edge compositing.
• Illustration style: If any 2D illustration exists, expect soft gradients, geometric abstraction, and architectural line-work in {colors.muted} or {colors.body-dark} tones—never heavy cartoon or flat vector styles.

Icon System

• Library: Custom SVG icons (no standard library detection in the framework analysis; icons are likely hand-crafted or sourced from a premium icon set matching the geometric/architectural aesthetic).
• Specific icons observed: The provided screenshot shows no explicit iconography in the navigation or hero area (text-only nav, wordmark logo). Icon usage would be expected in feature sections, pricing tiers, and footer social links—not visible in the current viewport.
• Treatment: Based on system conventions, icons would likely be:
  • Stroke-based (outline style) with 1.5–2px stroke weight for consistency with the refined aesthetic.
  • Color: currentColor inheriting from parent text color (typically {colors.ink} or {colors.body}).
  • Size: 16px for inline/icons-with-text, 20px for standalone navigation icons, 24px for feature section icons.
  • Alignment: Centered vertically with adjacent text using flexbox alignment; optical alignment may require slight Y-offset correction due to cap-height vs. em-box differences between icons and PP Frama text.
• Recommended approach: If building from scratch, use Lucide icons (stroke-based, geometric, customizable) with stroke-width={1.75} and apply {colors.body} as the color prop. Avoid filled/icon-style libraries (Material Icons filled, FontAwesome solid) as they conflict with the outlined, lightweight visual language.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Astro (for static/marketing optimization)
                 Current site appears built with Framer (React-based visual builder),
                 so React/Next.js is the path of least resistance for fidelity.
- Styling:        Tailwind CSS v3.4+ (utility-first, excellent for design-token mapping)
                 or CSS Modules with design-token CSS custom properties
                 (Framer sites often export to vanilla React/CSS or can be rebuilt
                 in Tailwind for maintainability)
- Fonts:          Self-host WOFF2 files for JAF Lapture Display and PP Frama
                 (source URLs extracted from Framer CDN in fontFaces data);
                 define @font-face declarations with font-display: swap.
                 Fallback: Google Fonts Playfair Display + DM Sans.
- Animation:      Framer Motion (native to Framer exports) or GSAP ScrollTrigger
                 for scroll-driven reveal sequences matching arcway-slide behavior.
- Icons:          Custom SVGs (extract from site) or Lucide React (stroke-based match)
- Component lib:  Radix UI Primitives (accessible unstyled foundations) +
                  custom styled wrappers matching this spec
                 (or shadcn/ui with extensive theme customization)
- Build:          Vite (if choosing non-Next.js) or Next.js built-in

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column layout; nav collapses to hamburger; hero headline drops to ~36–42px; CTA stack vertically; cards go full-width; gradient simplifies to fewer stops or compresses. | | Tablet | 640–1023px | Two-column grids possible; nav may show abbreviated items or retain hamburger; hero headline 48–56px; side-by-side CTAs return. | | Desktop | 1024–1439px | Full nav visible; hero at 64–72px headline; 3-column feature grids; 1440px container respected. | | Wide | ≥ 1440px | Maximum expression—all spacing at largest tokens; headline at 76px; 4-column grids possible; generous whitespace preserved. |

Touch Targets

• {component.button-accent}: ~56px height × variable width (min 112px with 28px padding × 2 + text) — exceeds WCAG AAA 44×44px minimum.
• {component.button-primary}: Same dimensions as accent button — exceeds AAA.
• {component.text-input}: 44px height × full width — meets AAA minimum exactly.
• {component.nav-link}: ~36px height (8px padding × 2 + 12px line-height) — may fall short of AAA; consider increasing vertical padding to 12px on mobile (total 40px+) or accepting AA compliance (24px minimum) for desktop-only nav items.
• {component.badge}: ~22px height (4px padding × 2 + 10px caption + border) — below touch target minimum; acceptable only if non-interactive (informational badges). Interactive filter chips should use {component.tag} at ~30px height instead.

Collapsing Strategy

• Navigation: On mobile (< 768px), the horizontal nav links (PRODUCT, USE CASES, ABOUT, NEWS) collapse into a hamburger menu icon (custom SVG or Lucide Menu). The {component.button-accent} ("BOOK DEMO") may remain visible in the header or move into the mobile menu drawer. The logo reduces in size from 72px to ~36–40px.
• Hero columns: The two-column hero (headline left, visual right) stacks vertically on mobile: headline and CTAs occupy the top 50–60% of viewport, gradient/illustration fills remaining space below or becomes a compressed background.
• Feature grids: 3–4 column card grids collapse to single-column on mobile (cards span full width with {spacing.lg} horizontal margins), then 2-column on tablet.
• Pricing tables: Horizontal pricing cards (side-by-side tiers) stack vertically on mobile; the featured tier ({component.pricing-card-featured}) moves to top of stack.
• CTA bands: {component.cta-band} maintains full-width background but reduces internal padding from {spacing.section-xl} to {spacing.section-lg}, and headline size drops from 38px to 28–30px.
• Footer: Multi-column footer link lists stack into a single accordion or vertical list on mobile.

Image Behavior

• Hero illustration/3D render: Scales proportionally maintaining aspect ratio (likely 4:3 or 16:10). On mobile, may crop to focus on central focal point or reduce to 50% viewport height. Rounded corners ({rounded.lg} or {rounded.xl}) persist at all breakpoints.
• Card thumbnails: Maintain aspect ratio (likely 16:9 or 4:3), scale to fill card width, preserve {rounded.lg} corner rounding.
• Testimonial avatars: If present, would be circular ({rounded.full}) at 48–64px, scaling down to 40px on mobile.
• Logo: Wordmark ("Arcway") scales from 72px (desktop) to ~36px (mobile); consider providing an optimized SVG mark version for very small screens (< 375px).

Iteration Guide

1. Start with the token foundation: Create a design-tokens.css or Tailwind config file containing every color, typography, spacing, and radius value from this DESIGN.md's YAML frontmatter. Reference tokens exclusively via CSS custom properties (e.g., var(--color-accent)) or Tailwind utilities (e.g., bg-accent). Never hard-code a hex or pixel value that has a corresponding token.

2. Build the gradient hero first: The {component.gradient-overlay} is the visual signature of this brand. Implement the five-stop linear gradient (white → lime → white → lavender → periwiolet at ~135°) as a full-viewport div with position: absolute; inset: 0; z-index: 0. Layer the hero content ({component.hero-band}) on top with position: relative; z-index: 1.

3. Implement the dual-typeface system: Load JAF Lapture Display (or Playfair Display fallback) for all {typography.display-*} and {typography.title-*} roles. Load PP Frama (or DM Sans fallback) for everything else. Ensure the font-display: swap strategy prevents invisible text during load. Verify the wide letter-spacing on UI text (0.96em) renders correctly—it dramatically affects readability and brand perception.

4. Construct components from the YAML definitions: Each entry in the components: frontmatter maps directly to a React component or CSS class. Build {component.button-accent} first (it's the most distinctive interactive element), then {component.card}, then {component.top-nav}. Add state variants (-active, -disabled, -focus) as separate component versions or as CSS pseudo-class modifiers.

5. Apply the shadow elevation system: Map the four {extensions.shadows.*} levels to semantic elevation needs. Start with Level 0 (flat) for everything, then add Level 2 (soft) to hoverable cards, Level 3 (elevated) to featured cards, and Level 5 (prominent) to hero cards and testimonials. Never invent new shadow values—these four cover the full range.

6. Respect the shape scale: Use only the nine defined {rounded.*} tokens. When in doubt between {rounded.DEFAULT} (10px) and {rounded.md} (16px), check whether the element is a button (DEFAULT) or a content container (md/lg). Apply {rounded.pill} (160px) liberally to badges and tags—it's a brand signature.

7. Maintain the airy whitespace philosophy: Resist the urge to compress spacing. Use {spacing.section-xxl} (64px) between major sections, {spacing.xxl} (24px) inside cards, and {spacing.base} (10px) between related inline elements. The luxury feel comes from breathing room.

8. Add motion conservatively: Implement arcway-slide or equivalent scroll-triggered reveals (opacity + translateY) for cards entering the viewport. Keep durations between 240–400ms. Prefer Framer Motion's whileInView or GSAP ScrollTrigger for performance. Avoid animating the gradient itself (expensive) unless hardware-accelerated via transform or will-change.

9. Test contrast ratios rigorously: {colors.accent} (#e9fe89) on {colors.body} (#1b3025) for button text passes WCAG AA for large text but verify for 12px body text (may require checking specific contrast value). {colors.body} on {colors.canvas} is sufficient for body copy. All other combinations in this spec were designed to pass but should be verified with a contrast checker tool.

10. Run linting: After implementation, execute npx @google/design.md lint DESIGN.md (if available) or manually audit that every {token.path} reference in your codebase resolves to a defined token, no orphaned tokens exist, and no undocumented colors/fonts have been introduced.

Font Setup

For local development without access to the licensed JAF Lapture Display or PP Frama fonts, configure these CSS variables and import substitutes:

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,500;0,9..40,600;1,9..40,400&family=Playfair+Display:wght@400;500;600&display=swap');

:root {
  --font-display: 'Playfair Display', 'DEMO JAF Lapture Display', Georgia, serif;
  --font-body: 'DM Sans', 'PP Frama', system-ui, sans-serif;
  --color-canvas: #ffffff;
  --color-accent: #e9fe89;
  --color-primary: #1b3025;
  /* ... map all remaining tokens ... */
}

Set font-family: var(--font-display) on .display-xl, .display-lg, .title-* classes; font-family: var(--font-body) on everything else. Adjust letter-spacing values slightly for Playfair Display (it tolerates less negative tracking than JAF Lapture at equivalent sizes).

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover treatments (shadow escalation, background lightening, transforms) for buttons, cards, and links are not documented. These should be designed following the pattern established by the -active variants (slightly darker/deeper colors) plus conventional hover affordances (subtle lift, shadow increase).
• Loading/skeleton states: No loading indicators, skeleton placeholders, or suspense boundaries were extractable from the static screenshot. For a 3D platform, loading states for model previews would be critical—design a shimmer skeleton using {colors.surface-soft} and {colors.hairline-soft}.
• Form validation states: Beyond {component.text-input-focus}, error states (red border, error message text), warning states, and success states (green confirmation) are inferred from semantic colors but not visually verified.
• Dark mode: The entire system is documented for {extensions.mode}: light. No dark-mode token mappings (inverted surfaces, adjusted text colors, desaturated accents) exist in the source. A dark theme would require inverting {colors.canvas} to a deep charcoal, adjusting {colors.body} to a warm off-white, and significantly muting {colors.accent}.
• Authenticated/dashboard surfaces: The screenshot captures only the landing page. Dashboard UI, configuration panels, 3D viewer chrome, saved homes interface, and account settings surfaces are entirely unknown and may introduce new component patterns (sliders, toggles, data tables, canvas tools).
• Sub-brand or tier palettes: If Arcway offers enterprise plans, agent portals, or co-branded partner experiences, those may have modified accent colors or logo treatments not visible here.
• Exact gradient coordinates: The five-stop gradient's precise angle, percentage positions, and color-mix ratios are approximated from the screenshot's visual appearance. Fine-tuning may be required for pixel-exact reproduction.
• Framer-specific CSS variables: The source contains references to Framer-generated variable names like --token-1889186a-cd2b-4417-a83a-1228fadea745 whose values may override or supplement the design tokens documented here. Inspect the live site's computed styles for these runtime overrides.
• Accessibility compliance: While touch target sizes and contrast ratios appear generally compliant, formal WCAG 2.1 AA/AAA auditing has not been performed. Pay particular attention to the 12px body text size at 0.96em letter-spacing (reduced legibility risk) and lime-on-green contrast in accent button text.