Rowset — Pricing Page

---
version: alpha
name: Rowset — Pricing 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: 96px
    fontWeight: 600
    lineHeight: 96px
  body:
    fontFamily: InterVariable, Inter, ui-sans-serif, system-ui, sans-serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
---

## Overview

A yellow masthead communicates the trial-to-paid offer in one large statement. Two plan cards beneath use contrasting white and blue surfaces. A pale lavender capability strip and a quiet white FAQ complete the comparison before the blue 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 96px / 96px, weight 600, with -2.4px 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 desktop the pricing cards sit side by side in a centered content region. The hero heading uses 96px type; mobile wraps it into several readable lines and stacks content vertically. The inspected mobile opening shows the start of the trial card; lower mobile content was not captured in this viewport.

## 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

Use visible plan names, large prices, short feature bullets and bottom-aligned full-width actions. The paid card pairs a yellow action with white copy on blue. The FAQ presents questions and answers openly, not as an inferred accordion.

## Do’s and Don’ts

Keep the offer legible before the feature list and preserve contrasting plan surfaces. Prices are the captured October 8 state, not permanent terms. Do not imply checkout or billing behavior was tested. 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.