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

# Fourmula.ai · Design System

> A quiet canvas for AI-made product imagery.

**Theme:** light · **Industry:** ai · **Source:** https://fourmula.ai/ · **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._

Fourmula.ai pairs a restrained editorial homepage with vivid, full-width process demonstrations to present AI-generated product imagery. Oversized black typography, pale modular surfaces, and occasional warm-to-cool gradients keep the product examples central.

## North star

Keep the editorial canvas almost entirely white and let product imagery and isolated gradient workflow bands carry the visual emphasis.

## Overview

The page is predominantly a white canvas, with near-black typography and thin light-gray dividers defining its structure. Pale gray, softly rounded showcase panels distinguish product examples from the surrounding editorial content without introducing heavy card chrome. The accent palette is intentionally concentrated in four process bands: orange, blue-to-orange, violet-to-orange, and red-to-orange gradients. These saturated colors are demonstrative section treatments, not the default page background. Sf Pro Display carries the page with large, regular-weight headlines, tight negative tracking, and compact supporting copy; smaller labels stay understated. Layout alternates between left-aligned editorial headings and two-column feature or workflow arrangements, with generous vertical intervals. Product photography and interface previews sit inside rounded, softly composed media areas. Buttons remain small black capsules with white text. Keep the overall page quiet, and let imagery or the workflow bands provide the strongest color.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas, white text on dark CTA, and bright space around imagery. |
| Near Ink | `#020108` | `--color-near-ink` | brand | Primary headline and body text, links, and black pill-shaped primary buttons. |
| Soft Gallery | `#f7f7f7` | `--color-soft-gallery` | surface | Pale showcase-card and section surfaces behind product demonstrations. |
| Quiet Divider | `#d7d7d6` | `--color-quiet-divider` | neutral | Fine card and section rules separating editorial and FAQ content. |
| Slate Copy | `#5a5a5e` | `--color-slate-copy` | semantic | Muted supporting copy against the white canvas. |
| Process Orange | `#fd7b03` | `--color-process-orange` | accent | Orange endpoint in workflow gradients; concentrated in process demonstration bands. |
| Misted Gray | `#7c7c7f` | `--color-misted-gray` | semantic | Secondary subdued text, including the lighter half of the hero headline. |
| Vermilion | `#f94a00` | `--color-vermilion` | accent | Hot orange gradient stop in workflow imagery, not a general page surface. |
| Studio Blue | `#48a3d1` | `--color-studio-blue` | accent | Cool gradient stop in a workflow band, transitioning toward orange. |
| Oxide Red | `#9a0101` | `--color-oxide-red` | accent | Deep red gradient stop used in a process demonstration treatment. |
| Pale Rule | `#ccccce` | `--color-pale-rule` | neutral | Occasional pale border or link-adjacent hairline. |
| Electric Blue | `#3a54ff` | `--color-electric-blue` | accent | Blue start of a multicolor workflow gradient. |
| Iris Violet | `#7a67c5` | `--color-iris-violet` | accent | Intermediate violet stop in the blue-to-orange workflow gradient. |
| Tangerine | `#fc7303` | `--color-tangerine` | accent | Orange accent appearing in gradient or supporting artwork treatment. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f7f7` (Soft Gallery) · `--color-text` → `#020108` (Near Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#5a5a5e` (Slate Copy) · `--color-border` → `#d7d7d6` (Quiet Divider) · `--color-accent` → `#fd7b03` (Process Orange) · `--color-accent-2` → `#f94a00` (Vermilion) · `--color-accent-3` → `#48a3d1` (Studio Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#020108` | `#ffffff` | 20.78:1 | AAA |
| `#020108` | `#f7f7f7` | 19.4:1 | AAA |
| `#ffffff` | `#f7f7f7` | 1.07:1 | fail |
| `#5a5a5e` | `#ffffff` | 6.87:1 | AA |
| `#5a5a5e` | `#f7f7f7` | 6.41:1 | AA |
| `#fd7b03` | `#ffffff` | 2.62:1 | fail |
| `#fd7b03` | `#f7f7f7` | 2.45:1 | fail |

### Gradients

