Sunday App Design System

Overview

Sunday's branding page presents a stark, confident visual identity rooted in extreme contrast and surgical restraint. The design operates on a pristine white {colors.canvas} that serves as an infinite gallery wall for two dominant forces: jet-black {colors.ink} display typography and a singular electric-magenta {colors.primary} accent that appears only where brand identity demands recognition—section labels, status badges, and interactive highlights. This is not a pastel fintech palette; it is a monochrome foundation punctuated by neon voltage.

The typographic voice is defined by its refusal to shout via weight. Every heading—from the 64px {typography.display-lg} hero down to the 32px {typography.title-brand} category label—holds steady at font-weight: 400. Hierarchy is achieved purely through scale and aggressive negative letter-spacing ({typography.display-lg} sits at -3.2px), creating a tight, architectural feel reminiscent of Swiss modernism reinterpreted for digital product marketing. Body copy delegates to {typography.body-md} (Rubik at 16px), establishing a clean dual-family system: Helvetica Neue commands attention; Rubik handles utility.

Shape language follows a clear hierarchy of intent. Primary calls-to-action ({component.button-primary}) are rendered as fully rounded pills ({rounded.pill} at 100px radius), softening the otherwise angular grid. Content containers like the phone mockup frame ({component.phone-mockup-card}) use {rounded.lg} (24px), while floating UI panels within demonstrations adopt the same treatment. Small interactive elements—the menu bubble, badge treatments—use even tighter radii. The overall impression is one of controlled organicity: nothing is harshly rectangular, but nothing is playfully blob-like either.

A sub-system emerges in the demonstration surfaces shown within the phone mockup: dark-themed UI panels with translucent overlays ({colors.surface-overlay}), white-on-dark input fields, and branded card components that suggest the customizable payment flow Sunday offers. These "demo-within-demo" surfaces use their own constrained palette derived from the main tokens.

Key Characteristics

