---
title: "Rows — AI Data Analyst design system"
variant: extended
source: https://rows.com/product
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/rows-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Rows — AI Data Analyst · Design System

> Warm editorial design for data analysis, made approachable.

**Theme:** light · **Industry:** ai · **Source:** https://rows.com/product · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Rows presents its AI data analyst through a spacious cream canvas, deep plum typography, and vivid yellow calls to action. Product-interface imagery and distinct color-banded feature sections make a complex SaaS tool feel approachable and tangible.

## North star

Use warm cream and deep plum as the quiet foundation, then let yellow bands, crisp headings, and real product UI explain the product.

## Overview

The page builds its identity around a warm cream canvas (#fbf9f0) and deep plum (#3a032d), replacing the cool white-and-blue convention common to data software. Yellow (#ffc800) serves as a high-visibility action color and also defines a full-width collaboration band; pale butter (#fff4cc) gives the AI feature section its own visual chapter. GT Flexa supplies bold, tightly tracked display headings, while Output Sans keeps navigation, descriptions, and controls readable and unshowy. The layout alternates centered hero content with left-aligned feature blocks, using generous vertical breathing room and a broad content frame. Spreadsheet and assistant-interface screenshots do much of the explanatory work, arranged as overlapping product compositions rather than decorative photography. Cards stay restrained: fine warm-gray borders and soft off-white surfaces provide separation without competing with the product. A dark plum integrations section adds contrast and resets the scrolling rhythm.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Plum | `#3a032d` | `--color-deep-plum` | brand | Primary text and headings, navigation, inverse integrations section, and dark announcement strip. |
| Warm Canvas | `#fbf9f0` | `--color-warm-canvas` | surface | Main page background, hero, logo band, report section, templates area, and footer. |
| Signal Yellow | `#ffc800` | `--color-signal-yellow` | accent | Primary CTA fill, collaboration section band, and bright highlights within product compositions. |
| Footer Stone | `#e8e4d9` | `--color-footer-stone` | surface | Muted footer surfaces and subtle tonal divisions near the page end. |
| Buttercream Band | `#fff4cc` | `--color-buttercream-band` | surface | Full-width AI feature section background behind feature cards and dashboard imagery. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Product-preview details and occasional light text or link surfaces, notably in dark areas. |
| Warm Hairline | `#dfdcd5` | `--color-warm-hairline` | semantic | Fine card borders and understated separators against warm pale surfaces. |
| Vanilla Card | `#fffae5` | `--color-vanilla-card` | surface | Pale warm card fill for repeated AI feature cards; treat as a supporting surface, not a main page color. |
| UI Mist | `#f2f2f2` | `--color-ui-mist` | semantic | Minor neutral interface detail, not a defining brand color. |
| Muted Mauve | `#9d8196` | `--color-muted-mauve` | semantic | Occasional button-outline detail; subordinate to plum and yellow. |
| Footer Fog | `#ece9e0` | `--color-footer-fog` | surface | Low-contrast footer surface detail and quiet background variation. |

### Semantic aliases

`--color-canvas` → `#fbf9f0` (Warm Canvas) · `--color-surface` → `#3a032d` (Deep Plum) · `--color-surface-2` → `#fff4cc` (Buttercream Band) · `--color-surface-3` → `#ffffff` (Paper White) · `--color-surface-4` → `#e8e4d9` (Footer Stone) · `--color-text` → `#3a032d` (Deep Plum) · `--color-border` → `#dfdcd5` (Warm Hairline) · `--color-accent` → `#ffc800` (Signal Yellow) · `--color-on-accent` → `#3a032d` (Deep Plum)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#3a032d` | `#fbf9f0` | 16.18:1 | AAA |
| `#3a032d` | `#fff4cc` | 15.49:1 | AAA |
| `#3a032d` | `#ffffff` | 17.06:1 | AAA |
| `#ffc800` | `#fbf9f0` | 1.47:1 | fail |
| `#ffc800` | `#3a032d` | 10.98:1 | AAA |
| `#ffc800` | `#fff4cc` | 1.41:1 | fail |
| `#ffc800` | `#ffffff` | 1.55:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Output Sans | `--font-body` | webfont | 400, 700, 600, 500 | Navigation, body copy, captions, buttons, and links. | Inter |
| GT Flexa | `--font-display` | webfont | 700, 600 | Display and section headings. | Space Grotesk |

- **Output Sans:** Use measured regular and medium weights for utility text, with 600–700 for emphasis; keep tracking neutral and casing natural.
- **GT Flexa:** Bold, compact headline shapes with slightly negative tracking; preserve sentence case and avoid all-caps styling.

### Type scale — Major Third (ratio ≈ 1.289, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 600 | 1.05 | -0.02em | — | GT Flexa | Large hero display headline introducing the AI data analyst. |
| h1 | 48px | 700 | 1.35 | -0.02em | — | GT Flexa | Primary page headline and prominent footer callout. |
| h2 | 36px | 600 | 0.95 | -0.02em | — | GT Flexa | Main feature-section headings. |
| h3 | 32px | 700 | 1.4 | -0.02em | — | GT Flexa | Feature subheads and key supporting product statements. |
| h4 | 24px | 700 | 1.2 | -0.01em | — | GT Flexa | Card headings and smaller section titles. |
| body | 18px | 700 | 1.39 | 0 | — | Output Sans | Emphasized explanatory copy and introductory descriptions. |
| caption | 16px | 400 | 1.3 | 0 | — | Output Sans | Small supporting notes and compact interface descriptions. |
| button | 18px | 400 | 1.4 | 0 | — | Output Sans | Primary CTA and secondary action labels. |
| nav | 18px | 400 | 1.4 | 0 | — | Output Sans | Top navigation links and footer navigation labels. |
| link | 18px | 400 | 1.4 | 0 | — | Output Sans | Text links to product details, templates, and support. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 3, 8, 10, 12, 13, 16, 20, 21, 22, 24, 32, 40 px.
- Section rhythm 108px · element gap 20px · card padding 16px · max content width 1224px.

Use a broad centered content frame capped at the measured 1224px, with spacious vertical section pacing and a 4px-based spacing system. The hero is centered and text-led; most feature sections switch to left-aligned headings beside product imagery in two-column compositions. Alternate cream, butter-yellow, plum, and vivid yellow bands to mark topic changes. Keep card groups structured but airy, and let the template showcase spread into a multi-column horizontal gallery. The footer becomes denser and more grid-like than the rest of the page.

## Shape & elevation

- Radius: button `2px` · card `6px` · media `12px` · link `6px` · xs `2px` · sm `4px` · md `6px` · lg `8px` · xl `12px`
- Shadow `sm` (link): `rgba(0, 0, 0, 0.08) 0px 1px 6px 0px`
- Shadow `sm-2` (card, other): `rgba(0, 0, 0, 0.06) 0px 0px 4px 0px`
- Motion: standard transition `0.3s ease-in-out` on interactive elements.

Favor flat color fields and restrained surfaces over pronounced shadows. Separate cards with the measured warm-gray hairline, using pale cream fills where needed. Interface screenshots may overlap or sit in layered compositions, but keep shadows subtle and reserve visual depth for product framing rather than page-wide decoration.

## Imagery

Use product screenshots as the primary imagery: spreadsheets, charts, AI assistant panels, dashboards, and responsive report views. Keep interfaces bright and legible, often layered together to show how the product works across contexts. Small customer logos and interface icons support credibility and comprehension. Illustration is secondary and appears as a playful footer accent; avoid substituting lifestyle photography or glossy 3D imagery for the product UI.

## Components

### Announcement strip

A narrow deep-plum strip above the main navigation, with small centered notice text and compact icons.

### Primary CTA

Signal Yellow (#ffc800) fill, Deep Plum (#3a032d) label, and a crisp near-square 2px corner radius.

### AI feature cards

Repeated pale Vanilla Card (#fffae5) panels with warm-gray borders, plum text, and compact orange-toned product icons.

### Product UI composition

Layered spreadsheet and AI assistant screenshots, arranged side-by-side or overlapping to demonstrate real workflows.

### Integrations band

Full-width Deep Plum (#3a032d) section with white or light interface cards and integration logos breaking across the composition.

### Template gallery

Horizontally presented report-preview cards on the warm canvas, paired with a yellow-outlined templates action.

### Footer link grid

Warm, restrained footer with a brand callout, compact grouped navigation, and a small illustrative accent.

### Measured component styles

- **Primary button** (“Continue with Superhuman Docs”): background #ffc800 · text #3a032d · radius 2px · padding 0px 24px · 400 16px Output Sans
- **Secondary button** (“View all Templates”): transparent background · text #3a032d · border 2px solid #ffc800 · radius 0px · padding 12px 30px · 400 18px Output Sans
- **Link** (“Instagram Page Analytics Dashboard”): background #ffffff · text #0000ee · radius 6px · padding 0px · 400 18px Output Sans · shadow rgba(0, 0, 0, 0.08) 0px 1px 6px 0px
- **Card** (“Turn words into reports Use AI to import”): background #fffae5 · text #3a032d · border 1px solid #dfdcd5 · radius 12px · padding 0px 32px · 400 18px Output Sans
- **Navigation item** (“Product Rows AI Your number crunching si”): transparent background · text #3a032d · radius 0px · padding 0px · 400 16px Output Sans

## Do

- Use Warm Canvas (#fbf9f0) as the main page ground.
- Set major headings in bold GT Flexa-style display typography.
- Use Deep Plum (#3a032d) for core text and dark section contrast.
- Reserve Signal Yellow (#ffc800) for primary actions and distinct section emphasis.
- Show real dashboard and assistant UI as the main explanatory imagery.
- Give each feature chapter a clear background band and generous breathing room.

## Don't

- Do not make the page feel like a generic blue enterprise dashboard.
- Do not use gradients as a substitute for the measured flat color bands.
- Do not crowd the hero with competing text or interface elements.
- Do not add heavy shadows or thick decorative borders to ordinary cards.
- Do not let supporting illustration colors redefine the brand palette.
- Do not replace product screenshots with unrelated lifestyle photography.

## Agent prompt

Build a new SaaS page in the Rows visual style. Use Warm Canvas (#fbf9f0) for the main ground and Deep Plum (#3a032d) for headings, navigation, and dark contrast sections. Use Signal Yellow (#ffc800) for the primary CTA and occasional full-width emphasis, and Buttercream Band (#fff4cc) for a feature chapter. Pair bold, slightly tight display headings with clean, neutral sans-serif body copy. Keep the hero centered and spacious, then use left-aligned two-column feature sections with real dashboard or assistant UI imagery. Create a clear scroll rhythm through alternating flat color bands, restrained warm-gray borders, and mostly flat cards. Keep the page content broad but controlled, use product visuals to explain functionality, and avoid gradients, heavy shadows, or generic blue SaaS styling.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline, supporting copy, actions, and a wide product preview below. | Primary signup action, Product video link | Centered bold headline, Yellow CTA, Spreadsheet and assistant preview |
| 2 | product-showcase | Wide, centered product-interface imagery within the cream canvas. | Show the workflow in context | Spreadsheet preview, Assistant panel, Overlapping interface layers |
| 3 | logo-cloud | Centered short heading with a horizontal row of customer logos. | Social proof | Compact logo row, Open cream background |
| 4 | feature-split | Butter-yellow band with heading and feature cards on one side, product view on the other. | Feature discovery, Learn-more link | Buttercream section background, Stacked feature cards, Dashboard and assistant preview |
| 5 | integrations | Full-width plum section with a two-column collage of interface cards and integration marks. | Integration discovery, Explore integrations link | Dark plum band, Light cards, Floating platform icons |
| 6 | feature-split | Cream section with report imagery and a separate explanatory text column. | Explain sharing benefits | Product report preview, Two-column text and media |
| 7 | feature-split | Bright yellow band with explanatory text alongside a large collaboration interface. | Collaboration explanation | Signal Yellow background, Dashboard screenshot, Small decorative illustration |
| 8 | gallery | Cream-background heading and action beside a horizontal row of report-template previews. | Browse templates, Open template previews | Outlined yellow action, Template cards, Horizontal gallery |
| 9 | footer | Brand callout above grouped link columns, set on the warm canvas. | Grouped site navigation, Support and legal links | Prominent brand panel, Multi-column link grid, Small playful illustration |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/rows-com