What makes Flora's design language stand out?

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.

What fonts and palette does Flora use?

The type system is sans-serif, Geist and Geist Variable. The palette sits on a dual light and dark canvas around #000000, #0000EE, #EEEEEE and #B4B4B4.

Can I transfer Flora's design language to my product?

The patterns transfer without cloning. Study how to inherit a famous design system (Geist) and make it your own — Flora's discipline lives in the consistency, not the originality. The ai2 Design brief packages Flora's tokens and rules as a paste-ready export for Claude, Cursor, or any coding agent.

Back to gallery

ai · design tools · saas

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.aiAdded 2026-05-15

Editorial note

This 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.

Fair Use & Gallery Policy

FreePrompt kit

Copy the full design language into your agent

A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Flora’s language, not just a screenshot.

Paste into your agent. No signup, no cost.

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.

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.

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

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

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

Surface styleCards float on dark via 1px low-alpha hairline; 1 shadow variant (Flora minimal); atmospheric gradients carry depth.

1 shadow variant only — restraint over richness
Hover lift: 1-2px Y + shadow opacity bump
Focus rings: classic-blue 2px + 2px offset

Techniques

Geist card

1px rgba(238,238,238,0.06) hairline + 0 8px 24px rgba(0,0,0,0.35) shadow.

Atmospheric gradient backdrop

Framer Motion radial gradient at 8-15% alpha as ambient section depth.

Radii4 / 6 / 8 / 12Icon treatmentStroke 1.5px monoline, Geist-baseline aligned.Icon setsLucide + custom Geist-aligned set

Buttons: 6-8px radius
Cards: 8-12px radius
Pills: fully rounded for chips and tags

Primary CTA (classic blue)
background
#0000ee
textColor
#ffffff
fontFamily
Geist Variable
fontWeight
500
fontSize
14px
padding
12px 22px
borderRadius
8px
shadow
0 6px 18px rgba(0,0,238,0.32)
hover
background lightens to #1a1aff + shadow expand
Tailwind
```
inline-flex items-center gap-2 rounded-lg bg-[#0000ee] px-5 py-3 text-sm font-medium text-white shadow-[0_6px_18px_rgba(0,0,238,0.32)] transition hover:bg-[#1a1aff]
```
Dark feature card
background
#191919
border
1px solid rgba(238,238,238,0.06)
borderRadius
12px
padding
24px
shadow
0 8px 24px rgba(0,0,0,0.35)
Tailwind
```
rounded-xl border border-white/[0.06] bg-[#191919] p-6 shadow-[0_8px_24px_rgba(0,0,0,0.35)]
```

LevelmoderateDurations180ms / 300ms / 500ms

Easings

cubic-bezier(0.22, 1, 0.36, 1)

HoverCard lift 1-2px + shadow bump, Button background lightens to brighter accent variant, Link underline reveal on hover (300ms ease-out)

Scroll patterns

Framer Motion atmospheric gradients animate on viewport entry
Fade-in + 16px translate per section (one-shot)
Sticky nav appears after 100px with backdrop blur

Motion supports comprehension, not decoration
Respect prefers-reduced-motion: collapse Framer gradients to static

Hover lifts cards subtly
Focus rings: classic blue 2px + 2px offset
Active state: button bg shifts 8% darker

Approachmobile-first

Custom ladder (360/1024/1240/1280) — mobile-first single column, expansion at lg+.

<1024: 16px gutter, single column, simplified gradients
1024-1240: 1024px rail
≥1240: full 1240 rail + atmospheric gradients enabled

WCAG AAA on body text (#eeeeee on #000 is 18.5:1)
Classic blue on dark passes AA for UI text (8.6:1)
Framer Motion gradients respect prefers-reduced-motion

Next.jsFramer Motion for gradient animationsGeist Variable font

Typography + atmospheric gradients are the visual identity; product UI screenshots dominate visual content.

Geist Variable loaded as woff2
Framer Motion gradients lazily mounted after first interaction

Use Geist for every typographic moment
Reserve classic blue for primary CTAs and links
Use atmospheric gradients as ambient depth only
Keep the page dark — pure #000 ground

Don't introduce a second type family
Don't paint surfaces in classic blue or mint — accents are functional only
Don't use gradients as button or card fills
Don't widen the canvas beyond 1280

Dark-only — no light variant
Geist Variable only — no secondary family
Classic blue accent under 3% surface; mint under 1%

Font-family grep: only `Geist` appears
Background colour grep: only `#000000` for ground, `#191919` for elevated cards
Accent colour count: classic blue <3% per viewport, mint <1%
Gradient usage: only as atmospheric backdrops, never fills
Shadow variants total: ≤2 distinct values site-wide

Design tokens

Observed token system

Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.

Inspector

Observable layers

Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.

Depth-first walk of the meaningful sections. 3 nodes across 2 levels, shallow to deep by color.

body2
- div
- svg (×4)

Accessibility

60 combinations - 28 pass AA - 20 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.

fg: #000000
bg: #EEEEEE
APCA Lc: +96
Use: foreground on background

fg: #EEEEEE
bg: #000000
APCA Lc: -97
Use: background on foreground

fg: #EEEEEE
bg: #191919
APCA Lc: -96
Use: background on foreground

fg: #191919
bg: #EEEEEE
APCA Lc: +94
Use: foreground on background

fg: #EEEEEE
bg: #1B2A1E
APCA Lc: -94
Use: background on background

fg: #1B2A1E
bg: #EEEEEE
APCA Lc: +92
Use: background on background

fg: #000000
bg: #71D083
APCA Lc: +68
Use: foreground on accent

fg: #71D083
bg: #000000
APCA Lc: -67
Use: accent on foreground

fg: #000000
bg: #B4B4B4
APCA Lc: +63
Use: foreground on foreground

Images

Image strategy

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

Total images

Lazy loaded

Format mix

png14 · 61%
webp5 · 22%
avif2 · 9%
jpg2 · 9%

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: 896x1200
Loading: lazy
srcset: no

Industry: ai
Industry: design-tools
Industry: saas
Theme: Light + Dark
Added: 2026-05-15

FAQ

Questions people ask about Flora

3questions

Answers are pulled from the curator verdict and design brief - the same text your AI agent sees when it paste-reads this page.

Compare this with

Flora

Copy the full design language into your agent

Color philosophy

Typography rules

Spacing rules

Elevation & depth

Shape & iconography

Component recipes

Motion vocabulary

Interaction language

Responsive strategy

Accessibility rules

Graphical tech stack

Do's

Don'ts

Constraints

Fitness check

Observed token system

Observable layers

Image strategy

Hero image

Questions people ask about Flora

Flora

Editorial disclaimer

Copy the full design language into your agent

Color philosophy

Typography rules

Spacing rules

Elevation & depth

Shape & iconography

Component recipes

Motion vocabulary

Interaction language

Responsive strategy

Accessibility rules

Graphical tech stack

Do's

Don'ts

Constraints

Fitness check

Observed token system

Observable layers

Contrast matrix

Image strategy

Hero image

Questions people ask about Flora

01What makes Flora's design language stand out?

02What fonts and palette does Flora use?

03Can I transfer Flora's design language to my product?

Side-by-side reads sharing this design signal.

More in this design language