---
version: alpha
name: Rowset — Blue and Yellow Landing Page
colors:
  primary: '#1313A4'
  brand-yellow: '#FFDD3D'
  white: '#FFFFFF'
  soft-surface: '#F5F5FF'
typography:
  heading:
    fontFamily: '"Space Grotesk", InterVariable, Inter, ui-sans-serif, system-ui,
      sans-serif'
    fontSize: 72px
    fontWeight: 600
    lineHeight: 72px
  body:
    fontFamily: InterVariable, Inter, ui-sans-serif, system-ui, sans-serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
---

## Overview

The page opens with a spacious blue hero and oversized two-line heading. The second line is yellow. A thin horizontal rule separates the headline from the supporting copy and two rectangular calls to action. Alternate yellow, white and pale lavender bands before returning to blue for the final CTA and footer. Captured October 8, 2026, in the public logged-out state.

## Colors

Measured source CSS uses deep blue #1313A4 and yellow #FFDD3D. White and pale lavender #F5F5FF provide quieter supporting surfaces.

## Typography

The inspected primary heading computes to 72px / 72px, weight 600, with -1.8px tracking. Its computed stack is "Space Grotesk", InterVariable, Inter, ui-sans-serif, system-ui, sans-serif. Body text uses the separately sampled token above. Preserve the contrast between large display text and compact utility labels; these are desktop measurements, not fixed phone sizes.

## Layout

At 1440px the main content runs from x=112 to x=1328, approximately 1216px wide. The hero places copy on the left and CTAs on the right beneath the rule. Mobile uses 16px side margins, a collapsed navigation menu, wrapped heading and vertically stacked full-width actions. Later desktop sections use three or four ruled columns; the mobile opening viewport alone does not verify all lower sections.

## Elevation & Depth

Keep surfaces flat with thin divider lines and restrained borders; do not introduce heavy shadows or gradients.

## Shapes

Use square-edged blocks, straight rules and rectangular actions. The visual character comes from the grid rather than rounded pills.

## Components

A square yellow brand tile anchors the blue navigation. The use-case table pairs category headings with logos and repeated ask/write/later rows. A four-step diagram illustrates durable state, followed by capabilities, setup steps, a final conversion band and multi-column footer.

## Do’s and Don’ts

Retain the strong color-block rhythm and generous negative space. Do not replace the ruled grid with floating rounded cards. Adapt the structure using original branding and verified product claims. Static screenshots establish appearance only. Hover, focus, animation and submitted states remain untested. Check keyboard behavior and contrast in any adaptation; this is not a full accessibility audit.