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

# FlutterFlow · Design System

> A dark canvas for building apps visually

**Theme:** dark · **Industry:** devtools · **Source:** https://flutterflow.io/ · **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._

FlutterFlow pairs a near-black canvas and luminous violet accents with oversized, clean typography. Product interface imagery carries the story, while compact feature modules, customer proof, and clear calls to action guide visitors down the page.

## North star

Keep the page nearly black and let clear typography, real product UI, and restrained violet accents do the explaining.

## Overview

The page is anchored by an almost-black violet canvas (#060311), with white headings and subdued gray supporting copy creating a crisp, high-contrast hierarchy. Violet accents appear in key calls to action and interface details, while deep-purple gradients add depth to selected cards and testimonial panels; the page itself stays visually dark and consistent. Urbanist gives display headings a rounded, modern character, while Inter handles body copy and navigation with restrained clarity. The hero centers a large promise above a prominent editor screenshot, making the product the primary visual. Below it, centered section headings alternate with two- and three-column feature layouts, deployment device mockups, code imagery, gallery tiles, and customer proof. Generous vertical breathing room separates these modules, while their internal content remains compact. Cards are defined mostly by subtle dark borders and rounded corners rather than pronounced shadows. White pill-shaped navigation and CTA controls provide distinct, legible interaction points.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#060311` | `--color-midnight-canvas` | brand | Dominant page background across the hero and every major section. |
| Soft Ash | `#a8a7ac` | `--color-soft-ash` | neutral | Primary muted body copy on the dark canvas. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Headings, navigation labels, links, and the light hero navigation CTA. |
| Plum Charcoal | `#15121f` | `--color-plum-charcoal` | surface | Subtle card surfaces and low-contrast borders against the canvas. |
| Cool Slate | `#9ba1ae` | `--color-cool-slate` | neutral | Muted footer, navigation, and supporting text. |
| Deep Violet Edge | `#231754` | `--color-deep-violet-edge` | surface | Fine card outlines, notably around customer testimonial panels. |
| Graphite Haze | `#26252d` | `--color-graphite-haze` | surface | Dark gradient or interface panel tone; secondary to the page canvas. |
| Indigo Shadow | `#0f0a2c` | `--color-indigo-shadow` | surface | Deep gradient base within select cards and visual panels. |
| Muted Stone | `#6a6870` | `--color-muted-stone` | neutral | Low-emphasis supporting text. |
| Night Indigo | `#1d134d` | `--color-night-indigo` | surface | Intermediate dark-purple gradient tone on select card treatments. |
| Flow Violet | `#2b167c` | `--color-flow-violet` | accent | Purple gradient and accent tone in product-focused visuals. |
| Launch Violet | `#321f7f` | `--color-launch-violet` | accent | Companion violet in gradient treatments and highlighted interface details. |
| Navigation Graphite | `#1f1d29` | `--color-navigation-graphite` | surface | Subtle navigation or panel surface detail. |
| Silver Mist | `#b9b8bc` | `--color-silver-mist` | neutral | Minor navigation text detail. |
| Cloud White | `#f3f3f4` | `--color-cloud-white` | neutral | Occasional near-white text detail. |
| Quiet Gray | `#75747b` | `--color-quiet-gray` | neutral | Secondary text detail with restrained contrast. |

### Semantic aliases

`--color-canvas` → `#060311` (Midnight Canvas) · `--color-surface` → `#15121f` (Plum Charcoal) · `--color-text` → `#ffffff` (Clean White) · `--color-text-muted` → `#a8a7ac` (Soft Ash) · `--color-text-subtle` → `#9ba1ae` (Cool Slate) · `--color-border` → `#15121f` (Plum Charcoal) · `--color-accent` → `#2b167c` (Flow Violet) · `--color-accent-2` → `#321f7f` (Launch Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#060311` | 20.41:1 | AAA |
| `#ffffff` | `#15121f` | 18.45:1 | AAA |
| `#a8a7ac` | `#060311` | 8.54:1 | AAA |
| `#a8a7ac` | `#15121f` | 7.72:1 | AAA |
| `#9ba1ae` | `#060311` | 7.88:1 | AAA |
| `#9ba1ae` | `#15121f` | 7.12:1 | AAA |
| `#2b167c` | `#060311` | 1.47:1 | fail |
| `#2b167c` | `#15121f` | 1.33:1 | fail |

### Gradients

- `linear-gradient(145deg, rgba(15, 10, 45, 0.97) 0%, rgba(30, 20, 80, 0.95) 35%, rgba(55, 30, 160, 0.75) 70%, rgba(80, 50, 200, 0.6) 100%)`
- `radial-gradient(circle farthest-side at 0px 0px, rgba(87, 87, 87, 0.4), rgba(6, 3, 17, 0) 44%)`
- `radial-gradient(rgba(75, 57, 239, 0.15), rgba(0, 0, 0, 0) 70%)`
- `radial-gradient(circle farthest-side at 0px 0px, rgba(87, 87, 87, 0.25), rgba(6, 3, 17, 0) 50%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter Variable | `--font-body` | webfont | 400, 500, 600 | Body, navigation, captions, links, buttons, and feature copy. | Inter |
| Urbanist Variable | `--font-display` | webfont | 500, 600 | Display and large section headings, plus prominent CTA text. | Urbanist |

- **Inter Variable:** Use regular weights for interface copy, medium for controls, and uppercase with slight tracking for eyebrow labels.
- **Urbanist Variable:** Use medium to semibold weights; keep headings clean, unitalicized, and sentence case.

### Type scale — Golden Ratio (ratio ≈ 1.621, base 14.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 100px | 600 | 1 | 0 | — | Urbanist Variable | Oversized hero display headline. |
| h1 | 72px | 600 | 1 | 0 | — | Urbanist Variable | Primary hero heading and major page titles. |
| h2 | 24px | 500 | 1.3 | 0 | — | Urbanist Variable | Feature and section headings. |
| h3 | 20px | 400 | 1.4 | 0 | — | Inter Variable | Feature-card and supporting subheadings. |
| body | 14.5px | 400 | 1.62 | 0 | — | Inter Variable | Explanatory copy and customer testimonial text. |
| caption | 14px | 400 | 1.43 | 0 | — | Inter Variable | Compact descriptions and small supporting labels. |
| button | 14px | 500 | 1.43 | 0 | — | Inter Variable | CTA and control labels. |
| nav | 14px | 400 | 1.43 | 0 | — | Inter Variable | Header navigation and footer navigation links. |
| link | 16px | 400 | 1.5 | 0 | — | Inter Variable | Inline and resource-card links. |
| eyebrow | 12px | 600 | 1.33 | 0.05em | uppercase | Inter Variable | Uppercase section kicker above a feature heading. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20, 24, 32, 36, 40, 64, 128 px.
- Section rhythm 32px · element gap 10px · card padding 36px · max content width 1288px.

Use a centered content frame with a measured maximum width of 1288px, while letting prominent product visuals span broad areas. The homepage is a long single-column sequence of centered section introductions and modular content grids: two-column feature compositions, three-column integration and collaboration groups, and full-width product showcases. Section spacing is generous relative to the compact body copy. Keep headings centered for most feature bands, use consistent alignment inside cards, and maintain a dense but orderly footer link grid.

## Shape & elevation

- Radius: button `9999px` · card `20px` · nav `29px` · link `20px` · xs `16px` · sm `20px` · md `24px` · pill `9999px`
- Shadow `xl` (nav): `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.25) 0px 25px 50px -12px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page relies more on tonal separation and hairline borders than visible shadow. Cards use dark surfaces against the near-black canvas, with select testimonial borders in deep violet and rounded corners. Screenshots create their own layered depth; keep overlays and floating UI restrained, and reserve stronger visual prominence for CTA controls.

## Imagery

Prioritize crisp screenshots and mockups of the actual visual app builder, including editor panels, mobile previews, code, and deployment devices. Place interface imagery directly beneath or beside concise feature copy, using dark surroundings so detailed UI remains legible. Gallery and customer sections mix varied app screens with compact, polished testimonial cards. Violet UI details are part of the imagery, not a reason to recolor the page.

## Components

### Navigation bar

Compact dark header with logo, centered product links, utility actions, and a white rounded Start for Free CTA.

### Hero

Centered oversized headline and muted supporting line above a violet CTA and wide product-builder screenshot.

### Feature modules

Centered section title followed by two- or three-column descriptions and product UI imagery.

### Product showcase

Large editor, code, or responsive-device mockups framed by generous dark negative space.

### Testimonial cards

Rounded dark panels with white customer quotes and restrained deep-violet outlines or gradient treatments.

### Resource cards

Compact documentation, training, hiring, and template links arranged in a simple row.

### Footer

Dark multi-column navigation with small muted links, grouped by product, resources, community, company, and legal.

### Measured component styles

- **Primary button** (“Start for Free”): background #ffffff · text #060311 · radius 16px · padding 10px 20px · 600 16px Urbanist Variable
- **Link** (“Documentation Review our product documen”): transparent background · text #ffffff · border 1px solid #15121f · radius 20px · padding 40px · 400 16px Inter Variable
- **Card** (“Wendy's We selected FlutterFlow because ”): transparent background · text #ffffff · border 1px solid #231754 · radius 20px · padding 36px · 400 16px Inter Variable
- **Navigation item** (“Product Resources GET STARTED Docs Templ”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Inter Variable

## Do

- Use #060311 as the dominant page canvas.
- Set major headlines in Urbanist and interface copy in Inter.
- Use white for high-priority headings and controls.
- Reserve violet gradients for selective emphasis and product details.
- Show real-looking app-builder interfaces as the main imagery.
- Separate large content bands with generous vertical breathing room.

## Don't

- Do not introduce bright page-wide section backgrounds.
- Do not let gradients overpower the dark canvas.
- Do not replace product UI with unrelated lifestyle photography.
- Do not add heavy drop shadows to every card.
- Do not make supporting copy compete with the main headings.
- Do not crowd the long-scroll page with dense, uniform grids.

## Agent prompt

Build a new FlutterFlow-style page on a #060311 Midnight Canvas. Use Clean White (#ffffff) for crisp headings, navigation, and key controls, with Soft Ash (#a8a7ac) and Cool Slate (#9ba1ae) for secondary copy. Apply Flow Violet (#2b167c) and Launch Violet (#321f7f) sparingly in gradients, CTA emphasis, and interface details; keep dark panels and borders subtle. Set display headings in Urbanist and body, navigation, and controls in Inter. Center section introductions, then arrange concise feature content in modular two- and three-column groups. Make believable product-builder screenshots and app mockups the primary visuals, with generous separation between page bands. Prefer fine borders and rounded cards over strong shadows. Include a clear hero CTA, customer proof, resources, and a compact grouped footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting text above CTA and broad product-builder screenshot. | primary CTA, product preview | large display type, dark canvas, violet button |
| 2 | logo-cloud | Small eyebrow and a horizontal row of customer logos. | social proof | logo strip, muted treatment |
| 3 | feature-grid | Centered title above a three-column feature arrangement with product UI imagery. | feature discovery, product proof | eyebrow, modular cards, screenshots |
| 4 | feature-split | Centered heading and short copy above a wide product interface showcase. | feature explanation, visual proof | full-bleed media, dark interface |
| 5 | integrations | Centered heading above three compact integration feature columns. | integration discovery | three-column cards, interface previews |
| 6 | feature-grid | Centered title with collaboration imagery above three feature columns. | team workflows, collaboration | avatars, comment previews, modular cards |
| 7 | product-showcase | Centered heading and description above phone, tablet, and desktop mockups. | responsive proof, deployment benefit | device mockups, cross-device layout |
| 8 | product-showcase | Centered heading and short supporting copy above a wide code-export interface. | ownership reassurance, export explanation | full-bleed media, code panel |
| 9 | gallery | Centered title above a horizontal gallery of varied app screens and videos. | inspiration browsing | app gallery, mixed previews |
| 10 | testimonials | Centered heading above a multi-column grid of testimonial cards. | customer validation | rounded cards, violet edges, quote text |
| 11 | other | Centered heading above four linked resource cards. | self-serve help, resource navigation | icon cards, arrow affordances |
| 12 | cta | Centered user-count headline and prominent Start for Free button. | conversion CTA, social proof | large centered heading, violet emphasis, rounded button |
| 13 | footer | Brand block and grouped navigation links arranged in six columns. | site navigation, legal access | multi-column links, muted text |

## Source CSS custom properties (selected)

```css
--font-urbanist: "Urbanist Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-inter: "Inter Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--background: #060311;
--foreground: #fff;
--card-foreground: #fff;
--popover-foreground: #fff;
--primary: #4b39ef;
--primary-foreground: #fff;
--secondary: #161320;
--secondary-foreground: #fff;
--muted-foreground: #9ba1ae;
--accent: #161320;
--accent-foreground: #fff;
--border: #161320;
--radius: 1rem;
--background-rgb: 6, 3, 17;
--surface: #060311;
--surface-secondary: #161320;
--surface-tertiary: #1c1c1c;
--surface-alternate: #fff;
```

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