Flora · Full Page

Flora

Dark-first AI-creative landing that inherits the post-Vercel design language and applies it to a creative-tool audience. Geist Variable as the entire type stack, classic web blue #0000ee as the only functional accent, twelve Framer Motion atmospheric gradients holding ambient depth. Coherent technical confidence for a buyer who recognises Geist on sight.

flora.ai/Added 2026-05-15

Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.

Curator verdict

Why we catalogued it?

Flora is the rare AI-creative landing that decided to dress up in Vercel's clothing — Geist Variable everywhere, classic web blue accent, both light and dark variants via `prefers-color-scheme` with twelve atmospheric gradients holding ambient depth in both modes — and turn that inheritance into a coherent voice for an entirely different product category. We catalogued it because most AI creative tools either chase generic generative-art aesthetics (gradient sky overlays, glowing orbs) or copy Midjourney's chrome-on-chrome look; Flora threads a sharper needle by inheriting from developer tooling and applying that discipline to a creative-tool audience. If you are shipping for a buyer who recognises Geist on sight, this is the lodestar.

Design decisions observed

Both light + dark variants via `prefers-color-scheme` — light is the default surface, dark variant mirrors hierarchy when system theme is dark.
Geist Variable as the entire type stack — UI, body, captions, headlines all share one family across four weights (400/500/600), no second family, no display variant.
Classic web blue #0000ee preserved as the only functional accent — same punk-fintech move as Chronicle and Panxo, recontextualised for AI creative.
Twelve atmospheric Framer Motion gradients — used as ambient backdrops at section transitions, never as button or card fills.
Single secondary tint #71d083 mint-green — appears in rare success/positive moments at <1% of surface.
Moderate motion level — sharper than Plasticity's calm, less choreographed than Chronicle's keynote, just right for a tool that wants to feel responsive without becoming theatrical.

What to study

How to inherit a famous design system (Geist) and make it your own — Flora's discipline lives in the consistency, not the originality.
Twelve atmospheric gradients used responsibly — every gradient appears at low alpha (8-15%) as ambient depth, never competing with content.
Classic web blue as third deliberate brand instance — Flora joins Chronicle and Panxo in treating #0000ee as a cultural reference rather than a default link colour.

What to avoid

Don't lift Geist without committing to the whole post-Vercel design language — half-Geist looks like a placeholder.
Don't paint anything in classic blue or mint — these are functional accents, never surface fills.

Taste notes

The whole landing feels like a well-engineered Vercel deployment dashboard that decided to host an AI creative tool — dark canvas, geist typography, calm gradients holding depth. There is nothing decorative here; every element earns its frame budget. This is the rare creative-tool marketing page that trusts its audience to recognise good engineering when they see it.

Lineage & references

Heir to the post-Vercel design-tool cohort — Cabin, Resend's brand era, Linear's 2024 redesign — all converging on Geist + classic-blue + atmospheric gradients.
Standing shoulder-to-shoulder with the new wave of AI creative tools that refuse Midjourney chrome (Krea AI 2024+, Captions' marketing, Higgsfield's product pages).
Part of the deliberate-typography cohort — Geist appears here as cultural reference, not as default Vercel template.

Design language brief

Paste-ready for your agent.

A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.

Philosophy

