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

# FLORA · Design System

> A boundless creative canvas in cinematic black.

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

FLORA presents its generative AI workspace through a dramatic black canvas, crisp typography, and a collage of creative work. Product demonstrations, workflow examples, and editorial proof points build the story from first impression through to conversion.

## North star

Treat pure black as an uninterrupted stage, and let vivid creative work, precise Geist typography, and small green actions provide the hierarchy.

## Overview

The page is anchored by a nearly continuous #000000 canvas, letting interface previews and vivid creative imagery provide most of the visual contrast. #eeeeee carries prominent headlines and key copy; #b4b4b4 and #a7a7a7 recede into navigation, captions, and secondary descriptions. The restrained green #71d083 marks the primary free-start CTA, while #40c575 appears as a smaller link accent. Geist supplies a modern, compact sans-serif voice for navigation, product copy, and controls, contrasted in the hero by an elegant serif wordmark and display treatment visible in the screenshot. The composition alternates open black space with dense media-led demonstrations, workflow cards, model collections, and press or case-study content. Images are framed as floating rounded rectangles and embedded product previews rather than decorative backgrounds, with occasional full-width atmospheric video. Fine dark hairlines define cards without competing with their contents; restrained tonal overlays help text remain legible on media.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Black | `#000000` | `--color-canvas-black` | brand | Dominant page canvas and section background; also anchors dark media overlays. |
| Gallery White | `#eeeeee` | `--color-gallery-white` | neutral | Primary headline and body text, prominent links, and light button surfaces. |
| Soft Silver | `#b4b4b4` | `--color-soft-silver` | neutral | Secondary navigation and muted copy; also appears on outlined control borders. |
| Quiet Gray | `#a7a7a7` | `--color-quiet-gray` | neutral | Supporting descriptions and lower-emphasis text. |
| Hairline Charcoal | `#1c1c1c` | `--color-hairline-charcoal` | surface | Subtle card borders and separators against the black canvas. |
| Footer Gray | `#7b7b7b` | `--color-footer-gray` | neutral | Low-emphasis footer text and secondary controls. |
| Flora Green | `#71d083` | `--color-flora-green` | accent | Primary Get started for free CTA fill with dark text. |
| Panel Charcoal | `#2b2b2b` | `--color-panel-charcoal` | surface | Occasional card and control border tone. |
| Gradient Charcoal | `#262626` | `--color-gradient-charcoal` | surface | Subtle section and button gradient shading. |
| Link Green | `#40c575` | `--color-link-green` | accent | Small accent link text; secondary green highlight. |
| Raised Black | `#111111` | `--color-raised-black` | surface | Slightly lifted card and button surface against the canvas. |
| Paper White | `#f5f5f5` | `--color-paper-white` | neutral | Bright navigation and occasional heading text. |
| Footer Black | `#202020` | `--color-footer-black` | surface | Subtle footer gradient tone, not a distinct main section band. |

### Semantic aliases

