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

# Factory · Design System

> A quiet monochrome canvas for autonomous software

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

Factory presents agent-native software development through a restrained monochrome interface, centered messaging, and a prominent product demonstration. Structured capability, integration, customer, and editorial sections carry the story before a compact dark footer.

## North star

Keep the page quiet and light, using precise typography, thin borders, and dark product media to make the software itself the visual focus.

## Overview

The page uses a near-white canvas (#f5f5f5) as a continuous backdrop, letting black typography and dark product media create the strongest contrast. The opening is deliberately sparse: a centered mark, uppercase display headline, muted monospace-like supporting line, compact actions, and a command snippet lead into a wide dark software demo. Geist carries the interface throughout, with tightly tracked uppercase display text and quieter, smaller labels; Geist Mono marks technical content. Most sections remain on the same light ground, while pale gray panels, white cards, and fine warm-gray borders distinguish content without introducing strong color bands. Product screenshots and customer marks provide visual evidence rather than decorative imagery. A restrained three-column principles area and modular feature grids give the long page structure; generous blank space around key transitions keeps its compact UI details legible. The footer reverses to near-black.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Factory Mist | `#f5f5f5` | `--color-factory-mist` | surface | Primary page canvas and the continuous background behind most homepage sections. |
| Warm Graphite | `#5c5855` | `--color-warm-graphite` | neutral | Muted body copy, secondary labels, and subdued text links. |
| Carbon Ink | `#020202` | `--color-carbon-ink` | brand | Primary headings, navigation, body text, and high-contrast interface labels. |
| Soft Pewter | `#b8b3b0` | `--color-soft-pewter` | semantic | Fine card and section outlines that separate content without heavy framing. |
| Deep Console | `#0d0d0d` | `--color-deep-console` | surface | Dark software-demo and footer treatment; also appears in a measured gradient. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Raised card surfaces within the otherwise light gray page. |
| Cloud Gray | `#ebebeb` | `--color-cloud-gray` | surface | Sunken section and footer-related surface, including subtle secondary panels. |
| Charcoal Glow | `#1a1a1a` | `--color-charcoal-glow` | surface | Inner tone of the measured dark radial gradient, not a general page background. |
| Soot Brown | `#1f1d1c` | `--color-soot-brown` | surface | Inverse dark surface used for selected sections and cards. |
| Stone Panel | `#ccc9c7` | `--color-stone-panel` | surface | Secondary card surface visible in selected content blocks. |
| Dusty Taupe | `#8a8380` | `--color-dusty-taupe` | neutral | Low-emphasis text, including subdued footer copy. |
| Faded Alloy | `#a49d9a` | `--color-faded-alloy` | neutral | Subtle button and navigation outlines; also appears in measured decorative line patterns. |

### Semantic aliases

`--color-canvas` → `#f5f5f5` (Factory Mist) · `--color-surface` → `#ffffff` (Paper White) · `--color-surface-2` → `#ebebeb` (Cloud Gray) · `--color-surface-3` → `#1f1d1c` (Soot Brown) · `--color-surface-4` → `#ccc9c7` (Stone Panel) · `--color-text` → `#020202` (Carbon Ink) · `--color-text-muted` → `#5c5855` (Warm Graphite) · `--color-border` → `#b8b3b0` (Soft Pewter)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#020202` | `#f5f5f5` | 19.03:1 | AAA |
| `#020202` | `#ffffff` | 20.75:1 | AAA |
| `#020202` | `#ebebeb` | 17.4:1 | AAA |
| `#020202` | `#1f1d1c` | 1.24:1 | fail |
| `#5c5855` | `#f5f5f5` | 6.46:1 | AA |
| `#5c5855` | `#ffffff` | 7.04:1 | AAA |
| `#5c5855` | `#ebebeb` | 5.91:1 | AA |
| `#5c5855` | `#1f1d1c` | 2.38:1 | fail |

### Gradients

- `radial-gradient(rgb(26, 26, 26) 0%, rgb(13, 13, 13) 72%)`
- `repeating-linear-gradient(45deg, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgb(77, 73, 71) 2px, rgb(77, 73, 71) 3px, rgba(0, 0, 0, 0) 3px, rgba(0, 0, 0, 0) 5px)`
- `repeating-linear-gradient(45deg, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgb(164, 157, 154) 2px, rgb(164, 157, 154) 3px, rgba(0, 0, 0, 0) 3px, rgba(0, 0, 0, 0) 5px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 400, 500 | Primary display, headings, navigation, body copy, links, and controls. | Inter |
| Geist Mono | `--font-mono` | webfont | 400 | Technical snippets and compact code-style labels. | IBM Plex Mono |

- **Geist:** Use mostly regular weight; display text is medium, uppercase, and tightly tracked, while interface copy stays restrained.
- **Geist Mono:** Reserve for terminal commands and technical microcopy; measured code styling is uppercase with tight tracking.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60.5px | 500 | 1 | -0.04em | uppercase | Geist | Large uppercase hero slogan and prominent display messaging. |
| h1 | 44px | 400 | 1.12 | -0.025em | — | Geist | Primary section headline and major page-level statements. |
| h2 | 36px | 400 | 1 | -0.02em | — | Geist | Secondary section headings and key content-group titles. |
| h3 | 32px | 400 | 1.1 | -0.035em | — | Geist | Feature, case study, or subsection headings. |
| h4 | 28px | 400 | 1 | -0.02em | — | Geist | Smaller card and nested content headings. |
| body | 16px | 400 | 1.2 | 0 | — | Geist | Standard product, feature, and explanatory copy. |
| caption | 14px | 400 | 1 | 0 | — | Geist | Compact labels and supporting metadata. |
| nav | 12px | 400 | 1 | 0 | — | Geist | Small primary navigation labels. |
| link | 14px | 400 | 1.43 | 0 | — | Geist | Secondary calls to action and text links. |
| code | 12px | 400 | 1 | -0.02em | uppercase | Geist Mono | Uppercase technical labels and command-style snippets. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 8, 12, 14, 16, 19, 20, 24, 36, 40, 48, 80 px.
- Section rhythm 40px · element gap 8px · card padding — · max content width 1392px.

The page is a long, mostly single-column sequence contained within a measured maximum width of 1392px. Navigation spans the top; the hero centers its content, while subsequent sections switch between centered introductions, three-column principles, multi-column feature cards, and two-column case-study or enterprise layouts. A 12-column grid appears in the supported-models area. Section gaps are measured at 40px, with compact element spacing and notably generous blank transitions. Keep alignment purposeful and content density higher within cards than between sections.

## Shape & elevation

- Radius: button `3px` · card `6px` · nav `3px` · xs `3px` · sm `6px` · md `10px` · lg `12px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is largely flat, with no measured shadow system. Separate white cards from the light canvas using fine warm-gray borders and modest rounded corners; dark demo media forms its own strong plane. Use subtle surface changes rather than layered floating panels, and keep component edges crisp.

## Imagery

Use real product-interface imagery as the main visual proof: dark screenshots, dashboard panels, and a wide in-page demo video. Feature tiles pair interface captures with concise descriptions; customer logos sit together in a restrained grid. The CTA uses a dark image treatment. Keep imagery rectangular and contained, with minimal ornament; do not mistake interface screenshot colors for the site-wide palette.

## Components

### Top navigation

A slim horizontal header on the light canvas, with the Factory mark at left and compact dark links and outlined sales action at right.

### Hero actions

Centered download and contact-sales controls beneath the headline; compact rectangular buttons use restrained outlines or dark fills.

### Command snippet

A small, pale code-style strip under the hero actions, set apart from the headline and using monospace technical text.

### Product demo

A wide, near-black software demonstration panel with dense interface content, contrasting sharply against the open gray canvas.

### Principles cards

Three aligned white cards for Control, Governance, and Value, with fine #b8b3b0 borders and compact explanatory copy.

### Feature cards

A multi-column collection of dark product screenshots, short titles, and muted explanatory text on the light page.

### Footer

A dark, three-column link area with the brand mark and compact legal and social details.

### Measured component styles

- **Primary button** (“DOWNLOAD”): background #101010 · text #020202 · border 1px solid · radius 3px · padding 0px 14px · 400 16px Geist
- **Secondary button** (“CONTACT SALES”): transparent background · text #020202 · border 1px solid #a49d9a · radius 3px · padding 0px 14px · 400 16px Geist
- **Link** (“Analytics Track adoption and consumption”): transparent background · text #020202 · radius 0px · padding 0px · 400 16px Geist
- **Card** (“How Comarch Is Building Its Own Software”): background #ffffff · text #020202 · radius 6px · padding 0px · 400 16px Geist
- **Navigation item** (“Factory Product Enterprise Pricing News ”): transparent background · text #020202 · radius 0px · padding 0px · 400 16px Geist

## Do

- Keep the main canvas near-white and visually quiet.
- Use near-black for prominent headings and product demonstrations.
- Use Geist for interface and editorial text.
- Reserve Geist Mono for technical snippets.
- Separate cards with fine measured gray borders.
- Let product screenshots provide the strongest dark areas.
- Use restrained, compact controls and labels.

## Don't

- Do not add vivid accent colors absent from the defining page treatment.
- Do not apply gradients as a general page background.
- Do not add decorative shadows or floating-card effects.
- Do not make every section a dark band.
- Do not enlarge navigation or metadata into prominent display text.
- Do not treat colors inside product mockups as global brand colors.

## Agent prompt

Build a new page in Factory’s restrained, technical visual style. Use Factory Mist (#f5f5f5) as the main canvas, Carbon Ink (#020202) for headings and navigation, and Warm Graphite (#5c5855) for secondary copy. Set interface and editorial typography in Geist, with Geist Mono for code-like details. Keep the layout within the measured 1392px maximum width; combine centered introductions with orderly grids and generous separation between sections. Use white cards with fine Soft Pewter (#b8b3b0) borders, and reserve Deep Console (#0d0d0d) or Soot Brown (#1f1d1c) for product media and select inverse surfaces. Favor real interface captures over decorative illustrations. Keep controls compact, corners subtly rounded, and elevation flat. Avoid unsupported colors, shadows, and excessive dark section backgrounds.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Full-width header with brand at left and compact navigation aligned right. | Primary navigation, Sales contact shortcut | Light canvas, Small labels, Outlined action |
| 2 | hero | Centered hero actions above a wide, full-bleed dark product demonstration. | Download action, Contact sales, Command copy affordance | Uppercase display headline, Monospace snippet, Dark demo panel |
| 3 | logo-cloud | Four-column logo arrangement on the continuous light background. | Customer credibility | Compact logo grid, Muted monochrome marks |
| 4 | feature-grid | Centered introduction followed by three aligned cards. | Capability overview | White cards, Fine borders, Compact card copy |
| 5 | feature-split | Wide section with explanatory copy beside a dense model grid. | Model choice, Provider flexibility | Pale panel, Model labels, Subtle accent marker |
| 6 | product-grid | Left-aligned introduction above a multi-column grid of product cards. | Feature discovery, Learn-more links | Dark product screenshots, Short titles, Muted descriptions |
| 7 | integrations | Split section with heading and copy beside an integration-mark grid. | Stack compatibility | Integration logos, Two-column composition |
| 8 | video | Two-column case study with text and media. | Watch case study, Customer proof | Editorial quote, Media thumbnail, Compact action |
| 9 | testimonials | Wide testimonial area with repeated customer content and controls. | Testimonial browsing, Carousel controls | Customer imagery, Compact navigation controls |
| 10 | feature-split | Two-column enterprise section with copy and supporting links. | Enterprise discovery | Editorial text block, Grouped links |
| 11 | feature-grid | Centered introduction with four-column supporting content. | Trust reassurance | Credential labels, Compact grid |
| 12 | how-it-works | Left-aligned heading and explanatory text with two-column use-case content. | Use-case exploration, Numbered scenarios | Ordered labels, Compact feature links |
| 13 | content-feed | Editorial feed with compact article cards and a news link. | Browse news, Open case studies | Article thumbnails, Compact card titles |
| 14 | cta | Single prominent CTA composition within the light page. | Start building | Dark image panel, Short headline, Compact light action |
| 15 | footer | Dark footer organized into three link columns, with brand and legal details. | Resource navigation, Legal links | Near-black surface, Compact text, Brand mark |

## Source CSS custom properties (selected)

```css
--radius: .375rem;
--font-pixel: "Geist Pixel Square",ui-monospace,monospace;
--accent-100: #ef6f2e;
--accent-200: #ee6018;
--accent-300: #d15010;
--dark-base-primary: #020202;
--dark-base-secondary: #101010;
--light-base-primary: #eee;
--light-base-secondary: #fafafa;
--surface-sunken: #ebebeb;
--surface-page: #f5f5f5;
--surface-raised: #fff;
--font-japanese: "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
--color-background: #f5f5f5;
--color-foreground: #020202;
--color-dark-base-primary: #f5f5f5;
--color-dark-base-secondary: #ebebeb;
--color-light-base-primary: #020202;
--color-light-base-secondary: #101010;
--color-base-100: #1f1d1c;
--color-base-200: #2e2c2b;
--color-base-300: #3d3a39;
--color-base-400: #4d4947;
--color-base-500: #5c5855;
--color-base-600: #8a8380;
--color-base-700: #a49d9a;
--color-base-800: #b8b3b0;
--color-base-900: #ccc9c7;
--color-base-1000: #d6d3d2;
```

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