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

# Flox · Design System

> Reproducible environments, rendered with quiet precision.

**Theme:** light · **Industry:** devtools · **Source:** https://flox.dev/ · **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._

Flox pairs a restrained monochrome interface with violet accents and terminal-inspired product visuals. Alternating light and dark sections explain reproducible environments through diagrams, proof points, customer stories, and direct calls to action.

## North star

Make technical content feel precise and approachable by pairing a quiet monochrome canvas with purposeful violet emphasis and real product interface visuals.

## Overview

The page uses a white canvas as the default, punctuated by broad near-black feature bands that make technical diagrams and bright violet details stand out. Purple is used selectively in emphasized headline words, links, interface highlights, and primary actions; it is not a blanket background colour. Geist Sans supplies compact, direct product copy and tightly tracked display headings, while Geist Mono marks code, metadata, and small technical labels. The central layout is a restrained, centered content column with left-aligned copy and split product demonstrations; cards, logo rows, and testimonial grids provide variation without changing the overall rhythm. Product visuals are crisp terminal panels, manifests, and system diagrams rather than lifestyle photography. Soft violet glow appears behind selected hero and interface moments, while borders and shadows remain subtle. Comfortable whitespace separates sections, and rounded controls and panels soften the otherwise precise, engineering-led presentation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Terminal Ink | `#1b1b1b` | `--color-terminal-ink` | brand | Primary text and the full-bleed dark bands that frame product explanations. |
| Canvas White | `#ffffff` | `--color-canvas-white` | surface | Main page canvas, light section backgrounds, and contrasting card surfaces. |
| Signal Violet | `#7b2bff` | `--color-signal-violet` | accent | Prominent links, highlighted headline text, and violet interface details. |
| Quiet Gray | `#9b9b9b` | `--color-quiet-gray` | neutral | Muted supporting copy and subdued technical labels. |
| Mist Gray | `#f3f3f3` | `--color-mist-gray` | surface | Soft card and control surfaces, borders, and low-contrast section details. |
| Bloom Violet | `#af54ff` | `--color-bloom-violet` | accent | Secondary purple emphasis in headings, links, and product illustrations. |
| Slate Gray | `#6e6e6e` | `--color-slate-gray` | neutral | Secondary muted text where stronger contrast than Quiet Gray is needed. |
| Graphite Edge | `#2d2d2d` | `--color-graphite-edge` | semantic | Fine outlines around dark product panels and technical cards. |
| Glow Pink | `#f47bff` | `--color-glow-pink` | accent | Bright end of violet-pink gradients and occasional emphasized interface text. |
| Electric Iris | `#8247ff` | `--color-electric-iris` | accent | Gradient and glow colour seen mainly in product visuals and decorative effects. |
| Lilac Haze | `#f2e9ff` | `--color-lilac-haze` | accent | Pale violet gradient tint used in decorative glow effects. |
| Deep Amethyst | `#3f2b6b` | `--color-deep-amethyst` | accent | Dark violet gradient stop within decorative product artwork. |
| Plum Shadow | `#492388` | `--color-plum-shadow` | accent | Deep purple gradient colour, primarily within illustrations and visual effects. |
| Muted Aubergine | `#472f49` | `--color-muted-aubergine` | accent | Low-visibility dark gradient stop used in decorative artwork. |
| Build Yellow | `#ffd02b` | `--color-build-yellow` | semantic | Terminal status and syntax highlight colour inside product mock-ups, not a core page accent. |
| Soft Charcoal | `#3a3a3a` | `--color-soft-charcoal` | neutral | Occasional secondary text and interface details against light surfaces. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-surface` → `#1b1b1b` (Terminal Ink) · `--color-surface-2` → `#f3f3f3` (Mist Gray) · `--color-text` → `#1b1b1b` (Terminal Ink) · `--color-text-muted` → `#9b9b9b` (Quiet Gray) · `--color-text-subtle` → `#6e6e6e` (Slate Gray) · `--color-border` → `#2d2d2d` (Graphite Edge) · `--color-accent` → `#7b2bff` (Signal Violet) · `--color-accent-2` → `#af54ff` (Bloom Violet) · `--color-accent-3` → `#f47bff` (Glow Pink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1b1b1b` | `#ffffff` | 17.22:1 | AAA |
| `#1b1b1b` | `#f3f3f3` | 15.52:1 | AAA |
| `#9b9b9b` | `#ffffff` | 2.78:1 | fail |
| `#9b9b9b` | `#1b1b1b` | 6.2:1 | AA |
| `#9b9b9b` | `#f3f3f3` | 2.5:1 | fail |
| `#6e6e6e` | `#ffffff` | 5.1:1 | AA |
| `#6e6e6e` | `#1b1b1b` | 3.38:1 | AA-large |
| `#6e6e6e` | `#f3f3f3` | 4.6:1 | AA |
| `#7b2bff` | `#ffffff` | 5.78:1 | AA |
| `#7b2bff` | `#1b1b1b` | 2.98:1 | fail |

### Gradients

