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

# Programa · Design System

> A calm, editorial canvas for design-studio software.

**Theme:** light · **Industry:** saas · **Source:** https://programa.design/ · **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._

Programa pairs an airy, warm-neutral canvas with editorial typography and detailed software imagery. The homepage leads with a centered product promise, then alternates feature showcases, designer stories, press, and a restrained trial CTA.

## North star

Keep the interface quiet and editorial, letting refined typography and authentic design-work imagery carry the page.

## Overview

The page uses white as its dominant canvas, softened in the screenshot by warm off-white imagery and subtle neutral section treatments. Near-black headings and body copy provide clear contrast, while muted taupe handles supporting text and fine pale borders quietly separate cards and controls. A small lemon-yellow CTA and occasional green announcement details act as restrained highlights rather than a broad color system. Rhymes Display gives the main headlines a light, elegant editorial character; Inter keeps navigation, body copy, labels, and buttons practical and legible. The centered hero gives way to spacious feature cards and alternating product-image splits, followed by a dark testimonial panel, a studio gallery, support stories, and press cards. Product UI captures and interior photography provide the visual richness, framed by generous whitespace and mostly subtle elevation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, light buttons, and open space surrounding product and editorial sections. |
| Studio Taupe | `#7b736c` | `--color-studio-taupe` | neutral | Muted copy, captions, badges, and secondary supporting text. |
| Soft Ink | `#1a1916` | `--color-soft-ink` | brand | Display headlines, navigation, and primary text on light backgrounds. |
| Limestone Line | `#eeece6` | `--color-limestone-line` | neutral | Fine card, media, badge, and footer separators. |
| Citrus Signal | `#fdffa2` | `--color-citrus-signal` | accent | Small standout trial CTA in navigation and selected conversion moments. |
| Warm Paper | `#f8f6f3` | `--color-warm-paper` | surface | Soft section and control surface against the white canvas. |
| Gallery Black | `#000000` | `--color-gallery-black` | semantic | Inverse media panel and occasional dark surface behind light text. |
| Charcoal Button | `#2b2926` | `--color-charcoal-button` | brand | Primary dark Get started buttons with white label text. |
| Footer Mist | `#e5e3e2` | `--color-footer-mist` | neutral | Subtle footer boundary and low-emphasis divider treatment. |
| Botanical Green | `#064e3b` | `--color-botanical-green` | accent | Rare green text accent; keep limited to small highlight details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f6f3` (Warm Paper) · `--color-surface-2` → `#000000` (Gallery Black) · `--color-text` → `#1a1916` (Soft Ink) · `--color-text-muted` → `#7b736c` (Studio Taupe) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#eeece6` (Limestone Line) · `--color-accent` → `#064e3b` (Botanical Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1916` | `#ffffff` | 17.58:1 | AAA |
| `#1a1916` | `#f8f6f3` | 16.3:1 | AAA |
| `#1a1916` | `#000000` | 1.19:1 | fail |
| `#7b736c` | `#ffffff` | 4.66:1 | AA |
| `#7b736c` | `#f8f6f3` | 4.32:1 | AA-large |
| `#7b736c` | `#000000` | 4.51:1 | AA |
| `#ffffff` | `#f8f6f3` | 1.08:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#064e3b` | `#ffffff` | 9.72:1 | AAA |
| `#064e3b` | `#f8f6f3` | 9.01:1 | AAA |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 0%, rgb(238, 236, 230) 83.89%)`
- `radial-gradient(rgba(245, 243, 239, 0.9) 0%, rgba(245, 243, 239, 0.6) 40%, rgba(0, 0, 0, 0) 70%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500 | Navigation, body copy, buttons, captions, labels, and card content. | Inter |
| Roboto Mono | `--font-mono` | system | 400, 500, 600 | Small metadata and uppercase code-like labels. | IBM Plex Mono |
| Rhymes Display | `--font-display` | webfont | 300 | Large hero and section headings. | Cormorant Garamond |

- **Inter:** Mostly regular weight with occasional medium emphasis; sentence case, compact labels, and neutral tracking.
- **Roboto Mono:** Use sparingly for compact, uppercase utility details rather than prominent headings.
- **Rhymes Display:** Light-weight serif display with tight tracking and graceful, editorial line breaks.

### Type scale — Perfect Fourth (ratio ≈ 1.303, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 300 | 1.07 | -0.025em | — | Rhymes Display | Largest editorial statements and prominent promotional headings. |
| h1 | 44px | 300 | 1.14 | -0.005em | — | Rhymes Display | Primary hero headline. |
| h2 | 36px | 300 | 0.94 | -0.006em | — | Rhymes Display | Major section headings, including feature and CTA introductions. |
| h3 | 24px | 500 | 1.25 | 0 | — | Inter | Feature titles and prominent card headings. |
| h4 | 20px | 500 | 1.4 | 0 | — | Inter | Secondary card and content headings. |
| body | 16px | 400 | 1.5 | 0 | — | Inter | Descriptions, paragraphs, and general interface copy. |
| caption | 12px | 400 | 1.33 | 0 | — | Inter | Image metadata, testimonials, and compact supporting details. |
| button | 12px | 400 | 1.4 | 0 | — | Inter | Short CTA labels and compact control text. |
| nav | 14px | 400 | 1.43 | 0 | — | Inter | Header navigation labels. |
| link | 12px | 400 | 1.4 | 0 | — | Inter | Small inline or secondary action links. |
| code | 12px | 400 | 1.67 | 0 | uppercase | Roboto Mono | Occasional uppercase utility or metadata labels. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 6, 8, 10, 12, 16, 20, 24, 58, 60, 80 px.
- Section rhythm 60px · element gap 12px · card padding — · max content width 720px.

The page favors a centered desktop composition with a measured 720px content max-width, broad whitespace, and comfortable content density. A centered hero and product preview establish the rhythm; feature content shifts into card grids and alternating image/text splits. Gallery and press areas use horizontal visual groupings, while testimonials and conversion sections return to centered alignment. Sections have a clear vertical separation without relying on strong background bands. Keep navigation light and unobtrusive, with content aligned to a consistent central frame.

## Shape & elevation

- Radius: button `6px` · card `8px` · media `6px` · badge `6px` · nav `6px` · link `6px` · xs `4px` · sm `6px` · md `8px` · lg `10px` · xl `12px`
- Shadow `hairline` (card, button, media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.12) 0px 1px`
- Shadow `md` (card, media, button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 2px 8px 0px, rgba(0, 0, 0, 0.08) 0px 1px `
- Shadow `hairline-2` (button): `rgba(0, 0, 0, 0.12) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`
- Shadow `inset` (button): `rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 2px 0px, rgb(24, 24, 27) 0px 0px 0px 1px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.12) 0px 1.18px 2.361px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`
- Shadow `hairline-3` (nav): `rgba(229, 225, 146, 0.8) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 2px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The page is mostly flat, with pale hairline borders defining cards, badges, and media frames. Use restrained shadows to separate interface previews or floating controls from the canvas, not as a persistent card effect. Rounded corners remain subtle and consistent across buttons, cards, badges, and media. Preserve the stronger contrast of the black testimonial panel as a deliberate exception.

## Imagery

Use crisp product-interface captures as the main proof of utility, paired with interior photography that feels lived-in, warm, and professionally composed. Float small interface or material details around the hero as supporting accents, not as decorative clutter. Feature imagery belongs in softly rounded frames and clean card layouts. Keep photo colors natural and muted; dark media panels are occasional contrast moments. Avoid generic stock-tech visuals.

## Components

### Header navigation

Minimal logo-and-link row with regular Inter labels, ample whitespace, and a small lemon-yellow trial action.

### Hero CTA pair

Centered dark Get started button alongside a light Watch our demo control; compact Inter labels and softly rounded corners.

### Feature cards

Six product-feature panels arranged in a grid, pairing short titles and muted descriptions with detailed interface imagery.

### Product feature split

Alternating copy and large software screenshot sections; concise headings and small supporting actions keep the imagery prominent.

### Designer gallery

Horizontal studio-project cards led by interior photography, with compact studio names and muted location or category metadata.

### Testimonial cards

Light neutral review cards with client attribution, short quotes, and subtle outlines; a separate dark quote panel provides contrast.

### Footer

White-to-warm-neutral closing area with brand mark, compact multi-column link lists, and low-emphasis dividers.

### Measured component styles

- **Primary button** (“Watch our demo”): background #ffffff · text #1a1a1a · border 1px solid #ffffff · radius 6px · padding 6px 8px · 400 12px Inter · shadow rgba(0, 0, 0, 0.12) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px
- **Secondary button** (“Get started”): background #2b2926 · text #ffffff · border 1px solid #2b2926 · radius 6px · padding 6px 8px · 400 12px Inter · shadow rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 2p
- **Link** (“All-new Presentations just launched”): transparent background · text #1a1a1a · radius 0px · padding 0px · 400 16px Inter
- **Card** (“Specifications Specifications Goodbye sp”): background #fcfbf9 · text #1a1a1a · radius 8px · padding 0px · 400 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“Interior architecture”): background #fcfbf9 · text #7b736c · border 1px solid #eeece6 · radius 6px · padding 0px 6px · 400 12px Inter
- **Navigation item** (“Features Solutions Pricing Learn Log in ”): transparent background · text #1a1a1a · radius 0px · padding 0px · 400 16px Inter

## Do

- Use the white and warm-paper surfaces as the dominant canvas.
- Set major headlines in a light editorial serif.
- Keep body copy and interface labels practical and compact.
- Use charcoal for the primary CTA and lemon only for selective emphasis.
- Show authentic software screens and interior-design photography.
- Separate content with whitespace, pale borders, and restrained shadows.

## Don't

- Do not introduce saturated accent colors beyond the measured palette.
- Do not make every section a boxed card.
- Do not use heavy shadows or thick borders.
- Do not crowd the hero with competing copy or controls.
- Do not replace editorial photography with generic technology stock images.
- Do not use display serif for dense navigation or long paragraphs.

## Agent prompt

Build a new page in Programa’s calm, editorial SaaS style. Use Gallery White (#ffffff) as the primary canvas, Warm Paper (#f8f6f3) for subtle surface shifts, Soft Ink (#1a1916) for headings and navigation, and Studio Taupe (#7b736c) for supporting text. Reserve Citrus Signal (#fdffa2) for a small, high-intent CTA; use Charcoal Button (#2b2926) for the main action. Set major headlines in a light serif display face and use Inter for practical interface text. Compose a generous centered hero, then alternate product-interface showcases with interior photography and concise copy. Keep cards lightly outlined in Limestone Line (#eeece6), with minimal shadow and softly rounded corners. Maintain whitespace, clear hierarchy, and restrained color throughout.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered editorial headline and copy above paired CTAs, surrounded by product details and a large interface preview. | announcement link, trial CTA, demo CTA | light serif headline, floating product details, large software preview |
| 2 | feature-grid | Centered introduction above a two-row grid of six product feature cards. | feature overview, start trial, watch demo | feature cards, product screenshots, muted descriptions |
| 3 | testimonials | Two-column area featuring a prominent dark testimonial panel. | customer quote, social proof | black media panel, serif quote, supporting image |
| 4 | feature-split | Centered section heading followed by alternating copy-and-interface-image feature rows. | feature discovery, contextual action | alternating split layout, large interface captures, compact text |
| 5 | gallery | Section introduction followed by a horizontal row of interior-project cards. | browse examples, view all | interior photography, project cards, small metadata |
| 6 | team | Centered heading with surrounding portraits, followed by a row of designer testimonials. | watch demo, review testimonials | portrait accents, quote cards, client attribution |
| 7 | content-feed | Left-aligned editorial introduction above layered, image-led press story cards. | browse press stories, select story | large story image, overlapping media cards, editorial labels |
| 8 | cta | Centered closing heading with compact primary and secondary actions. | start free trial, watch demo | large serif heading, minimal CTA row, open whitespace |
| 9 | footer | Brand mark and compact link columns in a broad, lightly divided footer. | navigate product links, navigate company links, navigate resources | multi-column links, brand mark, subtle boundary |

## Source CSS custom properties (selected)

```css
--spacing-spacing-8: 8px;
--spacing-spacing-12: 12px;
--spacing-spacing-16: 16px;
--spacing-spacing-24: 24px;
--spacing-spacing-60: 60px;
--radius-2: 2px;
--text-font-size-xxl: 44px;
--text-font-size-xl: 36px;
--text-font-size-l: 24px;
--text-font-size-s: 16px;
--text-font-size-xs: 14px;
--text-font-size-xxxxl: 80px;
--text-font-size-xxxl: 60px;
--leading-font-line-height-xxl: 50px;
--leading-font-line-height-xl: 34px;
--leading-font-line-height-l: 30px;
--leading-font-line-height-m: 28px;
--leading-font-line-height-s: 24px;
--leading-font-line-height-xs: 20px;
--leading-font-line-height-xxs: 18px;
--leading-font-line-height-xxxxl: 84px;
--leading-font-line-height-xs-s: 22px;
--leading-font-line-height-xxxl: 64px;
--tracking-font-letter-spacing-display-l: -1.5px;
--tracking-font-letter-spacing-display-s: -.2px;
--font-weight-weight-300: 300;
--font-weight-weight-400: 400;
--font-weight-weight-500: 500;
--color-neutral-0: #fff;
--color-neutral-50: #fcfbf9;
--color-neutral-100: #f8f6f3;
--color-neutral-200: #eeece6;
--color-neutral-300: #aaa59c;
--color-neutral-400: #7b736c;
--color-neutral-600: #45403a;
--color-neutral-700: #2b2926;
--color-yellow-light: #fdffa2;
--color-neutral-800: #1a1916;
--color-yellow-hover: #ccca88;
--color-purple-pale: #ddd6fe;
```

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