Obsidian
#000000Primary page background, hero canvas, image void — the default stage everything sits on
Krea
krea.aiWebsite preview
The design language
Krea operates as a cinematic monochrome stage: pure black canvases, surgically tight Suisse Intl type, and zero chromatic noise compete for attention with the AI-generated imagery itself. The interface dissolves into atmosphere — the product floats on darkness rather than sitting on a surface. Buttons toggle between white-fill and ghost-outline pills, never introducing color. Typography does all the heavy lifting: compressed display weights at 96px/72px pull the eye down into the page, while sub-1.0 line-heights on heroes create an almost film-credit density. Spacing is generous but never airy — 80–96px section gaps with 12–20px element rhythm keeps things composed, not floaty.
Color palette
neutral
Midnight
#0b0f15Hero ambient and large image containers — a near-black with the faintest blue undertone that keeps the void from looking flat
Charcoal
#171717Elevated card surfaces, hover state for ghost buttons, secondary panels that need to lift off Obsidian
Graphite
#262626Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Iron
#404040Muted body text, inactive icon strokes, decorative dividers in dense blocks
Slate
#525252Secondary supporting text, caption-level annotations, tertiary iconography
Ash
#737373Tertiary text, helper copy, less-prominent metadata
Fog
#a3a3a3Secondary body text and sub-labels that still need readability over dark surfaces
Pearl
#d4d4d5Hairline borders, subtle stroke dividers, ghost button outlines
Mist
#e5e5e5Light divider lines on dark surfaces where higher contrast isn't needed
Cloud
#f5f5f5Light surface reserved for inverted sections or content blocks that demand brightness
Pure White
#ffffffLight supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
96px · 600 · 1 · -2.4px trackingThe quick brown fox jumps
heading-lg
72px · 600 · 1 · -1.8px trackingThe quick brown fox jumps
heading
60px · 400 · 1.05 · -1.5px trackingThe quick brown fox jumps
heading-md
48px · 600 · 1.11 · -1.2px trackingThe quick brown fox jumps
heading-sm
36px · 600 · 1.2 · -0.54px trackingThe quick brown fox jumps
text-30
30px · 600 · 1.2The quick brown fox jumps
subheading
24px · 500 · 1.33 · -0.36px trackingThe quick brown fox jumps
subheading-sm
20px · 450 · 1.38 · -0.3px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Suisse Intl
- Weights
- 400, 450, 500, 600, 700
- Sizes
- 12, 13, 14, 15, 16, 18, 20, 24, 30, 36, 48, 60, 72, 96
- Line height
- 1.00–1.56
- Letter spacing
- Tight at display: -0.025em (96px → -2.4px), -0.015em at 48px (-0.72px), near-normal at body (0), opens to +0.01em at small sizes, and +0.10em for uppercase eyebrow/label tracking
- Fallback
- Inter (closest free analogue, same Swiss grotesque DNA), or Söhne / Neue Haas Grotesk if licensed
- Features
- "ss01" on, "tnum" on, "cv11" on
The only typeface in the system. Used for every interface element: nav, body, buttons, hero, pricing, footer. Display weights 500–600 at 48–96px with aggressive -0.025em tracking create the compressed, cinematic headline feel; the unusual 450 weight handles editorial body emphasis without crossing into semibold territory.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Section gap
- 80-96px
- Card padding
- 24-32px
- Element gap
- 12-20px
Border radius
cards
8pxbadges
9999pxinputs
8pxbuttons
9999pxlargeSurfaces
14-32pxSpacing scale
2px4px6px8px10px12px14px16px18px20px24px28px32px40px44px48px61px64px96px108px160px192pxGuidelines
Do
- Use Pure White (#ffffff) for the single primary CTA on any given view — never introduce a second light-colored button
- Set display text at 48–96px Suisse Intl 500 with -0.025em tracking and line-height 1.0–1.11
- Reserve Charcoal (#171717) for surfaces that need to lift off Obsidian, and add 1px Iron borders only when a card sits on a near-identical tone
- Use 9999px radius for every button, tag, and pill; 8px for inputs and small cards; 14–32px for large feature surfaces
- Maintain 80–96px gaps between major sections and 12–20px between sibling elements
- Default to uppercase +0.10em tracking at 12px weight 500 for any eyebrow, section label, or category tag
- Let the product imagery own the page — surround AI-generated visuals with maximum dark negative space rather than decorative chrome
Don’t
- Never introduce a chromatic accent color — the system is intentionally 0% colorfulness; adding red, blue, or green would break the noir-gallery identity
- Don't use 8px radius on buttons — they are exclusively 9999px pills
- Don't use shadows on cards or feature blocks — elevation comes from surface tone, not blur
- Don't use italic, underline, or colored inline links — links are weight or color shifts only (Fog → White)
- Don't set body text below 14px or above 16px without a typographic reason (captions go to 12px uppercase only)
- Don't use line-height above 1.5 for body — Suisse Intl is calibrated for tighter vertical rhythm on dark surfaces
- Don't place light surfaces (#f5f5f5, #e5e5e5) as page backgrounds — they are reserved for content blocks inside an inverted section, never as full-page canvas
Components
Primary CTA Button
Hero and header conversion — the system’s only light sourcePill-shaped (9999px), Pure White (#ffffff) fill, Obsidian (#000000) text in Suisse Intl weight 500 15px, 10px 20px padding, subtle 0 1px 2px rgba(0,0,0,0.05) shadow. The single highest-contrast element on the page.
Ghost CTA Button
Secondary action paired with primary CTAPill-shaped (9999px), transparent fill with Pearl (#d4d4d5) 1px border, Fog (#a3a3a3) text, Suisse Intl 500 15px, 10px 20px padding. Hovers to Charcoal (#171717) fill with white text.
Navigation Link
Top-bar menu items and inline anchorsSuisse Intl 400 14px, Fog (#a3a3a3) text, no underline, 0px letter-spacing. Active/hover state: Pure White (#ffffff). 20px horizontal gap between items.
Auth Pill (Sign Up)
Header right-side conversion in ghost-white stylePill (9999px), Pure White (#ffffff) fill, 8px 16px padding, 13px Suisse Intl 500, Obsidian text. Smaller scale than hero CTA — sits inline in nav without overwhelming.
Log In Text Link
Tertiary header actionGhost-styled link, no border, Fog text 13px weight 500, hovers to white. Sits inline with zero chrome.
Hero Headline Block
First-screen attention grabberCentered, max-width ~900px, Suisse Intl 500 at 60–72px, white text, line-height 1.05, letter-spacing -0.025em. Followed by a single 16–18px Fog subtitle with no italic or secondary color.
Feature Card
Mid-page capability or product-mode blocksCharcoal (#171717) fill, 8px radius, 24–32px padding, no border, no shadow. Internal hierarchy: 20–24px white heading, 14–15px Fog body, 16px gap between elements. Optional full-bleed screenshot or preview at top with 8px radius.
Pricing Tier Card
Plan comparison blockCharcoal fill, 14px radius (slightly more generous than feature cards to signal importance), 32px padding, 1px Iron (#404040) border on non-featured tiers. Featured tier: white border (#ffffff) or Pure White fill inversion. Tier name 20px weight 500, price 48px weight 500 with -0.025em tracking, feature list 14px Fog with 10px row gap.
Text Input Field
Form input for email collection, settings, generation prompts8px radius, Charcoal (#171717) fill, 1px Iron (#404040) border, 12px 16px padding, 15px Suisse Intl 400 white text. Placeholder: Ash (#737373). Focus: border shifts to Pearl (#d4d4d5), no glow ring.
Eyebrow Label / Tag
Section labels, category tags, status indicatorsSuisse Intl 500 12px, uppercase, letter-spacing +0.10em (0.12px in spec, applied as ~0.012em in CSS), Fog (#a3a3a3) or Ash color. Optional pill background: Charcoal fill with 9999px radius and 4px 10px padding.
Footer Block
Bottom-of-page navigation and legalFull-width Obsidian background, top 1px Iron (#404040) divider, 80px top padding, 40px bottom. Column headings: 14px weight 500 white. Links: 14px weight 400 Fog, 12px row gap. Logo and copyright at 13px Ash.
Product Monitor Mockup
Hero visual showing the product in contextRealistic device frame (monitor or browser chrome) with rounded edges, 8–14px radius on the frame, 2px Iron border, the dual-layer drop shadow `0px 9px 8px rgba(0,0,0,0.2), 0px 6px 4px -1px rgba(0,0,0,0.2)` to seat it in the void. Interior displays the actual app UI.
Mode Tabs (Image / Video / Upscaler / API)
Top-level navigation between product modesHorizontal row of text links, 14–15px weight 500, 20px gaps. Active tab: Pure White with 1px white underline 2px below. Inactive: Fog. No pill backgrounds — pure typographic distinction.
Surfaces & elevation
Level 0
Obsidian
#000000Base page canvas — the default background of every screen
Level 1
Midnight
#0b0f15Hero and image-dominant sections that need the faintest lift from pure black
Level 2
Charcoal
#171717Card and panel surfaces that read as objects floating on the void
Level 3
Graphite
#262626Hovered/active interactive surfaces and the most lifted elevated state
Elevation is minimal and almost decorative — the system relies on surface tone contrast (#171717 lifting off #000000) rather than shadow to define hierarchy. Shadows appear only on the primary white CTA (a faint 1–2px darkening to seat it) and on the hero product mockup (a deeper drop shadow to ground the monitor in physical space). Cards and panels are flat. The void does the depth work.
Ghost/Outline Button
0px 1px 6px rgba(0, 0, 0, 0.1)
Filled Primary Button
0px 1px 2px rgba(0, 0, 0, 0.05)
Hero Product Mockup
0px 9px 8px rgba(0, 0, 0, 0.2), 0px 6px 4px -1px rgba(0, 0, 0, 0.2)
Layout & imagery
Layout
Full-bleed dark canvas with no page-max-width container — content blocks center themselves within the viewport rather than inside a fixed column. The hero is centered text-over-image: a large headline (60–72px) above a single 16–18px subtitle and a paired CTA cluster, all floating over a full-bleed dark photographic background. Below the hero, sections stack vertically with 80–96px gaps, alternating between pure Obsidian (#000000) canvas and slightly lifted Charcoal (#171717) bands that use tone rather than dividers to separate content. Feature sections follow a 2-column alternating text-left/image-right or centered-stacks pattern, never asymmetric/editorial. Pricing and capability grids are clean 2–3 column arrangements with equal card weights. Navigation is a single top bar — no sidebar, no mega-menu, no sticky doubling — with the logo at far left, menu items center, and dual CTA at far right. Density is comfortable: sections breathe, but inside each section the typography stays tight and the element rhythm is 12–20px, never airy.
Imagery
The visual language is product-imagery-dominant: AI-generated artwork, realistic device mockups, and atmospheric full-bleed photographs (desk, monitor, dark room scenes) carry the page. There are no illustrations, no icons beyond utilitarian UI glyphs (arrows, chevrons, menu), and no abstract decorative graphics. Product screenshots appear inside realistic device frames — monitors, browser windows — rendered with deep drop shadows to feel like physical objects on a dark desk. Photography is high-contrast and dark/moody: wood textures, low-key lighting, near-black environments with a single light source. The user-generated AI imagery (which Krea helps create) is the visual hero whenever it appears, treated full-bleed or in generous 14–32px-radius containers with no overlaid UI chrome. The overall effect: a portfolio gallery where the user's creative output is the only thing worth illuminating.
Design notes
Agent Guide
**Quick Color Reference** - text: #ffffff (primary), #a3a3a3 (secondary), #737373 (tertiary) - background: #000000 (canvas), #171717 (card), #262626 (elevated) - border: #d4d4d5 (hairline), #404040 (subtle), #737373 (visible) - accent: none — the system is fully achromatic; Pure White IS the accent - primary action: no distinct CTA color **3-5 Example Component Prompts** No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. **Ghost Button**: Pill (9999px), transparent fill, 1px #d4d4d5 border, #a3a3a3 text 15px weight 500, hovers to #171717 fill + white text. 3. **Hero Headline**: Centered, 60–72px Suisse Intl 500, white, line-height 1.05, letter-spacing -0.025em. Below: 16–18px #a3a3a3 subtitle with no decoration. 4. **Feature Card**: #171717 fill, 8px radius, 28–32px padding, no border, no shadow. 20px weight 500 white heading + 14px #a3a3a3 body with 16px gap. 5. **Eyebrow Label**: 12px Suisse Intl 500 uppercase, letter-spacing +0.10em, color #a3a3a3, 0px below 16–24px display heading.
Similar brands
Midjourney
Same monochromatic noir canvas with zero UI color, AI-generated imagery as the visual hero, centered display type, pill-shaped CTAs
Linear
Same dark-first, tight-tracked Swiss grotesque typography, flat surface tone elevation, minimal shadow reliance, white-fill + ghost-outline button pairing
Runway
AI creative tool aesthetic — full-bleed dark hero, product mockup as centerpiece, monochrome palette, cinematic atmosphere over UI density
Vercel
Premium dark surface treatment, generous section gaps, compressed display type with negative tracking, pure white as the only accent
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