- `linear-gradient(rgb(249, 74, 0), rgb(253, 123, 3))`
- `linear-gradient(rgb(72, 163, 209), rgb(253, 123, 3))`
- `linear-gradient(rgb(58, 84, 255), rgb(122, 103, 197) 23%, rgb(253, 123, 3))`
- `linear-gradient(rgb(154, 1, 1), rgb(253, 123, 3))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Sf Pro Display | `--font-body` | webfont | 500, 400 | Site-wide display, headings, body copy, labels, and links. | Inter |

- **Sf Pro Display:** Use regular weight for most text and medium for selected headings and labels; large headlines use tight negative tracking and sentence case.

### Type scale — Perfect Fifth (ratio ≈ 1.493, base 13.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 100px | 400 | 1 | -0.03em | — | Sf Pro Display | Oversized hero statement anchoring the opening viewport. |
| h1 | 73px | 400 | 0.94 | -0.03em | — | Sf Pro Display | Primary section and feature headlines. |
| h2 | 53px | 400 | 1 | -0.03em | — | Sf Pro Display | Large editorial headings for product capabilities and FAQs. |
| h3 | 43.5px | 500 | 1.05 | -0.031em | — | Sf Pro Display | Secondary feature headings and workflow titles. |
| h4 | 26.5px | 400 | 0.63 | 0 | — | Sf Pro Display | Compact subheads within the product narrative. |
| body | 13.5px | 400 | 1.25 | 0 | — | Sf Pro Display | Supporting descriptions, navigation labels, and feature copy. |
| caption | 11.5px | 500 | 1.5 | -0.015em | — | Sf Pro Display | Small interface labels, footnotes, and fine-print links. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 5, 7, 10, 12, 13, 20, 23, 27, 33, 40, 67, 133 px.
- Section rhythm 133px · element gap 7px · card padding 67px · max content width 1387px.

Use a spacious, centered page with the measured maximum width of 1387px and predominantly left-aligned editorial headings. The opening viewport gives the imagery and headline room to breathe; later content alternates between a single-column statement, broad product showcase, and two-column features. Four numbered process sections form a strong vertical sequence, each with a large media area. Long section gaps and generous card padding contrast with compact labels. Use thin rules to organize FAQs and content bands rather than dense grids.

## Shape & elevation

- Radius: button `50%` · card `7px` · media `27px` · link `9999px` · xs `1px` · sm `7px` · md `20px` · lg `27px` · xl `33px` · 2xl `40px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The design is mostly flat: no measured shadows, and the white canvas remains uninterrupted across most sections. Pale surfaces and thin gray hairlines provide separation. Rounded media and cards add softness, while the black capsule CTA supplies a compact focal point. Gradient bands create depth through color rather than shadow or layered chrome.

## Imagery

Lead with a floating collage of fashion imagery around a simple upload target. Product showcases mix catalog-like apparel and beauty photographs with screenshots of the generation interface. Images are cropped into rounded, soft-edged media shapes or contained in pale showcase panels. The numbered process bands use media previews over saturated gradients. Keep photography realistic and let product examples, not decorative illustration, explain the service.

## Components

### Primary CTA

Small black capsule with white Get started text; keep it visually distinct without turning it into a large block.

### Editorial feature panel

Pale gray, generously padded showcase surface with rounded corners, product imagery, and a prominent heading.

### Workflow band

Full-width numbered process section using a vivid measured gradient, light copy, and a product-interface preview.

### FAQ row

Large editorial heading beside a stacked list of questions, separated by fine horizontal rules and ending in plus affordances.

### Hero collage

A central upload target surrounded by floating rounded fashion-image tiles, paired with a large two-tone headline.

### Footer panel

Large pale rounded region combining a bold brand mark, compact link columns, legal text, and a subtle patterned lower field.

### Measured component styles

- **Primary button** (“Get started Get started”): background #020108 · text #ffffff · radius 1317.53px · padding 11.6px 20px · 400 14.1402px Sf Pro Display
- **Secondary button** (“fourmula.ai”): background #ffffff · text #000000 · radius 1317.53px · padding 0px · 400 14.4px Arial
- **Link** (“Privacy Policy Privacy Policy”): transparent background · text #020108 · radius 0px · padding 0px · 500 11.6449px Sf Pro Display
- **Card** (“fourmula.ai AI Product Shots Your produc”): background #f7f7f7 · text #333333 · radius 39.9252px · padding 66.5px · 400 14.4px Arial

## Do

- Keep the main canvas white and uncluttered.
- Use near-black for primary text and CTA contrast.
- Reserve saturated gradients for process demonstrations.
- Give headlines generous breathing room and tight tracking.
- Use pale surfaces and hairlines to separate content.
- Let real product imagery explain each capability.

## Don't

