Rowset — Ruled Use-case Grid

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

## Overview

This isolated yellow section turns a product proposition into three concrete workflows. Blue type, underlined links and precise divider lines carry the hierarchy without filled cards or decorative imagery. 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 60px / 60px, weight 600, with -1.5px 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 headline and supporting copy share a two-column introductory row. Beneath it, three comparison columns span a centered 1216px region. At 390px the introduction and all three workflows stack; horizontal rules replace the desktop column separators. The whole mobile section was captured.

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

Each column contains a workflow name, a small uppercase replacement label, tool logos, and three rows explaining the request, written data, and later reuse. A single underlined guide link closes the section.

## Do’s and Don’ts

Preserve the repeated information structure and readable vertical rhythm. Do not treat the displayed vendor logos or replacement claims as permission to reuse them or independently verified comparisons. 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.