`--color-canvas` → `#000000` (Canvas Black) · `--color-surface` → `#111111` (Raised Black) · `--color-surface-2` → `#eeeeee` (Gallery White) · `--color-text` → `#eeeeee` (Gallery White) · `--color-text-muted` → `#b4b4b4` (Soft Silver) · `--color-text-subtle` → `#a7a7a7` (Quiet Gray) · `--color-border` → `#1c1c1c` (Hairline Charcoal) · `--color-accent` → `#71d083` (Flora Green) · `--color-accent-2` → `#40c575` (Link Green) · `--color-on-accent` → `#000000` (Canvas Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#eeeeee` | `#000000` | 18.1:1 | AAA |
| `#eeeeee` | `#111111` | 16.28:1 | AAA |
| `#b4b4b4` | `#000000` | 10.13:1 | AAA |
| `#b4b4b4` | `#111111` | 9.11:1 | AAA |
| `#b4b4b4` | `#eeeeee` | 1.79:1 | fail |
| `#a7a7a7` | `#000000` | 8.73:1 | AAA |
| `#a7a7a7` | `#111111` | 7.85:1 | AAA |
| `#a7a7a7` | `#eeeeee` | 2.07:1 | fail |
| `#71d083` | `#000000` | 11.05:1 | AAA |
| `#71d083` | `#111111` | 9.94:1 | AAA |

### Gradients

- `radial-gradient(rgba(255, 255, 255, 0.15) 0.6px, rgba(0, 0, 0, 0) 1.4px)`
- `linear-gradient(rgba(0, 0, 0, 0) 40%, color(srgb 0 0 0 / 0.85))`
- `linear-gradient(color(srgb 0 0 0 / 0.35), color(srgb 0 0 0 / 0.35) 25%, color(srgb 0 0 0 / 0.9))`
- `linear-gradient(color(srgb 0 0 0 / 0.5), rgba(0, 0, 0, 0) 50%, color(srgb 0 0 0 / 0.5))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 500, 400, 600 | Navigation, headings, body copy, controls, and links throughout the page. | Inter |

- **Geist:** Mostly regular weights; medium and semibold establish hierarchy. Compact tracking appears in navigation and display headings; case remains natural.

### Type scale — Augmented Fourth (ratio ≈ 1.417, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1.2 | -0.03em | — | Geist | Oversized hero headline and prominent showcase titles. |
| h1 | 30px | 500 | 1.37 | -0.017em | — | Geist | Main section headlines and key product statements. |
| h2 | 22px | 600 | 1.2 | -0.03em | — | Geist | Feature-section headings and supporting headline hierarchy. |
| h3 | 21px | 600 | 1.29 | 0 | — | Geist | Workflow, technique, case-study, and editorial card titles. |
| h4 | 20px | 500 | 1.37 | -0.01em | — | Geist | Smaller feature headings and supporting labels. |
| body | 14px | 400 | 1.37 | 0 | — | Geist | Descriptions, explanatory paragraphs, and general interface copy. |
| caption | 12px | 500 | 1.38 | 0 | — | Geist | Compact media labels, metadata, and supporting notes. |
| button | 14px | 400 | 1 | 0 | — | Geist | CTA and utility-button labels. |
| nav | 14px | 400 | 1.29 | 0.029em | — | Geist | Top navigation links and menu items. |
| link | 14px | 500 | 1.43 | 0 | — | Geist | Inline actions and editorial or product links. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 36, 40, 48, 64, 80 px.
- Section rhythm 128px · element gap 8px · card padding 8px · max content width 1280px.

Use a centered content frame capped at the measured 1280px maximum, while letting hero artwork and atmospheric media feel broad and immersive. The page is predominantly single-column black canvas, interrupted by three-column feature or case-study arrangements and denser card collections. Keep generous section pauses, aligned left-edge section headings, and open hero space around the central message. Reserve tighter spacing for product UI, model catalogs, and card interiors; avoid uniform, tightly packed grids across the full page.

## Shape & elevation

- Radius: button `12px` · card `20px` · media `12px` · nav `12px` · link `24px` · xs `12px` · sm `20px` · md `24px`
- Shadow `inset` (link): `rgba(255, 255, 255, 0.11) 0px 0px 0px 1px inset`
- Shadow `inset-2` (nav): `rgb(180, 180, 180) 0px 0px 0px 1px inset`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: black surfaces and fine dark borders define cards instead of heavy shadows. Use measured rounded corners to soften media, cards, and controls, while selected editorial links gain a faint inset white outline. Layer imagery spatially around the hero copy, but preserve clear separation and strong contrast.

## Imagery

Lead with polished creative photography in floating rounded media frames: fashion, beauty, products, portraits, and campaign imagery. Mix stills with product-interface previews and workflow videos to demonstrate the canvas rather than relying on abstract illustration. A full-width atmospheric landscape video provides a rare tonal break; retain dark overlays where copy sits over imagery. Warm image colors belong to the showcased work, not the brand palette.

## Components

### Primary CTA

Green #71d083 rounded button with black text, Geist 14px regular, and compact horizontal padding; label is “Get started for free”.

### Outlined utility button

Transparent dark button with light text and a thin #b4b4b4 border; used for “Copy setup prompt” and secondary actions.

### Top navigation

Light and muted Geist links across the black canvas, paired with a bordered contact action and a bright filled signup CTA.

### Feature cards

Dark media-led cards with #1c1c1c borders, rounded corners, compact padding, and embedded workflow or model imagery.

### Editorial link card

Light text sits within an image or dark card; select links use a faint inset white outline and rounded framing.

### Floating hero media

Rounded creative images distributed around a centered headline, with varied crops and generous black negative space.

### Measured component styles

- **Primary button** (“Get started for free”): background #71d083 · text #000000 · border 1px solid · radius 12px · padding 10px 12px · 400 14px Geist
- **Secondary button** (“Copy setup prompt”): transparent background · text #eeeeee · border 1px solid #b4b4b4 · radius 12px · padding 10px 12px · 400 14px Geist
- **Link** (“Nike is exploring FLORA for its creative”): transparent background · text #eeeeee · radius 24px · padding 24px 24px 20px 24px · 400 16px Geist · shadow rgba(255, 255, 255, 0.11) 0px 0px 0px 1px inset
- **Card** (“Character Lock One character, 6 differen”): transparent background · text #eeeeee · border 1px solid #1c1c1c · radius 20px · padding 8px · 400 16px Geist
- **Navigation item** (“Product Solutions Enterprise Pricing Res”): transparent background · text #f5f5f5 · radius 0px · padding 0px · 400 16px Geist

## Do

- Keep the main canvas consistently black.
- Use green only for clear action or link emphasis.
- Let creative media provide the strongest color.
- Use Geist for functional and product-facing copy.
- Separate sections with generous black breathing room.
- Use subtle borders to define dark cards.

## Don't

- Do not add unmeasured brand colors.
- Do not turn the page into a light dashboard.
- Do not crowd the hero with competing copy.
- Do not use heavy shadows as the default.
- Do not treat image colors as brand accents.
- Do not make every section a uniform card grid.

## Agent prompt

Build a new FLORA-style page as a dark creative-product experience. Use Canvas Black (#000000) as the dominant uninterrupted background; set primary copy in Gallery White (#eeeeee), with Soft Silver (#b4b4b4) and Quiet Gray (#a7a7a7) for supporting text. Reserve Flora Green (#71d083) for the main CTA and Link Green (#40c575) for occasional inline emphasis. Use Geist or a close sans-serif, clear weight hierarchy, and restrained tracking. Compose a spacious centered hero with floating, rounded creative images, then alternate product demonstrations, workflow examples, and editorial proof. Keep card edges subtle in Hairline Charcoal (#1c1c1c), using dark surfaces rather than pronounced shadows. Make imagery vivid and media-led, but ensure text stays legible over any video or photography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Black navigation above a centered hero message, surrounded by floating rounded creative images and a low-set trust logo row. | Primary signup CTA, Copy setup prompt action, Model compatibility cue | Dark canvas, Floating image collage, Centered headline, Rounded buttons |
| 2 | feature-grid | Introductory copy followed by three side-by-side workflow demonstrations on the dark canvas. | Ideate, iterate, scale sequence, Progressive product explanation | Three-column feature cards, Large numbered headings, Embedded video previews |
| 3 | product-showcase | Open black section with copy at left and a connected canvas workflow visual spread across the remaining space. | Signup and contact actions, Canvas workflow demonstration | Sparse split composition, Connected product previews, Rounded media tiles |
| 4 | gallery | Atmospheric full-width landscape media with a text introduction and vertically stacked creative disciplines. | Browse creative use cases, Explore workflow link | Full-bleed video background, Dark text overlay, Large stacked category labels |
| 5 | product-showcase | Dark content area with a featured technique panel followed by a multi-column collection of compact technique cards. | Explore technique examples, Browse featured workflows | Framed showcase panel, Media-rich cards, Thin dark borders |
| 6 | integrations | Short subscription introduction above a dense, varied grid of model descriptions and imagery. | Compare available models, Sign up for access | Mixed-size model tiles, Dark catalog grid, Image-backed cards |
| 7 | content-feed | Case-study intro and contact action lead into three columns, followed by a separate editorial coverage block. | Contact sales, Open case studies, Read external coverage | Three-column case grid, Editorial link cards, Large section headings |
| 8 | footer | Final signup prompt above a broad, multi-column footer with brand details and a dark atmospheric background image. | Contact sales, Sign up for free, Footer navigation | Closing CTA band, Multi-column link groups, Low-contrast background imagery |

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