• Canvas is pure {colors.canvas} (#ffffff) with zero texture or gradient wash—white space is structural, not decorative.
• Brand color {colors.primary} (#ff17e9) appears exclusively on identity markers (the "Branding" label, "NEW" badge) and never fills large areas.
• Display headings use {typography.display-lg} at 64px/weight-400 with -3.2px tracking—boldness comes from size alone.
• Primary CTAs are {component.button-primary}: solid {colors.surface-dark} (#000000) background with {colors.on-dark} (#ffffff) text, fully pill-shaped.
• Body copy uses {typography.body-md}: Rubik 16px/400 in {colors.ink}, creating comfortable reading rhythm against the airy canvas.
• Card containers default to {rounded.md} (16px) or {rounded.lg} (24px); the most generous rounding is reserved for buttons.
• Section vertical rhythm is anchored by {spacing.section-hero} (120px) between major bands, creating magazine-style breathing room.
• Demo/simulation surfaces inside the phone mockup flip to dark mode with {colors.surface-overlay} translucency.

Colors

Brand & Accent

• Primary ({colors.primary} — #ff17e9): Electric magenta used exclusively for brand-identity signifiers—section category labels like "Branding," status badges such as "NEW," and potential link/highlight states. Never used as fill for large surfaces.
• Primary Dim ({colors.primary-dim} — #cc14bb): Slightly desaturated variant for hover or pressed states on primary-colored elements, maintaining hue while reducing saturation.
• Primary Glow ({colors.primary-glow} — rgba(255, 23, 233, 0.15)): Translucent wash used for subtle background tinting behind primary-colored text or icon treatments, providing depth without overwhelming the canvas.

Surface

• Canvas ({colors.canvas} — #ffffff): The foundational page background. Pure white, untextured, infinite. All above-fold content lives on this surface.
• Surface Soft ({colors.surface-soft} — #f5f5f6): Near-white neutral for elevated cards, floating panels, and secondary content zones requiring slight separation from canvas without drawing attention.
• Surface Strong ({colors.surface-strong} — #efefef): Light gray for form field backgrounds (select inputs), disabled button surfaces, and borders requiring more visibility than {colors.hairline}.
• Surface Dark ({colors.surface-dark} — #000000): Pure black reserved for primary CTA button backgrounds ({component.button-primary}), the navigation's highest-priority action state, and inverted-content sections.
• Surface Overlay ({colors.surface-overlay} — rgba(14, 7, 29, 0.48)): Dark translucent layer used within demo/mockup interfaces (visible inside the phone screen) to create depth over photography or complex backgrounds.
• Surface Overlay Heavy ({colors.surface-overlay-heavy} — rgba(14, 7, 29, 0.58)): Denser overlay variant for modal-like surfaces within demonstrations where readability demands higher contrast against underlying imagery.

Text

• Ink ({colors.ink} — #000000): Primary text color for headlines, navigation labels, and body copy on light surfaces. Maximum contrast against {colors.canvas}.
• Body ({colors.body} — #ffffff): System-assigned body token; functions as {colors.on-dark} for white text on dark surfaces within demo interfaces.
• Muted ({colors.muted} — #7f7f7f): Medium-gray for subheadlines, descriptive text beneath headlines, placeholder content, and secondary information.
• Muted Soft ({colors.muted-soft} — #bdbdbd): Light-gray for tertiary metadata, timestamps, disabled-label text, and very low-emphasis annotations.
• On Primary ({colors.on-primary} — #000000): Text color when rendering atop {colors.primary} backgrounds—black ensures WCAG AA compliance against the bright magenta.
• On Dark ({colors.on-dark} — #ffffff): White text for rendering on {colors.surface-dark} button backgrounds and any inverted-surface context.
• On Surface Dark ({colors.on-surface-dark} — rgba(255, 255, 255, 0.58)): Semi-transparent white used for secondary body copy within dark-themed demo surfaces, providing reduced emphasis without dropping to true gray.

Hairlines & Borders

• Hairline ({colors.hairline} — #dedede): Subtle border color for the menu-bubble button outline, dividers between non-adjacent elements, and minimal-separation lines.
• Hairline Dark ({colors.hairline-dark} — rgba(255, 255, 255, 0.28)): Low-opacity white border for input fields within dark demo interfaces, visible enough to define edges without competing with content.
• Border Input ({colors.border-input} — #ededed): Form-field border color for light-surface inputs, slightly warmer than {colors.hairline} for tactile affordance.

Semantic

Semantic color tokens (error, success, warning, info) are not present in the extracted styling for this page. The branding showcase focuses on neutral + brand palette only. Implementations should derive semantic colors from {colors.primary} (info/link) and introduce red/green/yellow only when form validation or status messaging is required in functional flows.

Typography

Font Family

The system employs a deliberate two-face split. Helvetica Neue (with Arial fallback) serves as the display and heading family, carrying all brand-expressive type from the 64px hero down through section titles and badge labels. Its neutral, geometric character allows the aggressive sizing and negative letter-spacing to provide personality without the font itself demanding attention. Rubik (with generic sans-serif fallback) handles all UI-body contexts: paragraph copy, button labels, navigation items, captions, and form inputs. Rubik's slightly softer geometry and optimized screen rendering make it superior for sustained reading and smaller sizes. A third proprietary face, Neuebit, is declared in font-face rules but does not appear in above-fold computed styles—it may be reserved for decorative or logo-specific usage elsewhere on the domain. Mondwest is similarly loaded but unused in this view.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 80px | 400 | 76px | -4px | Reserved for mega-headlines (not in current view but available for campaign pages) | | {typography.display-lg} | 64px | 400 | 60.8px | -3.2px | Hero headline ("Make it yours.") | | {typography.title-md} | 48px | 400 | 45.6px | -2.4px | Major section headings (dark-mode sections, h2 equivalents) | | {typography.title-brand} | 32px | 400 | 32px | -0.96px | Category/feature labels ("Branding") in primary color | | {typography.body-md} | 16px | 400 | 24px | normal | Paragraph body copy, descriptions, standard text | | {typography.body-sm} | 14px | 400 | 20px | normal | Secondary body text, metadata, compact contexts | | {typography.caption} | 13px | 400 | 18px | normal | Tiny labels, menu bubbles, timestamp-scale text | | {typography.button} | 16px | 400 | 24px | normal | Button labels, navigation links, CTA text | | {typography.label-badge} | 14px | 500 | 20px | 0.02em | Status badges ("NEW"), tags, emphasized micro-labels |

Principles

The typography system's defining discipline is weight constancy across hierarchy levels. Every role from caption to display sits at font-weight: 400 (except {typography.label-badge} at 500 for badge emphasis). This is an intentional constraint: size and letter-spacing carry all hierarchical burden. When a designer needs to increase prominence, they move up the size scale—not the weight scale. The result is a sophisticated, editorial voice that feels confident rather than aggressive.

Negative letter-spacing scales proportionally with size: {typography.display-lg} at -3.2px (-5% of em), {typography.title-md} at -2.4px (-5% of em), {typography.title-brand} at -0.96px (-3% of em). This tightening creates visual cohesion across heading sizes while preventing loose, airy feeling at large scales. Body and UI text revert to letter-spacing: normal, preserving readability for longer-form content.

Color plays a supporting typographic role. Headlines on the canvas render in {colors.ink} (pure black). The "Branding" label breaks to {colors.primary} (magenta), signaling its categorical nature. Within dark demo surfaces, headings flip to {colors.on-dark} (white). This color switching is the sole mechanism for handling light/dark context changes—font families remain consistent everywhere.

Uppercase is avoided entirely in the extracted styling. Even the "NEW" badge renders in sentence case (or title case depending on implementation). The system trusts lowercase Rubik and title-case Helvetica to convey professionalism without authoritarian capitalization.

Note on Font Substitutes

Helvetica Neue is a proprietary Linotype face. For open-source implementations, substitute Inter (Google Fonts: weights 400, 500) for display/heading roles—Inter shares Helvetica's neutral geometry and supports similar negative letter-spacing treatments. For body copy, Rubik is freely available on Google Fonts (weights 400, 500); retain it natively. If a single-font fallback is mandatory, DM Sans covers both display and body adequately. Define CSS variables as:

--font-display: 'Helvetica Neue', 'Inter', Arial, sans-serif;
--font-body: 'Rubik', 'DM Sans', sans-serif;

Layout

Spacing System

• Base unit: 4px (inferred from the {spacing.xs} token).
• Tokens: {spacing.xxs} (2px — micro-adjustments), {spacing.xs} (4px — icon gaps, inner offsets), {spacing.sm} (8px — dense component internal spacing), {spacing.md} (11px — baseline rhythm, list gaps), {spacing.base} (12px — compact stack spacing), {spacing.lg} (14px — form padding), {spacing.xl} (16px — standard block padding, card internal), {spacing.xxl} (17px — occasional offset), {spacing.section-sm} (24px — minor section separation), {spacing.section-md} (32px — standard section gap), {spacing.section-lg} (40px — generous band padding), {spacing.section-xl} (56px — major zone separation), {spacing.section-hero} (120px — hero vertical padding).
• Section padding (vertical): {spacing.section-hero} (120px) — used for the primary hero band containing the phone mockup and headline column.
• Card internal padding: {spacing.xl} (16px) horizontally for {component.surface-card}, {spacing.lg} (14px) vertically for compact variants; {component.floating-ui-panel} uses {spacing.lg} × {spacing.xl}.
• Gutters: Desktop layout maintains approximately 8px ({spacing.sm}) lateral gutter within the max-width container, inferred from the container element's inline padding pattern.

Grid & Container

The page operates on a split-screen asymmetric grid for the hero: roughly 50/50 horizontal division with the left column occupied by the phone-mockup visual and the right column holding the typographic content (brand label → headline → subhead → CTA). The overall content max-width appears to be 1440px (from the section container width), centered with auto margins. Internal to this, the article/text column constrains to ~656px when in single-column reading mode.

The density choice is editorial-airy: generous {spacing.section-hero} vertical padding, ample whitespace around the headline, and the phone mockup given substantial breathing room. This is not a dashboard or marketplace grid—it is a storytelling layout where each element (device image, badge, headline, button) occupies its own focal island.

Specific desktop behavior: the navigation spans full-width with internal centering of menu items; the hero splits into visual-left / text-right; below-fold sections may alternate or stack based on flex-module architecture detected in the DOM class names (fleximodule__molecule, split_screen).

Whitespace Philosophy

Sunday treats whitespace as structural scaffolding, not empty filler. The 120px hero padding isn't luxury—it frames the device mockup as a gallery object. Between the "Make it yours." headline and the "Get started" button, vertical distance creates intentional pause. The system resists the temptation to compress; if anything, it risks feeling sparse before it feels crowded. This aligns with the brand position as a premium restaurant payment solution: confidence is expressed through restraint.

Header Architecture

|--------------------------------------------------------------------------------|
| [Logo: sunday]   Take payments ▾   Power your business ▾   Pricing   Resources ▾        [Login →]  [Get a demo] |
|--------------------------------------------------------------------------------|
       ↑                  ↑ center-weighted menu cluster              ↑ utilities right-aligned
   flush-left                                                        pill-shaped CTA

The header uses a flush-left logo, center-leaning navigation cluster, flush-right utility pair pattern. Max-width matches the 1440px page container. Vertical height is ~72px (inferred from standard navbar proportions). Dropdown triggers (▾) indicate expandable meganav or dropdown panels on "Take payments" and "Power your business." The "Login" link is ghost-styled (transparent background, ink text, pill radius); "Get a demo" is the primary black-filled action.

Hero Section

|================================================================================|
|                                                                                |
|   ┌─────────────────────────────┐         Branding  NEW                       |
|   │                             │                                             |
|   │     ╔═══════════════╗       │         Make it yours.                      |
|   │     ║  PHONE SCREEN  ║       │                                             |
|   │     ║  (branded UI)  ║       │         Customize the sunday payment...     |
|   │     ║                ║       │                                             |
|   │     ║  ┌──────────┐  ║       │         [ Get started ]                    |
|   │     ║  │floating  │  ║       │                                             |
|   │     ║  │ panel    │  ║       │                                             |
|   │     ║  └──────────┘  ║       │                                             |
|   │     ╚═══════════════╝       │                                             |
|   │                             │                                             |
|   └─────────────────────────────┘                                             |
|   ◄────── Visual Column ──────►  ◄──────── Text Column ──────────────────────►  |
|================================================================================|

The hero uses a two-column split-screen layout. Left: a large phone mockup (rounded {rounded.lg} corners) displaying a customized branded payment interface with a floating settings panel overlay. Right: a vertical stack comprising (1) the "Branding" label in {colors.primary} with a "NEW" badge, (2) the h1 headline "Make it yours." at {typography.display-lg}, (3) a subheadline paragraph in {typography.body-md} / {colors.muted}, and (4) the primary CTA button. Columns are vertically centered relative to each other.

Phone Mockup Detail

The left-column phone frame contains its own layered composition: the device chrome (black rounded rectangle), the screen content showing a merchant-branded interface ("Tony's" with circular avatar, social icons, membership prompt in coral/red, menu items), and a floating UI panel positioned partially outside/lower-left of the phone bounds showing upload metadata ("Tonys.png • 20 Ko") with a close icon. This float creates depth illusion and demonstrates the customizable surface-layer system Sunday offers merchants.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, no border | Base canvas, flat text blocks, simple dividers | | 1 — Border-only | 1px {colors.hairline} or {colors.hairline-dark} | Input fields, menu bubble button, subtle container outlines | | 2 — Soft lift | {extensions.shadows.card} — rgba(0,0,0,0.15) 0 12px 60px 0 | Phone mockup card, elevated floating panels, prominent demo surfaces | | 3 — Overlay | {colors.surface-overlay} at 48–58% opacity | Dark translucent layers within demo UI screens over photography |

The system favors shadow-based elevation over color-block layering. The phone mockup casts the single defined shadow token—a deep, diffuse 60px blur with 15% black opacity—that lifts the device convincingly off the canvas without hard edges. Floating UI elements within the mockup (like the file-upload panel) appear to sit atop the phone screen through stacking context rather than additional shadows, relying on their lighter {colors.surface-soft} background to separate from the darker interface beneath.

There is no gradient decoration on the hero canvas. The white surface remains pure; all visual interest derives from typography, photography (inside the mockup), and the single magenta accent. This minimalist approach to depth reinforces the "make it yours" message: Sunday's infrastructure disappears so the merchant's brand can occupy the visual foreground.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Subtle inner rounding, tiny badges | | {rounded.DEFAULT} | 8px | Default component rounding (inputs, small tiles) | | {rounded.md} | 16px | Standard card containers, input fields in demo UI | | {rounded.lg} | 24px | Phone mockup outer frame, prominent floating panels | | {rounded.xl} | 32px | Large feature cards, hero image containers (if present) | | {rounded.pill} | 100px | Primary CTA buttons, login link wrapper, fully rounded ends | | {rounded.button-pill} | 64px | Smaller pill elements (menu bubble button) | | {rounded.full} | 9999px | Avatar circles, fully round decorative elements |

Photography Geometry

The primary photographic element is the phone-in-hand lifestyle shot contained within the mockup frame. This image is cropped to fill the device screen area with a slight overflow (bleeding slightly beyond the rounded phone frame corners, suggesting the photo exists "behind" the device mask). Aspect ratio approximates 19.5:9 (modern smartphone). Corner rounding matches {rounded.lg} (24px) for the phone chrome. The floating UI panel overlaid on the lower portion uses independent {rounded.lg} geometry, creating a layered card-on-photo effect. No avatar imagery is visible in the above-fold view, but the demo screen suggests circular ({rounded.full}) merchant avatars within the branded interface.

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 header bar spanning the full viewport width. Background {colors.canvas}, containing the logo, navigation links, and utility actions. Height ~72px, typography {typography.body-md}. No visible border-bottom; separation from content relies on spacing alone.

{component.nav-link} — Standard navigation menu item (e.g., "Pricing", "Resources"). Transparent background, {colors.ink} text, {typography.button} sizing. Padding {spacing.sm} {spacing.base} provides click target. On trigger elements, a chevron (▾) indicates dropdown availability.

{component.nav-dropdown-trigger} — Navigation items with child menus ("Take payments", "Power your business"). Same visual treatment as {component.nav-link} but with associated dropdown panel on interaction. Chevron icon signals expandability.

{component.button-login} — Ghost-style utility button in the header's right cluster. Transparent background, {colors.ink} text, {rounded.pill} (100px) radius creating elongated capsule shape. Padding 0 {spacing.xxl} (0 24px). Paired left-of the primary CTA.

{component.button-primary} — The principal conversion action ("Get a demo", "Get started"). Solid {colors.surface-dark} (#000000) background, {colors.on-dark} (#ffffff) text, {typography.button} at 16px/400. Fully pill-shaped with {rounded.pill} (100px). Generous padding {spacing.section-sm} {spacing.section-md} (16px 28px). Appears in both header (compact) and hero body (full-size) positions.

{component.button-primary-active} — Pressed/focus state for primary buttons. Background shifts to {colors.muted} (medium gray), indicating engagement. Maintains white text and pill radius. Add transform: scale(0.98) optionally for tactile feedback.

{component.button-primary-disabled} — Non-interactive state. Background becomes {colors.surface-strong} (light gray), text drops to {colors.muted-soft}. Cursor becomes not-allowed. Retains pill geometry.

{component.button-bubble} — Compact capsule button used for the "Menu" toggle (mobile/tablet) or tag-style interactions. Transparent background, 1px {colors.hairline} border, {colors.ink} text at {typography.caption} (13px). Tightly rounded with {rounded.button-pill} (64px). Minimal padding 1px 6px.

{component.button-bubble-active} — Engaged state for bubble buttons. Gains {colors.surface-soft} background fill while retaining border and ink text. Indicates selection or open state.

Cards & Containers

{component.hero-band} — The top-level section wrapping the split-screen hero content. Background {colors.canvas}, vertical padding {spacing.section-hero} (120px). Contains the flex-grid that positions phone mockup left, text column right. No border or shadow; relies on internal spacing for structure.

{component.hero-headline} — The h1 "Make it yours." text block. Inherits {typography.display-lg} (64px/400/-3.2px tracking), {colors.ink} color. No background or padding of its own—positioning handled by parent flex container.

{component.hero-subheadline} — Descriptive paragraph beneath the headline: "Customize the sunday payment flow to match your brand's identity & voice." Uses {typography.body-md} (Rubik 16px) in {colors.muted} gray. Provides breathing room between headline and CTA.

{component.brand-label} — The "Branding" category identifier appearing above the headline. Rendered in {typography.title-brand} (32px Helvetica Neue) colored {colors.primary} (magenta). Signals which product capability is being showcased. Accompanied by {component.new-badge} sibling.

{component.new-badge} — "NEW" status indicator sitting inline/right of the brand label. {typography.label-badge} (14px/500) in {colors.primary} color. Uppercase or small-caps treatment implied by badge convention. No background fill—relies on color alone for visibility.

{component.phone-mockup-card} — The device frame housing the demonstration screenshot. Rounded {rounded.lg} (24px) corners, no visible background (image fills internally). Casts {extensions.shadows.card} elevation (deep diffuse shadow). Contains the branded payment interface photograph. Width scales responsively; aspect ratio preserved.

{component.surface-card} — Generic elevated content container with {colors.surface-soft} background. Text color {colors.ink}, typography {typography.body-md}. Rounded {rounded.md} (16px). Padding {spacing.xl} (16px) all sides. Used for informational panels, stat blocks, or feature callouts below the fold.

{component.surface-card-elevated} — Variant of surface-card with stronger visual separation. Same properties as {component.surface-card} plus {extensions.shadows.card} shadow treatment. Reserved for prominently featured content needing to pop from the canvas.

{component.floating-ui-panel} — The translucent settings/upload panel visible overlapping the phone mockup's lower region. Background {colors.surface-soft} (near-white), text {colors.muted} at {typography.body-sm}. Rounded {rounded.lg} (24px) matching phone frame. Padding {spacing.lg} {spacing.xl} (14px × 16px). Demonstrates the customizable overlay system merchants can deploy.

Inputs & Forms

{component.text-input} — Standard text entry field as seen within the demo interface (dark-context variant). Transparent background (allowing dark surface to show through), {colors.on-surface-dark} text (semi-transparent white), 1px {colors.hairline-dark} border. Rounded {rounded.md} (16px). Padding 16px vertical. Typography {typography.body-md} (16px Rubik).

{component.text-input-focus} — Focused state for text inputs. Border color intensifies (suggest moving toward {colors.primary} or solid white), potentially gaining a subtle glow. Background remains transparent. Maintain radius and padding.

{component.select-input} — Dropdown select element observed in form contexts. Background {colors.surface-strong} (light gray), {colors.ink} text, {typography.body-md}. Notably has border-radius: 0—sharp corners distinguishing it from text inputs. Zero padding in extracted data; likely receives browser-default or custom wrapper padding.

Navigation

{component.footer} — Page footer (inferred from standard page architecture, partially visible or below fold). Background {colors.canvas}, text {colors.muted} at {typography.body-sm}. Padding {spacing.section-md} (32px) vertical. Contains legal links, copyright, utility navigation in subdued treatment.

{component.cta-section} — Call-to-action band typically placed mid-page or before footer. Background {colors.canvas}, headline in {colors.ink}, centers a {component.button-primary} for conversion. Padding {spacing.section-lg} (40px) vertical.

Signature Components

{component.divider-line} — Minimal horizontal rule. 1px height, {colors.hairline} color, spanning partial or full container width. Used between non-adjacent content zones where whitespace alone insufficiently signals separation.

Do's and Don'ts

Do

• Do reserve {colors.primary} strictly for brand-identity markers—category labels, status badges, and interactive highlights. Never use it as a section background or large-area fill.
• Do maintain font-weight: 400 on all heading levels ({typography.display-lg}, {typography.title-md}). Increase size or tighten letter-spacing for emphasis instead of bumping to bold.
• Do apply {rounded.pill} (100px radius) to all primary CTAs ({component.button-primary}). The fully rounded shape is a signature element distinguishing Sunday's action buttons from generic rectangles.
• Do use {typography.body-md} (Rubik 16px) for all paragraph-length content. Reserve Helvetica Neue for display roles only.
• Do give hero sections {spacing.section-hero} (120px) vertical padding. The airy vertical rhythm is essential to the editorial, premium feel.
• Do cast {extensions.shadows.card} shadow on the phone mockup and any elevated floating panel. The deep, diffuse 60px-blur shadow is the single elevation tool in the system.
• Do set {colors.on-primary} to #000000 (black) when placing text on {colors.primary} backgrounds—the magenta is too light for white text to pass accessibility thresholds.
• Do use {colors.muted} (#7f7f7f) for subheadlines and descriptive text beneath main headlines. It creates proper hierarchy without competing with {colors.ink}.
• Do apply {rounded.lg} (24px) to the phone mockup frame and floating UI panels. This radius creates the "soft hardware" aesthetic that makes the demo feel tangible.
• Do keep the canvas pure {colors.canvas} (#ffffff) with zero gradient or texture. The white space is intentional emptiness, not a missing background treatment.

Don't

• Don't substitute {colors.primary} for link color or error state. Semantic colors should be introduced separately; the magenta is exclusively for brand expression, not functional feedback.
• Don't add gradient overlays or color washes to the hero band. The design's power comes from stark white canvas meeting bold black type—any tint dilutes this contrast.
• Don't use {typography.title-brand} (32px magenta) for body text or UI labels. It is solely for the category identifier ("Branding") that anchors each showcase section.
• Don't round select inputs—{component.select-input} explicitly uses border-radius: 0. Sharp corners distinguish dropdowns from free-text fields in this system.
• Don't place {colors.on-surface-dark} (semi-transparent white) on light backgrounds. It is exclusively for secondary text within dark demo interfaces.
• Don't exceed {rounded.pill} (100px) for any element. If you need rounder than pill, use {rounded.full} (9999px) for circles—but never invent intermediate radii like 200px.
• Don't apply shadow to the top navigation bar. {component.top-nav} sits flat on the canvas with no elevation, separating from content via spacing alone.
• Don't mix font families within a single text block. Headlines stay Helvetica Neue; paragraphs stay Rubik. Cross-contamination undermines the dual-family system's clarity.
• Don't reduce letter-spacing on body text to match the negative tracking on headings. Body copy uses letter-spacing: normal; tightening it harms readability at 16px.
• Don't promote the dark demo-interface palette (overlays, semi-transparent whites) to the main site theme. Those tokens exist only within the simulation surfaces inside the phone mockup.

Motion & Animation

Transition Tokens

--transition-base: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
--transition-color: background-color 0.3s ease;
--transform-smooth: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
--transform-slow: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
--border-transition: border 0.3s linear, transform 0.3s linear;

The extracted transitions reveal a strong preference for cubic-bezier(0.16, 1, 0.3, 1)—an ease-out-expo curve producing fast starts with decelerating finishes. This creates snappy, premium-feeling motion: elements arrive quickly then settle gently. Duration clusters around 300ms for state changes (color, background) and 400ms for spatial transforms (position, scale). A notably slower 1.2s transition exists for continuous scroll-driven animations.

Keyframe Animations

• wiggle — Small oscillating rotation applied to decorative elements (likely the hand gesture or sparkle accents) to create living, playful micro-motion.
• spark — Particle or starburst emission effect for the "NEW" badge or celebratory moments, using scale and opacity keyframes.
• appear / fadein — Opacity-based entrance animations bringing elements into view on scroll or mount, likely paired with IntersectionObserver.
• colorful-oscillation / colorful-oscillation-to-white — Hue or saturation cycling animation, possibly for the {colors.primary} badge or accent elements to draw eye attention through chromatic movement.
• rotatein — 360-degree spin entrance for icons or decorative graphics.
• infiniteScroll / scroll / scroll-forward / scroll-backward — Continuous marquee or carousel motion for testimonial/logo strips, translating content horizontally in a loop.
• czrsUQ — Minified/custom animation name (likely obfuscated production build artifact) with unspecified purpose—possibly a complex composite sequence.

Interaction Patterns

• Scroll-triggered reveals: Hero elements (phone mockup, headline, badge) likely fade/slide in as the user scrolls them into viewport, using the appear/fadein keyframes with 300-400ms duration.
• Button press feedback: Primary buttons probably scale to 0.98 on active state (implied by the ease-out curve favoring quick response), returning to 1.0 on release.
• Dropdown panel expansion: Navigation dropdowns ("Take payments ▾") animate their height/opacity using --transition-base (300ms expo-out), revealing submenu items with staggered delay.
• Floating panel parallax: The file-upload panel overlapping the phone mockup may shift at a different scroll speed than the device frame, creating layered-depth illusion.
• Badge pulse: The "NEW" badge likely employs the spark or colorful-oscillation animation to maintain peripheral attention without being distracting.
• Menu bubble toggle: The mobile "Menu" button transitions border-color and background on open/close via --transition-color.
• Marquee strips: Below-fold logo or testimonial carousels use infiniteScroll for perpetual horizontal motion at constant velocity, common in startup landing pages.

Imagery Style

• Primary visual: Product-in-context lifestyle photography—a hand holding a smartphone displaying the branded payment interface. Shot with shallow depth of field (background bokeh suggests warm interior lighting, possibly restaurant ambiance).
• Subject matter: Human hand (diverse skin tone) gripping phone naturally, screen facing viewer, showing realistic merchant UI ("Tony's" storefront example). Demonstrates real-world usage context.
• Color temperature: Warm amber/orange ambient tones in the photograph's background, contrasting coolly with the phone screen's dark UI and the page's neutral canvas. This warmth subtly evokes hospitality industry (restaurants/bars).
• Treatment: Photograph is unfiltered and naturalistic—no heavy Instagram-style grading, no duotone overlays. It serves as documentary evidence of the product existing in the wild.
• Composition rule: Phone held at slight angle (dynamic, not rigidly frontal), thumb visible interacting with screen, conveying usability and tactile realism.
• Overlay strategy: The floating UI panel (file upload widget) is composited onto the photograph in a "picture-in-picture" arrangement, demonstrating layerable customization without obscuring the core product view.
• Role: Image supports rather than dominates—the headline and CTA remain the conversion drivers; the photo proves the premise ("this works on actual devices").
• Future imagery: Based on system constraints, additional imagery would likely follow this pattern: device mockups with warm-lifestyle backdrops, merchant environment shots, food/hospitality contextual photography, all untreated and naturalistic.
• Iconic/graphic inserts: The Sunday logo mark (pink scribble/circle) appears as a small brand lockup in the header—playful, hand-drawn energy contrasting with the system's otherwise precise geometry.

Icon System

• Library: Custom SVG icons. No detection of Lucide, Heroicons, Material, Bootstrap, or Font Awesome in the extracted stylesheet or font declarations. Icons appear to be inline SVGs or a custom sprite sheet.
• Specific icons observed:
  • Chevron/down-arrow (▾): Appears beside "Take payments" and "Power your business" navigation items indicating dropdown menus.
  • Arrow-right (→): Appears beside "Login" text indicating external navigation or forward action.
  • Social icons: Inside the phone mockup's demo UI—Instagram camera, X/Twitter bird, Facebook f, and a link-chain icon representing merchant social connection points.
  • Close/X icon (×): Visible on the floating UI panel's dismiss control.
  • Upload/file icon: Implied in the "Tonys.png" floating panel context (filename display suggests file-type association).
  • Globe/language icon: Detected in header language-selector area (iti__selected-country class suggests internationalization control).
  • Hamburger/menu: Likely present on mobile breakpoint (class mobile-header-bar implies collapsible menu trigger).
• Treatment: Stroke-based appearance for outlined icons (chevrons, arrows, social outlines), likely 1.5–2px stroke weight. Color generally currentColor inheriting from parent text color ({colors.ink} on light surfaces, {colors.on-dark} in demo UI).
• Size alignment: Navigation chevrons and arrows appear to be 12–14px tall, matching {typography.caption} cap height. Social icons inside the phone mockup are approximately 20px, aligned with {typography.body-sm}. The logo mark (pink scribble) is approximately 24–28px, sized as a brand lockup element alongside wordmark.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Astro (static-first) — Sunday's URL structure and meta markup suggest a modern React/meta-framework foundation with SSR/SSG for SEO-critical landing content.
- Styling:        CSS Modules or vanilla CSS with custom properties — Tailwind was not detected (tailwindLikely: false); the specificity patterns suggest scoped CSS or BEM-like class naming (fleximodule__molecule, button-primary).
- Fonts:          Self-hosted WOFF2 for Helvetica Neue (proprietary license) + Google Fonts CDN for Rubik (free). Fallback chain: "Helvetica Neue", "Inter", "Arial", sans-serif for display; "Rubik", "DM Sans", sans-serif for body.
- Animation:      CSS @keyframes for declared animations (wiggle, spark, appear, etc.) + Framer Motion or GSAP for scroll-triggered orchestration (IntersectionObserver-based reveals). The cubic-bezier(0.16, 1, 0.3, 1) easing should be defined as a shared JS/CSS constant.
- Icons:          Custom SVG inline components (React components or <symbol> sprite) — no external library detected. Build a small internal set covering chevrons, arrows, social platforms, close, upload.
- Component lib:  Custom components (no shadcn/Radix detected). Consider Radix Primitives for dropdown/disclosure patterns if accessibility compliance required for nav menus.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | ≤640px | Single-column stack; phone mockup scales to ~90vw; navigation collapses to hamburger + slide-out drawer; hero headline reduces to ~40-48px; padding compresses to 48-64px vertical. | | Tablet | 641–1024px | Two-column hero maintained but with reduced mockup width (~45% vs 55% text); navigation may show abbreviated menu or hide secondary items; CTA buttons reduce padding. | | Desktop | 1025–1440px | Full designed layout as captured in screenshot: 50/50 hero split, full nav visible, 120px hero padding, 1440px max container. | | Wide | >1440px | Container centers with auto margins; content does not stretch beyond 1440px; flanking whitespace increases. |

Touch Targets

• {component.button-primary}: Height ~52px (16px padding top + 16px padding bottom + ~20px text line-height + 2px border approximation). Exceeds WCAG AAA 44×44px minimum comfortably. Width ~160px+ (28px padding × 2 + text). Excellent touchability.
• {component.button-login}: Height inherits line-height (~24px) plus vertical padding; may fall short of 44px minimum. Recommend increasing vertical padding to 12px on mobile to ensure 48px total height.
• {component.text-input}: Height ~52px (16px × 2 padding + 20px line-height approximate). Meets touch target guidelines.
• {component.button-bubble}: Height ~20px (caption font 13px + minimal padding). Fails 44px minimum. Must be enlarged for mobile or wrapped in a larger tap area (invisible padding expansion).
• Nav links: Height dependent on 72px navbar container minus internal spacing; likely adequate if navbar padding distributes properly. Test with actual finger sizing.

Collapsing Strategy

• Navigation: The mobile-header-bar class indicates a dedicated mobile nav treatment. Expect the full horizontal menu to collapse into a hamburger-triggered off-canvas drawer or fullscreen overlay. Dropdown menus ("Take payments ▾") become accordion sections within the drawer.
• Hero columns: Split-screen hero stacks vertically on mobile: phone mockup moves above headline (visual impact first) or below (copy-first pattern). Given the "show, then tell" narrative, mockup-on-top is more likely.
• Phone mockup scaling: Device frame reduces from ~500px wide (desktop) to ~320px wide (mobile), maintaining aspect ratio. Shadow intensity may reduce on small screens to prevent heavy visual weight.
• Floating UI panel: The file-upload popover overlaying the phone mockup may hide on mobile (insufficient screen real estate) or reposition to below the phone frame as a separate card.
• Typography scaling: {typography.display-lg} drops from 64px to approximately 40–48px on mobile (using clamp() responsive typography). Letter-spacing reduces proportionally to avoid over-tightening at smaller sizes. {typography.title-brand} ("Branding") may drop to 24–28px.
• CTA button sizing: {component.button-primary} becomes full-width on mobile (width: 100%, max-width: 340px centered) for thumb-friendly tap area regardless of text length.

Image Behavior

• Hero phone mockup: Uses object-fit: contain within its container, scaling down proportionally. At mobile, the image width matches the column width minus gutters (~90% of viewport). No cropping occurs—full device frame always visible.
• Photography quality: The lifestyle photo inside the phone should serve a 2x retina source (@2x or srcset) to ensure sharpness on high-DPI phones where the mockup itself is being viewed.
• Lazy loading: The phone mockup image should lazy-load (loading="lazy" or IntersectionObserver) since it sits below the initial viewport fold on slower connections. The headline and CTA (text) render immediately; the visual proof loads progressively.

Iteration Guide

1. Scaffold with Next.js/Astro using the {colors.canvas} white background globally. Define CSS custom properties for every token in the YAML frontmatter (prefix with --sd-* for namespacing: --sd-color-primary, --sd-radius-pill, etc.). Import fonts: self-host Helvetica Neue WOFF2; load Rubik from Google Fonts <link>.

2. Build the header ({component.top-nav}) at 72px height, max-width 1440px centered. Left-align the Sunday logo (pink scribble + "sunday" wordmark in {typography.body-md}/{colors.ink}). Center the nav cluster with dropdown triggers styled as {component.nav-link}. Right-align {component.button-login} (ghost pill) and {component.button-primary} (black pill "Get a demo").

3. Construct the hero band ({component.hero-band}) with {spacing.section-hero} (120px) vertical padding. Implement a CSS Grid or Flexbox two-column layout: left column for {component.phone-mockup-card}, right column for the text stack. On mobile, use flex-direction: column with appropriate order.

4. Implement the phone mockup as a <figure> or <div> with border-radius: var(--sd-radius-lg), overflow: hidden, and box-shadow: var(--sd-shadow-card). Insert the lifestyle photograph as <img> with display: block; width: 100%. Overlay the {component.floating-ui-panel} using absolute positioning at bottom-left, extending partially outside the phone boundary (negative margin or transform) to recreate the layered effect.

5. Typeset the headline column: {component.new-badge} ("NEW" in {colors.primary}/{typography.label-badge}) + {component.brand-label} ("Branding" in {colors.primary}/{typography.title-brand}) on one line. Then {component.hero-headline} ("Make it yours." in {typography.display-lg}/{colors.ink}). Then {component.hero-subheadline} in {typography.body-md}/{colors.muted}. Then {component.button-primary} ("Get started"). Use gap: var(--sd-spacing-section-md) (32px) between elements.

6. Add scroll-triggered animations: Create a reusable .reveal-on-scroll class that applies opacity: 0; transform: translateY(20px) initially, transitioning to opacity: 1; transform: translateY(0) when .is-visible class is added (via IntersectionObserver). Use transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1). Apply to headline, mockup, and badge sequentially with transition-delay: 0ms, 100ms, 200ms.

7. Define all component variants as separate CSS classes or React component props: button-primary, button-primary-active, button-primary-disabled, button-bubble, button-bubble-active, text-input, text-input-focus. Ensure every variant in the frontmatter has a corresponding stylesheet rule or component export.

8. Responsive refinement: Add a @media (max-width: 640px) block overriding {typography.display-lg} to clamp(36px, 8vw, 48px), reducing hero padding to 64px 0, stacking the hero columns, and making {component.button-primary} width: 100%; max-width: 320px. Test {component.button-bubble} touch target size and expand invisible hit area if needed.

9. Accessibility pass: Verify contrast ratios—{colors.ink} on {colors.canvas} is 21:1 (AAA), {colors.on-dark} on {colors.surface-dark} is 21:1 (AAA), {colors.primary} on {colors.canvas} is approximately 3.1:1 (AA for large text only—acceptable for the 32px brand label, fail for body). Ensure all interactive elements have :focus-visible outlines (2px solid {colors.primary} offset 2px). Confirm aria-expanded on dropdown triggers and aria-label on icon-only buttons.

10. Font substitution setup: If Helvetica Neue licensing is unavailable, declare:

    :root {
      --font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
      --font-body: 'Rubik', 'DM Sans', sans-serif;
    }
    

    Load Inter from https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap. Adjust letter-spacing values slightly if Inter's metrics differ from Helvetica Neue (test at 64px specifically).

Known Gaps

• Hover states: Per the no-hover policy, hover styling for buttons ({component.button-primary} background darkening, nav links underlining, card lift effects) is not documented. Extract these from interaction design specs or infer using standard patterns: darken backgrounds 8-12%, add 1px border, subtle translateY(-1px).
• Loading/skeleton states: No loading indicators, skeleton placeholders, or shimmer effects were extractable. Recommend implementing skeleton screens for the phone mockup (gray rounded rect pulsing) and button disabled-shimmer for async actions.
• Form validation states: Beyond {component.text-input-focus}, error (red border + icon), warning (amber), and success (green checkmark) states are absent. Derive from semantic color tokens once introduced.
• Dark-mode page theme: While extensions.mode: "dark" is assigned (possibly due to dark surfaces within the demo mockup), the actual page background is {colors.canvas} (white). A true dark-mode page variant (inverted canvas/ink, adjusted surfaces) may exist but is not visible in this screenshot.
• Dropdown/megamenu panels: The navigation triggers imply dropdown existence, but panel contents, dimensions, animations, and internal layouts are not captured. Design these as overlays with {colors.canvas} background, 8px shadow, and 16px padding matching the card system.
• Below-fold sections: Content below the hero (features list, pricing table, testimonial strip, FAQ) is not visible. Extrapolate the design system downward using established tokens: alternating canvas/surface-soft bands, {typography.title-md} for section headers, {component.surface-card} for feature tiles.
• Internationalization (i18n): The language selector icon and iti__selected-country class suggest multi-language support, but RTL layout considerations, translated string lengths (affecting button widths), and locale-specific date/currency formatting are not addressed here.
• Pixel-perfect mockup internals: The exact layout of the phone-screen UI (Tony's merchant interface, coral CTA button, menu pricing list) is photographic content, not coded DOM elements. Recreating this precisely requires design asset exports (Figma/Sketch), not CSS inference.
• Custom font availability: Neuebit and Mondwest are declared in @font-face rules but unused in above-fold styling. Their purpose (logo wordmark, decorative display, etc.) cannot be determined from the screenshot alone. They may be required for the Sunday logotype or hidden animated elements.