Obsidian
#000000Page canvas, primary borders, image frame edges
FLORA
florafauna.aiWebsite preview
The design language
FLORA is a black-velvet gallery for AI-generated imagery: a pure #000000 canvas where the only color comes from the images themselves. The interface is austere and editorial — no chromatic brand accent, no decorative gradients, no icon color. Geist carries every functional surface with quiet efficiency while Redaction 10 and Redaction 50 Italic lend expressive typographic weight to the few moments that need to feel curated (the hero question, the section openers). Components float on #191919 cards with hairline #b4b4b4 borders and 24px radii, looking more like matted photographs than software panels. The entire system is designed to disappear so that the generated visual output — the actual product — becomes the only vivid thing on screen.
Color palette
neutral
Carbon
#191919Card surfaces, elevated panels, input fields — one step above the canvas
Graphite
#303030Deeper elevated surfaces, input interiors, subtle panel separation
Slate
#606060Muted headings, secondary borders, subdued labels
Ash
#7b7b7bBody secondary text, link borders, metadata text
Fog
#b4b4b4Primary borders, hairlines, dividers, muted body text
Mist
#bfbfbfLight borders, subtle surface edges
Bone
#eeeeeePrimary text, high-contrast borders, heading strokes — the only near-white
Pitch
#050505Near-black for icon strokes, inverted button text, fine detail borders
Typography
Type scale
Minor Third (1.2) · 15px basedisplay-xl
80px · 400 · 1 · -2.4px trackingThe quick brown fox jumps
display-lg
60px · 500 · 1 · -1.5px trackingThe quick brown fox jumps
display
42px · 400 · 1.1 · -1.01px trackingThe quick brown fox jumps
heading
30px · 500 · 1.1The quick brown fox jumps
heading-sm
22px · 600 · 1.15 · -0.66px trackingThe quick brown fox jumps
subheading
20px · 500 · 1.2 · -0.34px trackingThe quick brown fox jumps
body-lg
16px · 500 · 1.4 · -0.16px trackingThe quick brown fox jumps
text-15
15px · 500 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
sans-serif
- Weights
- 400
- Sizes
- 12px
- Line height
- 1.2
sans-serif — detected in extracted data but not described by AI
Additional typeface
Geist
- Weights
- 400, 500, 600
- Sizes
- 8, 11, 12, 14, 15, 16, 20, 22, 30, 60, 80px
- Line height
- 1.0–1.5
- Letter spacing
- -0.0300em at 80px, -0.0250em at 60px, -0.0170em at 20px, -0.0100em at 16px, -0.0010em at 14px, normal at 12px and below
- Fallback
- Inter, system-ui
- Features
- "blwf", "cv03", "cv04", "cv09", "cv11"
Primary UI and body font — used across all functional text, nav, buttons, inputs, labels, and standard headings. The weight range is tight (400 for body, 500 for emphasis, 600 for strong labels) creating a restrained typographic voice. Letter-spacing tightens at larger sizes (-0.0300em at 80px, -0.0170em at 20px) giving headings a compressed editorial feel. The cv03/cv04/cv09/cv11 alternates and blwf feature shape Geist's letterforms into a distinctly modern, slightly geometric sans.
Additional typeface
Redaction 10
- Weights
- 400
- Sizes
- 42px
- Line height
- 1.10
- Letter spacing
- -0.0360em
- Fallback
- Playfair Display, EB Garamond
Display heading font — used for editorial section titles where the word itself needs presence. Redaction is a high-contrast serif/transitional with extreme thin strokes; at 42px with -0.0360em tracking it reads as a magazine masthead, not UI. The signature choice is using a serif on a pure-black generative-AI product — it humanizes the machine.
Additional typeface
Redaction 50 Italic
- Weights
- 400
- Sizes
- 42px
- Line height
- 1.00
- Letter spacing
- -0.0240em
- Fallback
- Playfair Display Italic, Cormorant Italic
Accent display variant — used for one or two words within an otherwise upright Redaction headline (e.g. 'What should we make?' with 'make' in italic). The italic is a loaded gesture: it signals the creative act, the human agency of prompting. Tracking at -0.0240em keeps the italic from sprawling.
Additional typeface
Satoshi
- Weights
- 700
- Sizes
- 22px
- Line height
- 1.15
- Letter spacing
- -0.0300em
- Fallback
- Inter Bold, Geist Bold
Occasional bold subhead — used sparingly for card titles or section labels where Geist at 600 would feel too neutral and Redaction would feel too editorial. Satoshi at 700 fills the middle ground.
Additional typeface
Geist Variable
- Weights
- 400, 700
- Sizes
- 14px
- Line height
- 1
- Letter spacing
- 0.029
Geist Variable — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1280px
- Section gap
- 48px
- Card padding
- 24px
- Element gap
- 8px
Border radius
tags
10pxcards
24pxpills
9999pxinputs
24pxbuttons
10pxSpacing scale
1px2px3px4px6px8px9px10px11px12px13px14px16px20px24px32px36px40px48px64px80px128pxGuidelines
Do
- Use Carbon (#191919) for every elevated surface — cards, inputs, modals — so they read as one step above the black canvas
- Set primary text and key headings in Bone (#eeeeee); use Ash (#7b7b7b) for secondary metadata and Fog (#b4b4b4) for body text and borders
- Use Redaction 10/50 Italic for editorial section titles and the hero question; reserve Geist for all functional UI text
- Apply 24px radius to cards, inputs, and large surfaces; 10px to buttons and tags; 9999px only to the primary pill CTA and quick-prompt chips
- Apply -0.0300em letter-spacing at 60–80px display sizes and -0.0170em at 20–22px subheadings to maintain the compressed editorial voice
- Keep the interface fully monochrome — let the generated images be the only source of color in any composition
- Use 1px Fog (#b4b4b4) borders on cards and inputs; never use shadows to denote elevation
Don’t
- Do not introduce a chromatic brand accent color — the zero-colorfulness palette is the signature
- Do not use Redaction for body text, buttons, or functional UI; it is display-only
- Do not apply box-shadows to cards or panels — the system relies on #191919 surface contrast against #000000 canvas, not elevation shadows
- Do not use Satoshi at 700 for long headlines; it is a subhead accent, not a display face
- Do not center-align body paragraphs or card descriptions — use left-align to match the editorial left-edge rhythm
- Do not use 4px or 5px radii for cards or inputs; stay on the 10/24/9999px system
- Do not use color-coded status indicators (green/yellow/red) — if feedback is needed, use weight, size, or position changes within the gray scale
Components
Prompt Input
Hero CTA — the primary interaction surfaceFull-width Carbon (#191919) surface, 24px radius, hairline Fog (#b4b4b4) border, 24px internal padding. Placeholder text in Ash (#7b7b7b) at 15px Geist 400. Contains a circular submit button (24px, #eeeeee fill, dark icon) at the right edge. This is the largest functional element on the page — it must feel inviting and centered.
Feature Card (Ideate/Iterate/Scale)
Three-column capability showcaseCarbon (#191919) surface, 24px radius, 1px Fog (#b4b4b4) border. Internal padding 24px. Large numeral (01/02/03) at 30px Geist 600 in Ash, paired with a heading at 30px Geist 600 in Bone. Contains a screenshot/UI preview image filling the card body, followed by a short descriptor in Body text and a bullet subhead in Geist 600.
Ghost Navigation Button
Top-right secondary actionTransparent fill, 1px Fog (#b4b4b4) border, 10px radius, padding 9px 13px. Text in Bone at 14px Geist 500. On hover, background lifts to #191919.
Primary Pill Button
Top-right primary action ('Get started for free')Bone (#eeeeee) fill, Pitch (#050505) text, 9999px radius (fully pill), padding 9px 14px. Text at 14px Geist 500. This is the only light element in the nav — it functions as the bright dot in a dark field.
Pill Suggestion Chip
Quick-prompt buttons under the main inputTransparent fill, 1px Fog (#b4b4b4) border, 9999px radius, padding 6px 14px. Text at 14px Geist 400 in Bone, with a small leading icon. Three chips sit in a row: 'On-brand variations', 'Editorial shoot', 'Campaign moodboard'.
Top Navigation Bar
Site-wide navigationSticky, transparent (canvas #000000 shows through), no border. Logo (FLORA wordmark with monogram) on the left, nav links centered, two action buttons on the right. Links at 14px Geist 400 in Bone, with dropdown chevrons. The wordmark uses a serif treatment distinguishing it from the sans-serif UI.
Image Preview Thumbnail
Floating gallery of generated outputsAspect-ratio-locked image tile with 10px or 24px radius, no border, 2–3px gap between tiles. Images are the only chromatic content — they sit on the black canvas like prints hung on a gallery wall, slightly overlapping in parallax positions.
Tag Pill ('New')
Feature freshness indicatorSmall pill: Carbon (#191919) fill, 10px radius, padding 1px 8px. Text at 11px Geist 500 in Bone, often paired with a parent nav link (e.g., 'Techniques New').
Workflow Diagram Card
Node-graph visualization in the 'Scale' sectionCarbon (#191919) panel, 24px radius, containing 3–4 image nodes connected by thin Fog (#b4b4b4) curved lines. Nodes have 10px radius, show a small image preview and a label in caption-size Geist.
Section Heading (Redaction)
Editorial section titlesRedaction 10 at 42px, tracking -0.0360em, color Bone (#eeeeee), with one word in Redaction 50 Italic for emphasis. Line-height 1.10. Appears above or beside a short descriptive paragraph in body Geist.
Text-Left Large Display
Full-bleed section headers ('Visual Effects', 'Fashion', 'Advertising')Display at 60–80px Geist, tracking -0.0250em to -0.0300em, in Bone. Large section labels stack vertically with generous 48px+ vertical rhythm. Sits on the black canvas — no card, no border.
Footer Link
Bottom-of-page navigationText-only, no background. Ash (#7b7b7b) at 14px Geist 400, 4–8px gap between items. On hover, color shifts to Bone.
Surfaces & elevation
Level 0
Canvas
#000000Page background — pure black absorbs all attention toward the generated imagery
Level 1
Card
#191919Elevated panels, prompt input, feature cards — one stop above the canvas
Level 2
Deep Surface
#303030Input interiors, nested panels, subtle layering
FLORA uses no box-shadows. Elevation is communicated entirely through surface tone: the canvas is #000000, elevated panels are #191919, and deeper nested surfaces are #303030. This eliminates the visual noise of cast shadows and keeps the black-velvet-gallery feel intact. Hairline 1px borders in Fog (#b4b4b4) define card edges instead.
Layout & imagery
Layout
Full-bleed sections on a 1280px max-width centered track. The hero is a centered prompt input with floating image previews above and beside it, arranged in a loose asymmetric collage on the black canvas. Below the hero, a three-column feature grid (Ideate/Iterate/Scale) with equal-width cards. Further down, a two-column split with a large left-aligned display heading stacked vertically (Visual Effects / Fashion / Advertising) and a workflow diagram card on the right. Section rhythm uses 48px vertical gaps with no dividers — sections flow seamlessly on the black canvas. Navigation is a single transparent sticky bar at the top.
Imagery
Imagery is the product — generated photographs, editorial compositions, and creative outputs are the dominant visual content. Images appear as floating tiles on the pure black canvas, often with parallax overlap, no captions, and slight rotation. They are full-color, high-contrast, and editorial in quality (fashion-editorial lighting, cinematic compositions). In UI mockups embedded within cards, screenshots show the FAUNA agent interface with mock generation results. No illustrations, no 3D renders, no abstract graphics — the generated photographic output carries all visual weight.
Design notes
Agent Guide
**Quick Color Reference** - Canvas/background: #000000 - Card/elevated surface: #191919 - Deep surface: #303030 - Primary text: #eeeeee - Secondary text/borders: #b4b4b4 - Muted text: #7b7b7b - primary action: #000000 (filled action) **Example Component Prompts** 1. *Hero prompt input*: Full-width Carbon (#191919) surface, 24px radius, 1px Fog (#b4b4b4) border, 24px padding. Placeholder 'Shoot an on-figure editorial in a Tokyo alley…' in Ash (#7b7b7b) at 15px Geist 400. Circular 24px submit button with Bone fill at right edge. 2. *Three-column feature card*: Carbon (#191919) fill, 24px radius, 1px Fog border, 24px padding. Numeral '01' in Ash at 30px Geist 600, heading 'Ideate' in Bone at 30px Geist 600. Body text in Fog at 15px Geist 400. Contains a UI mockup image filling the card width. 3. Create a Primary Action Button: #000000 background, #eeeeee text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 4. *Editorial section heading*: Redaction 10 at 42px, tracking -0.0360em, color Bone, line-height 1.10. One word swapped to Redaction 50 Italic for emphasis. 5. *Ghost nav button*: Transparent fill, 1px Fog (#b4b4b4) border, 10px radius, padding 9px 13px. Text 'Contact sales' at 14px Geist 500 in Bone.
Monochrome Discipline
The palette has zero colorfulness. This is not a constraint — it is the core identity. Every chromatic pixel in the system comes from user-generated imagery, never from UI chrome. When adding any new component, audit it for color: fills, borders, icons, and text must all be drawn from the 9-step achromatic scale (#000000 → #050505 → #191919 → #303030 → #606060 → #7b7b7b → #b4b4b4 → #bfbfbf → #eeeeee). The only permitted color in chrome is the gradient highlight on the submit arrow and the green 'New' badge dot — and even these are used minimally.
Similar brands
Midjourney
Same monochrome dark gallery aesthetic where the generated images are the only color; floating image grid on pure black canvas
Krea AI
Same zero-chrome dark interface with prompt-centric hero and image-preview gallery arranged asymmetrically on black
Ideogram
Same editorial dark-mode product UI with serif display accents on a pure black canvas and compact card grids
Runway
Same black-canvas generative-AI landing page pattern with floating creative output tiles and minimal UI chrome
Linear
Same hairline-border-on-dark-surface component language (1px borders, subtle #191919 card elevation, no shadows) and Geist-family typography
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