Light + dark variants via `prefers-color-scheme`, post-Vercel inheritance. Light primary (#ffffff ground + #000000 ink), dark mirror (#000 ground + #eeeeee text + slate descender scale #b4b4b4 / #7b7b7b / #606060). Geist Variable as the sole type family (400/500/600 across 12-18px range). Classic web blue #0000ee is the only functional accent for CTAs, links and focus rings, working on both modes (<3% surface). Mint-green #71d083 as rare positive-state accent (<1% surface). Twelve Framer Motion-animated atmospheric gradients hold ambient depth at section transitions in both variants, never as fills. Moderate motion vocabulary.

Main prompt

Use this capture as a design language transfer brief for my project. Adopt the palette (light + dark variants via prefers-color-scheme — light primary #ffffff ground + #000 ink, dark mirror #000 ground + #eeeeee text + slate descender scale + single classic-web blue #0000ee accent works on both + mint-green #71d083 rare positive accent, each accent under 3% surface, never as fill), single-family typography (Geist Variable in weights 400/500/600 across UI/body/headings 12-18px range), 4px-base spacing scale heavy at 2/4/6/8/10/12, narrow content rail 1024-1280px, Framer Motion atmospheric gradient system (12 gradients as ambient backdrops only), moderate motion level, custom breakpoint ladder. Treat this as my project's constitution. Apply the language, not the source brand. When I ask you to build a page or component, enforce these rules by default and call out any deviation.

Overview

Layout: Single-column reading flow with atmospheric gradient sections holding depth between content blocks.
Content width: 1024-1240px content rail inside 1280px hero canvas.
Framing: Post-Vercel developer-tool aesthetic applied to AI creative — dark, calm, technically confident.
Grid strength: Implicit 4px grid; reading rhythm comes from typography size jumps and gradient placement.

Color philosophy

Pure #000 ground + #eeeeee text hold the page; classic-blue #0000ee accent earns attention, mint #71d083 marks rare positive moments.

Mode strategyDark-only — light variant inferred but absent in capture.

#000000 is the only background colour
#eeeeee for primary text; #b4b4b4 secondary; #7b7b7b metadata; #606060 disabled
#191919 elevated surfaces (cards on dark)
#0000ee classic blue: CTAs, links, focus rings (under 3% surface)
#71d083 mint: success states, positive trend indicators (under 1% surface)

Gradients (paste-ready)

12 atmospheric Framer Motion-animated gradients — ambient backdrops at section transitions at 8-15% alpha, never as button/card fills

Typography rules

Geist Variable for all typographic moments (UI 12px, body 14-16px, headlines 18-32px)
Weights: 400 body, 500 emphasis, 600 headlines
Line-height 1.4-1.5 body, 1.1-1.2 headlines
Letter-spacing 0 — Geist's optical kerning is already correct
Never introduce a second family

Spacing rules

4px base unit, heaviest use at 2/4/6/8/10/12px
Section vertical rhythm: 80-128px between major content blocks
Card internal padding: 20-28px
CTA padding: 12-14px vertical / 22-26px horizontal

Design tokens

Palette, type, and space — all agent-readable.

9 colors · hex / rgb / hsl / oklch

Save PNG

foreground
64%
- HEX#000000
- RGBrgb(0, 0, 0)
- HSLhsl(0, 0%, 0%)
- OKLCHoklch(0.00% 0.0000 0.00)
brand
15%
- HEX#0000EE
- RGBrgb(0, 0, 238)
- HSLhsl(240, 100%, 47%)
- OKLCHoklch(42.90% 0.2973 264.05)
background
13%
- HEX#EEEEEE
- RGBrgb(238, 238, 238)
- HSLhsl(0, 0%, 93%)
- OKLCHoklch(94.91% 0.0000 89.76)
foreground
4%
- HEX#B4B4B4
- RGBrgb(180, 180, 180)
- HSLhsl(0, 0%, 71%)
- OKLCHoklch(76.99% 0.0000 89.76)
foreground
3%
- HEX#7B7B7B
- RGBrgb(123, 123, 123)
- HSLhsl(0, 0%, 48%)
- OKLCHoklch(58.29% 0.0000 89.76)
foreground
1%
- HEX#606060
- RGBrgb(96, 96, 96)
- HSLhsl(0, 0%, 38%)
- OKLCHoklch(48.91% 0.0000 89.76)
foreground
0%
- HEX#191919
- RGBrgb(25, 25, 25)
- HSLhsl(0, 0%, 10%)
- OKLCHoklch(21.34% 0.0000 89.76)
accent
0%
- HEX#71D083
- RGBrgb(113, 208, 131)
- HSLhsl(131, 50%, 63%)
- OKLCHoklch(77.97% 0.1419 148.48)
background
0%
- HEX#1B2A1E
- RGBrgb(27, 42, 30)
- HSLhsl(132, 22%, 14%)
- OKLCHoklch(26.73% 0.0301 150.16)

Inspector

Tab through the captured artifacts.

Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.

Page structure

Semantic hierarchy at a glance.

Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 3 nodes captured; depth capped at 6 for readability.

body
├─ div
└─ svg (×4)

Accessibility

60 combinations · 28 pass AA · 20 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.

Preview	fg	bg	Ratio	Normal	Large	APCA Lc	Context
Aa	`#000000`	`#EEEEEE`	18.10	AAA	AAA	+96	foreground on background
Aa	`#EEEEEE`	`#000000`	18.10	AAA	AAA	-97	background on foreground
Aa	`#EEEEEE`	`#191919`	15.15	AAA	AAA	-96	background on foreground
Aa	`#191919`	`#EEEEEE`	15.15	AAA	AAA	+94	foreground on background
Aa	`#EEEEEE`	`#1B2A1E`	12.96	AAA	AAA	-94	background on background
Aa	`#1B2A1E`	`#EEEEEE`	12.96	AAA	AAA	+92	background on background
Aa	`#000000`	`#71D083`	11.05	AAA	AAA	+68	foreground on accent
Aa	`#71D083`	`#000000`	11.05	AAA	AAA	-67	accent on foreground
Aa	`#000000`	`#B4B4B4`	10.13	AAA	AAA	+63	foreground on foreground
Aa	`#B4B4B4`	`#000000`	10.13	AAA	AAA	-62	foreground on foreground

Image strategy

Asset loading & format policy.

Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.

Total23Lazy loaded100%png14webp5avif2jpg2

Hero image

https://ik.imagekit.io/ff5bkg98p/node-inputs/2026/1/26/refactor-me-soon/72b05bbe-019c-447e-9010-669afc711309_4BFOJ4GLLK.png

Format: PNG
Dimensions: 896×1200
Loading: lazy
srcset: no

Page type

Full Page

Industry

ai
design-tools
saas

Theme

both

Editorial disclaimer