- `radial-gradient(closest-side, rgba(123, 43, 255, 0.1) 0%, rgba(244, 123, 255, 0.05) 54%, rgba(255, 255, 255, 0) 100%)`
- `radial-gradient(rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1.6px)`
- `radial-gradient(circle, rgba(130, 71, 255, 0.35), rgba(0, 0, 0, 0) 70%)`
- `radial-gradient(closest-side, rgba(123, 43, 255, 0.48) 0%, rgba(244, 123, 255, 0.2) 50%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GeistSans | `--font-body` | webfont | 400, 600, 500 | Headings, body copy, navigation, buttons, and customer cards. | Inter |
| GeistMono | `--font-mono` | webfont | 400, 600, 500 | Code samples, metadata, compact captions, and technical links. | IBM Plex Mono |

- **GeistSans:** Use measured 600-weight display headings with tight negative tracking; body copy is regular and sentence case.
- **GeistMono:** Keep monospaced details small and regular; use for technical texture rather than long-form prose.

### Type scale — Perfect Fifth (ratio ≈ 1.508, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 600 | 1.04 | -0.05em | — | GeistSans | Large, tightly tracked hero headline with selectively violet-emphasized words. |
| h2 | 29px | 400 | 1.42 | -0.015em | — | GeistSans | Section headlines introducing product capabilities and customer proof. |
| h3 | 18px | 400 | 1.55 | 0 | — | GeistSans | Feature titles, card headings, and smaller supporting section labels. |
| body | 14px | 400 | 1.45 | -0.005em | — | GeistSans | Compact explanatory copy, testimonials, and navigation text. |
| caption | 12px | 400 | 1.5 | 0 | — | GeistMono | Small monospaced metadata, labels, and technical annotations. |
| link | 13.5px | 400 | 1.5 | -0.01em | — | GeistMono | Monospaced inline links and understated technical calls to action. |
| code | 12px | 400 | 1.5 | 0 | — | GeistMono | Terminal commands and code-like product interface content. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 22 px.
- Section rhythm 76px · element gap 12px · card padding 16px · max content width 1040px.

A centered page frame uses a measured maximum width of 1040px, with left-aligned copy and split text/product compositions. The hero balances headline and terminal mock-up; later sections alternate wide white and near-black bands. Feature areas use two- and four-column arrangements, while logos and testimonials form compact grids. Comfortable vertical separation gives each band a clear beginning, with tighter grouping inside cards and diagrams. Keep the overall density moderate and let product proof occupy deliberate, uncluttered space.

## Shape & elevation

- Radius: button `12px` · card `20px` · media `50%` · badge `7px` · nav `6px` · link `12px` · xs `6px` · sm `7px` · md `9px` · lg `11px` · xl `12px` · 2xl `14px` · pill `9999px`
- Shadow `lg` (card): `rgba(20, 20, 40, 0.24) 0px 12px 30px -24px`
- Shadow `lg-2` (card): `rgba(0, 0, 0, 0.6) 0px 18px 44px -28px`
- Shadow `md` (other): `rgba(20, 20, 40, 0.2) 0px 6px 16px -12px`
- Shadow `lg-3` (card): `rgba(0, 0, 0, 0.35) 0px 10px 30px 0px`
- Shadow `inset` (button): `rgba(255, 255, 255, 0.2) 0px -2px 1px 0px inset, rgba(255, 255, 255, 0.1) 0px 4px 16px 0px inset, rgba(0, 0, 0, 0.08) 0px 6px 16px 0px`
- Shadow `inset-2` (button): `rgba(0, 0, 0, 0.08) 0px 6px 16px 0px, rgba(255, 255, 255, 0.2) 0px 4px 16px 0px inset`
- Motion: standard transition `0.3s cubic-bezier(0.61, 1, 0.88, 1)` on interactive elements.

The page is mostly flat, with section colour and thin borders defining structure. Cards and interface panels use restrained shadows for separation, while the dark terminal mock-up gains depth against white. Rounded corners soften cards and controls; avoid stacking multiple pronounced shadows or adding heavy outlines.

## Imagery

Use product interface imagery rather than lifestyle photography: terminal windows, manifests, dependency maps, and workflow diagrams. Keep panels crisp and dark, with restrained code colours and violet highlights. The hero’s terminal mock-up sits opposite the headline; diagrams can spread across dark sections. Customer and company marks appear as compact evidence in grids. Violet radial glows are atmospheric accents, not substitutes for the underlying interface detail.

## Components

### Site navigation

Compact centered header with logo, grouped text links, GitHub proof, and a light rounded Sign in control.

### Hero terminal

Two-column hero pairs oversized headline and copy with a dark terminal panel, syntax highlights, and environment badges.

### Primary CTA

Violet-to-pink filled action with rounded corners and subtle inset/shadow treatment; secondary actions use a light surface.

### Capability diagram

Dark-section diagrams connect a single manifest to multiple targets using fine lines and small monospaced labels.

### Feature cards

Light or dark cards use fine borders, rounded corners, concise headings, and compact supporting copy.

### Customer proof

Logo grid and testimonial cards pair subdued brand marks with short quotes, names, roles, and small violet links.

### Agent CTA panel

Large rounded near-black panel centers a heading, muted copy, and a row of compact outlined agent actions.

### Measured component styles

- **Primary button** (“Ask ChatGPT”): transparent background · text #ffffff · border 1px solid #f3f3f3 · radius 12px · padding 12px 22px · 500 15px GeistSans · shadow rgba(255, 255, 255, 0.2) 0px -2px 1px 0px inset, rgba(255, 255, 255, 0.1) 0px 4p
- **Link** (“@justincormack”): transparent background · text #7b2bff · radius 0px · padding 0px · 400 12px GeistMono
- **Card** (“Laptop your machine sha256: 9f3c2a”): transparent background · text #1b1b1b · border 1px solid #2d2d2d · radius 20px · padding 16px · 400 16px GeistSans
- **Badge** (“python 3.13”): background #2a2a2a · text #bfbfbf · border 1px solid #333333 · radius 6px · padding 4px 9px · 400 11.5px GeistMono
- **Navigation item** (“Features Use Cases Resources Pricing Com”): transparent background · text #020817 · radius 0px · padding 0px · 400 16px GeistSans

## Do

- Use white as the default canvas and reserve near-black for defined feature bands.
- Apply violet to meaningful emphasis, links, and primary actions.
- Set code, labels, and compact technical links in Geist Mono.
- Use real-looking terminal and environment diagrams as product proof.
- Keep section copy left-aligned except for clearly centered enterprise or CTA blocks.
- Separate content with generous whitespace and subtle borders.

## Don't

- Do not turn the whole page into a purple gradient.
- Do not use lifestyle photography in place of product interface visuals.
- Do not use bright yellow as a general brand accent; it belongs in terminal syntax.
- Do not crowd technical diagrams with decorative labels.
- Do not add heavy shadows or thick outlines to every card.
- Do not set long explanatory copy in a monospaced font.

## Agent prompt

Build a new Flox-style page as a precise developer-tools experience. Use Canvas White (#ffffff) for the main canvas and Terminal Ink (#1b1b1b) for text and selected full-width feature bands. Reserve Signal Violet (#7b2bff), Bloom Violet (#af54ff), and Glow Pink (#f47bff) for headline emphasis, links, CTA treatment, and restrained interface glow. Use Geist Sans, or Inter as a free substitute, for headings and prose; use Geist Mono or IBM Plex Mono for code and metadata. Center content within the measured 1040px maximum width, alternating split product demonstrations with compact grids and clear section pauses. Show terminal panels, manifests, or dependency diagrams instead of lifestyle imagery. Keep cards softly rounded, borders fine, and elevation subtle. Ensure every decorative accent supports product clarity.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered navigation above a two-column hero, followed by trust copy and a compact customer logo grid. | Primary and secondary CTA, Customer credibility | Large headline, Terminal mock-up, Violet emphasis, Logo grid |
| 2 | comparison | Left-aligned headline and introduction above two side-by-side environment comparison visuals. | Show the consistency problem, Explain the benefit | Comparison tables, Violet headline accent, Technical diagrams |
| 3 | testimonials | Single wide testimonial card with quote, customer identity, and case-study link. | Social proof, Case-study link | Quote-led card, Customer attribution |
| 4 | how-it-works | Dark two-column section with left-aligned copy and a wide environment-resolution diagram. | Explain the workflow, Show one-to-many targets | Dark band, Manifest diagram, Monospaced labels |
| 5 | timeline | Dark section with introductory copy, a horizontal process row, and a larger delivery interface below. | Stage-by-stage explanation, Connect development to production | Process cards, Flow connector, Code panels |
| 6 | feature-split | White split section with security copy and feature list beside a dark software-bill-of-materials visual. | Security proof, Feature list | Split layout, Terminal visualization, Small violet links |
| 7 | feature-grid | Centered heading and introduction above a four-column capability row and a lower demo CTA. | Scan capabilities, Book a demo | Dark section band, Four feature columns, Violet CTA |
| 8 | testimonials | White section with left-aligned headline, centered metrics, testimonial grid, and community action. | Trust metrics, Customer testimonials, Join community | Compact metric row, Logo and quote cards, Rounded action |
| 9 | cta | Centered dark rounded panel on white canvas with heading, short copy, and three compact actions. | Choose an agent, Direct outbound actions | Dark CTA panel, Centered typography, Outlined buttons |

## Source CSS custom properties (selected)

```css
--inspect-color: red;
--color-black: #1b1b1b;
--color-gray-100: #fafafa;
--color-gray-200: #f3f3f3;
--color-gray-300: #e3e3e3;
--color-gray-400: #bfbfbf;
--color-gray-500: #9b9b9b;
--color-text-muted: #6e6e6e;
--color-orange: #ff7c32;
--color-porpol: #7b2bff;
--color-purple: #711aff;
--color-rose-red: #ff4fae;
--color-rose: #f47bff;
--color-violet: #af54ff;
--color-white: #fff;
--color-yellow: #ffd02b;
--color-blue: #8247ff;
```

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