- Do not spread accent gradients across ordinary content sections.
- Do not add heavy shadows or layered card chrome.
- Do not crowd the page with dense navigation or copy.
- Do not use decorative imagery that competes with product examples.
- Do not replace the editorial layout with uniform repeated tiles.
- Do not make the CTA oversized or visually loud.

## Agent prompt

Build a new Fourmula.ai-style page as a spacious editorial canvas, not a generic dashboard. Use Gallery White (#ffffff) as the dominant background, Near Ink (#020108) for headlines, links, and compact pill CTAs, Soft Gallery (#f7f7f7) for showcase panels, and Quiet Divider (#d7d7d6) for restrained rules. Set headings in Sf Pro Display or Inter with regular weight and tight negative tracking; keep supporting copy compact and understated. Arrange content in broad left-aligned statements, selective two-column features, and generous vertical intervals. Use realistic product photography in softly rounded media frames. If demonstrating a workflow, reserve saturated gradients such as Process Orange (#fd7b03), Studio Blue (#48a3d1), or Electric Blue (#3a54ff) for those bands alone. Avoid shadows and heavy chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Minimal full-height white opening with centered floating image collage and lower-left headline. | Upload affordance, Scroll cue, Get started CTA | Floating rounded image tiles, Black capsule menu, Two-tone headline |
| 2 | content-feed | Single-column editorial statement with a small side label and oversized heading. | Section introduction | Fine divider, Large headline, White canvas |
| 3 | product-showcase | Broad pale showcase panel with product input, generation interface, and copy. | Capability explanation, Product preview | Soft gray panel, Rounded media, Editorial headline |
| 4 | feature-grid | Two adjacent product feature panels, each combining imagery and concise copy. | Compare capabilities, Explore product imagery | Two-column cards, Rounded image areas, Pale surfaces |
| 5 | comparison | Editorial side label beside stacked, ruled capability statements and CTA. | Capability scanning, Get started CTA | Large type, Horizontal rules, Muted secondary lines |
| 6 | logo-cloud | Short trust strip with a label and evenly arranged brand marks. | Social proof | Small logos, Pale logo tiles, Open spacing |
| 7 | how-it-works | Single-column introduction to a sequence of four full-width workflow sections. | Workflow orientation | Large heading, Compact supporting copy, White space |
| 8 | feature-split | Two-column numbered workflow section with copy and a wide product-interface preview. | Step navigation, Get started CTA | Orange gradient band, Large step number, Interface preview |
| 9 | feature-split | Two-column workflow layout with explanatory copy above a wide generation preview. | Step progression, Concept variation | Blue-to-orange gradient, Large step number, Preview cards |
| 10 | feature-split | Two-column copy and comparison media inside a broad colored process band. | Side-by-side review, Selection | Violet-to-orange gradient, Large step number, Product comparison imagery |
| 11 | feature-split | Numbered process section with explanatory copy and a broad, low-positioned interface preview. | Export workflow, One-click action | Red-to-orange gradient, Large step number, Export interface preview |
| 12 | faq | Large heading in one column beside a vertically ruled accordion list. | Accordion questions, Expand for answers | Oversized headline, Thin separators, Plus affordances |
| 13 | footer | Large rounded pale footer panel with brand at left and compact link groups at right. | Legal navigation, Product links, Social links | Soft gray container, Brand lockup, Dotted decorative field |

## Source CSS custom properties (selected)

```css
--mainbg: #020108;
--_font-family---font-family: "Sf Pro Display", Arial, sans-serif;
--_fonts---h1: 5.5rem;
--_font-family---regular: 400;
--_fonts---h2: 7.5rem;
--_fonts---h3: 3.25rem;
--_font-family---medium: 500;
--_fonts---h4: 2.25rem;
--_fonts---body-1: 1.125rem;
--_fonts---body-2: 1rem;
--_fonts---tag: 1.125rem;
--_fonts---tag-small: 1.125rem;
--_fonts---title-1: 1rem;
--_fonts---title-2: .875rem;
--_fonts---small-text-1: .75rem;
--_fonts---small-text-2: .625rem;
--_fonts---body-3: 1.25rem;
--_fonts---btn: 1.0625rem;
--fonts-100: white;
--menu-colors: #fff3;
--secondbg: #111;
--fonts-50: #ffffff80;
--fonts-30: #ffffff4d;
--fonts-64: #ffffffa3;
--mainbg-gradient: #02010800;
--fonts-20: #fff3;
--_fonts---title-3: 1.5rem;
--_fonts---h2-5: 4rem;
--_font-family---size: 0px;
```

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