Cobalt Spark
#298ef5Primary filled action, active states, brand accent — the sole chromatic voice in an otherwise monochrome system, so it must appear sparingly to retain its charge
Morflax
morflax.comWebsite preview
The design language
Morflax reads as a monochrome showroom with a single blue beacon: a near-black navigation bar floats above a porcelain-white canvas that is briefly washed in soft lavender at the hero, then returns to a crisp neutral white for every content section. Color is rationed — vivid blue (#298ef5) earns its presence on exactly one filled action, while everything else (borders, body text, surfaces) is graded grays from #e5e7eb hairlines through #171718 ink. The typography pairs Inter's clinical neutrality at 400/500/600 with a wide-tracked display treatment (0.05em) reserved for the brand wordmark, and the hero exploits oversized type that bleeds off-canvas. Components are quiet and rounded: pill buttons, 16–24px card radii, soft 25px-blur shadows — the only visual noise comes from the 3D-rendered product cards, which carry the chromatic energy the interface refuses to.
Color palette
brand
accent
Lavender Wash
#b1b3ccHero background atmospheric tint — a radial gradient that briefly warms the monochrome with a cool violet glow
neutral
Obsidian Bar
#333333Navigation background — dark anchor that frames the light canvas below
Ink
#171718Primary headings and body text — near-black with a barely-warm cast that softens against pure #000
Carbon
#25282bIcon strokes, secondary text, UI graphics — a touch cooler than Ink for icon differentiation
Smoke
#7c7e83Muted helper text, secondary nav, inactive labels
Ash
#a3a7adTertiary icon fills, disabled-state text, low-priority metadata
Frost
#e5e7ebHairline borders, card outlines, divider lines — the structural backbone of the grayscale system
Bone
#f5f5f7Card surfaces, section backgrounds, subtle elevation — the off-white between pure white and Frost
Porcelain
#ffffffPage canvas, button fills, card base — the default surface everything sits on
Shadow Veil
#bfbfbfSoft shadow tint used in card and button drop-shadows to imply elevation without color
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
72px · 600 · 1 · -1.8px trackingThe quick brown fox jumps
text-60
60px · 600 · 1The quick brown fox jumps
heading-lg
48px · 600 · 1.11 · -1.2px trackingThe quick brown fox jumps
heading
36px · 600 · 1.11 · -0.36px trackingThe quick brown fox jumps
heading-sm
24px · 500 · 1.33 · -0.24px trackingThe quick brown fox jumps
subheading
20px · 500 · 1.4 · -0.2px trackingThe quick brown fox jumps
text-18
18px · 400 · 1.56The quick brown fox jumps
body
16px · 400 · 1.5 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Inter
- Weights
- 400, 500, 600
- Sizes
- 12, 14, 16, 18, 20, 24, 36, 48, 60, 72
- Line height
- 1.00, 1.11, 1.33, 1.40, 1.43, 1.50, 1.56
- Letter spacing
- -0.025em at 48–72px, -0.01em at 24–36px, 0 at body sizes
- Fallback
- Inter (Google Fonts)
All interface text — nav, buttons, body, subheads, and most headings; the 600 weight is reserved for emphasis, never used decoratively, and the tight -0.025em tracking on 48–72px display sizes is what makes headlines feel engineered rather than typed
Additional typeface
Rogan
- Weights
- 500
- Sizes
- 16, 24
- Line height
- 1.33, 1.50
- Letter spacing
- 0.05em
- Fallback
- Inter with text-transform: uppercase and letter-spacing: 0.05em
Wide-tracked label/eyebrow text — its defining move is the 0.05em positive tracking at modest sizes, which forces the type to read as caption-or-category rather than heading; appears as uppercase or small-caps markers above content blocks
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 24px
Border radius
tags
12pxcards
24pxbuttons
9999pxsmallCards
16pxSpacing scale
2px4px6px8px10px12px16px20px24px32px40px48px80px112px160px179px307pxGuidelines
Do
- Use #298ef5 for exactly one filled action per viewport — its scarcity is what makes it feel switched on
- Apply 24px radius to all large feature cards and 16px to smaller image cards; never square corners on cards
- Set every button to 9999px radius — the pill shape is a system signature, not a style choice
- Reserve Inter weight 600 for headings and active emphasis; body copy stays at 400 or 500
- Track display sizes (48–72px) at -0.025em and body sizes at 0 — the negative tracking on large type is what makes headlines feel engineered
- Use the Lavender Wash gradient only on the hero — every other section stays on pure white or Bone
- Apply 0px 25px 50px -12px rgba(0,0,0,0.25) to all card-level surfaces, never to inline elements
Don’t
- Do not introduce additional chromatic accents — the system is monochrome plus one blue, and a second hue breaks the ratio
- Do not use 0px border-radius anywhere — the system is built on rounded geometry, not flat panels
- Do not set body text below 14px or above 18px — the scale jumps 14→16→20 to preserve readability rhythm
- Do not place color on body text — text colors are restricted to Ink (#171718), Carbon (#25282b), Smoke (#7c7e83), and Ash (#a3a7ad)
- Do not use the Cobalt Spark as a background for cards, sections, or large surfaces — it is a button and accent only
- Do not mix #000000 and #171718 — pick Ink (#171718) for text and use pure black only for photographic or illustration contexts
- Do not add drop shadows to nav bars, body text, or inline links — shadows are reserved for cards and filled buttons
Components
Top Navigation Bar
Persistent dark header — frames the light content below and carries the brand logo, primary links, and account actionsFull-width bar at 333333 background, 64–72px tall, with white Inter 14–16px nav links (weight 500), spaced at 24px gaps. Right side holds ghost text links ('Pro Access', 'Sign in') and a white pill CTA ('Open Studio') with 9999px radius, 1px Frost border, and Inter 14px weight 500. No drop shadow — sits flush with the lavender hero below.
Hero Section with Oversized Wordmark
Opening brand statement — establishes identity through scale, not colorLavender radial-gradient background (centered at ~35% horizontal, 50% vertical, fading from #dfe1f0 to #aeb1cc). An oversized display wordmark in white, Inter 72–120px weight 600, letter-spacing -0.025em, bleeds off the right and left edges of the viewport. Subtext in white Inter 18px weight 400, max-width 480px, sits below the wordmark at 24px gap.
Primary Filled Button
Sole high-emphasis action — the only place Cobalt Spark appears as a fillBackground #298ef5, text #ffffff, Inter 14–16px weight 500, padding 12px 24px, border-radius 9999px (full pill). No border. Soft two-layer shadow: 0px 10px 15px -3px rgba(0,0,0,0.1) and 0px 4px 6px -4px rgba(0,0,0,0.1). Use sparingly — when more than one appears on a page, the brand charge is diluted.
Ghost Outlined Button
Secondary action paired with a primary — the neutral companion to the blue sparkTransparent background, 1px solid border in #ffffff (on dark/hero) or #e5e7eb (on light sections), text in matching tone, Inter 14–16px weight 500, padding 12px 24px, border-radius 9999px. No shadow. Always renders beside or near a Primary Filled Button.
Section Heading with Carousel Controls
Marks the start of a scrollable content block and exposes navigationLeft-aligned H2 in Inter 36px weight 600, #171718, letter-spacing -0.36px. Right side carries a text link ('Explore more' at 14px weight 500, #171718) and a pair of circular carousel arrows (40px circles, 1px Frost border, Frost icon glyph, 4px gap between them). Vertical section gap of 40px above, 24px below.
Featured Tool Card
Showcases a product or tool with a full-bleed visual identityAspect ratio roughly 1:1.2, border-radius 24px, no visible border. The card is dominated by a 3D-rendered visual that fills 100% of the card area (coral, violet, peach, or device imagery). A label row sits overlaid at the top: a small monochrome icon (16px, Frost or #ffffff) + Inter 14px weight 500 label text. Heavy drop shadow: 0px 25px 50px -12px rgba(0,0,0,0.25) to lift the card off the canvas.
Carousel Arrow Button
Navigation control inside section headers and card carousels40px diameter circle, #ffffff fill, 1px solid #e5e7eb border, centered chevron icon (stroke #25282b, 1.5px). No shadow. Arranged in pairs with 4px horizontal gap; on mobile, swiping replaces the arrows.
Display Statement Block
Centered editorial interlude between product sections — voice of the brandWhite canvas section, max-width 800px centered. Headline in Inter 36px weight 600, #171718, letter-spacing -0.36px, line-height 1.11, centered. No subtext, no button, no imagery — relies entirely on typographic weight to carry the page.
Eyebrow Label
Tiny wide-tracked category marker above content blocksInter 12px or rogan 16px weight 500, letter-spacing 0.05em (≈ 0.6–0.8px), text-transform uppercase, color #7c7e83. Sits 8–12px above the heading it qualifies.
Ghost Nav Link
Inline action in the top bar — 'Pro Access' and 'Sign in'Inter 14px weight 500, #ffffff, no background, no border, no underline by default. 24px horizontal padding. Hover state shifts to #f5f5f7 or adds a Frost underline.
Body Text
Default paragraph and description copyInter 16px weight 400, #171718, line-height 1.5, max-width 65ch for readability. Secondary copy (descriptions, metadata) uses #7c7e83 at the same size.
Hero CTA Pair
The two-button unit at the bottom of the hero — one ghost, one filled or ghostTwo pill buttons at 16px horizontal gap. Ghost Outlined Button on the left ('Explore Ecosystem', white border on lavender) and a second Ghost Outlined Button on the right ('Open Studio ↗', white border with external-link arrow glyph). Both 9999px radius, 12px 24px padding, white text.
Surfaces & elevation
Level 0
Porcelain
#ffffffPage canvas, default content background
Level 1
Bone
#f5f5f7Card surface, subtle elevation above canvas
Level 2
Frost
#e5e7ebHairline border layer, thin dividers
Level 3
Obsidian Bar
#333333Navigation bar — dark inversion of the light canvas
Level 4
Lavender Wash
#b1b3ccHero atmospheric background — temporary chromatic departure
Featured Tool Card
0px 25px 50px -12px rgba(0, 0, 0, 0.25)
Primary Button
0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1)
Layout & imagery
Layout
The page is a max-width contained layout (≈1200px content column, centered) sitting on a full-bleed white canvas. The hero breaks this containment deliberately — the oversized MORFLAX wordmark bleeds past both viewport edges, and the lavender background extends full-bleed behind it. Below the hero, the layout snaps to a strict vertical rhythm: each section is a centered max-width band with 80px vertical gaps, alternating between white (#ffffff) and barely-off-white (#f5f5f7) surfaces. Content arrangement is primarily a horizontal card carousel (the Featured Tools row) and centered stacked text blocks (the editorial statement). Card grids do not exist — every product row scrolls horizontally rather than wrapping into columns, which keeps the visual line horizontal and prevents the page from feeling like a catalog. Navigation is a single dark bar fixed to the top, never repeating or duplicating into a sidebar or mega-menu.
Imagery
Imagery is split between two distinct registers. The hero uses a single large photographic plate — a soft, high-key portrait of a person interacting with a device, lit to blend into the lavender wash behind it. Below the fold, all visual energy is carried by 3D-rendered product cards: organic, sculptural forms in coral, violet, peach, and metallic silver-gray, with iridescent and gradient-shaded surfaces. These renders are not decorative — they ARE the card content, filling the full card area with no surrounding border or padding. Icons are minimal: simple 16px monochrome line glyphs in the card labels and nav, stroked at ~1.5px in #25282b or #ffffff. The system does not use stock photography, lifestyle imagery, or illustration elsewhere — the 3D product shots are the sole source of color and visual richness on the page.
Design notes
Agent Guide
Quick Color Reference: - text: #171718 (headings, body) - background: #ffffff (canvas), #f5f5f7 (card surface) - border: #e5e7eb (hairlines, card outlines) - accent: #298ef5 (Cobalt Spark — filled action only) - nav background: #333333 (dark bar) - primary action: #298ef5 (filled action) Example Component Prompts: 1. **Hero section**: Full-bleed background using radial-gradient(64.38% 210.53% at 35.62% 50%, #dfe1f0 0%, #aeb1cc 100%). Center an oversized Inter 72px weight 600 wordmark in #ffffff, letter-spacing -1.8px, bleeding off the left and right viewport edges. Below, Inter 18px weight 400 subtext in white, max-width 480px. Two pill buttons (9999px radius, 12px 24px padding) at 16px gap: first ghost with 1px white border, second ghost with 1px white border and external-link arrow. 2. **Featured Tool Card**: 1:1.2 aspect ratio, border-radius 24px, no border, no internal padding. Top-left overlay: 16px monochrome icon + Inter 14px weight 500 label text, both in #ffffff. The card interior is entirely filled by a 3D-rendered visual (coral, violet, or peach organic form). Apply shadow 0px 25px 50px -12px rgba(0,0,0,0.25). 3. **Section Header with Carousel**: Left-aligned Inter 36px weight 600 heading in #171718, letter-spacing -0.36px. Right side: Inter 14px weight 500 'Explore more' link in #171718, then two 40px circular arrow buttons (white fill, 1px #e5e7eb border, Frost chevron icon) at 4px gap. 4. **Primary Filled Button**: Background #298ef5, text #ffffff, Inter 14px weight 500, padding 12px 24px, border-radius 9999px, no border. Shadow: 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1). 5. **Editorial Statement Block**: White background section, max-width 800px centered. Inter 36px weight 600 headline in #171718, letter-spacing -0.36px, line-height 1.11, centered. No imagery, no button — typography only.
Color Discipline
The system is governed by a 1-cobalt-to-N-grayscale ratio. Cobalt Spark (#298ef5) may appear as a fill on exactly one primary action per viewport. All other interactive elements use neutral surfaces (white, Bone, Frost borders) with text in Ink or Carbon. The Lavender Wash is a hero-only atmospheric color and must not appear in content sections. Violating this ratio — for example, using #298ef5 as a link color, a badge background, or a section header — collapses the entire visual hierarchy into a flat blue field.
Radius System
Three radius tiers, applied by component size, not by component type. Cards at 24px are the default; smaller cards and tight image tiles drop to 16px. Tags and chips use 12px. Buttons, pills, and circular controls use 9999px. Never use 0px, 4px, or 8px — the system has no sharp or slightly-rounded geometry.
Similar brands
Linear
Same pill-shaped buttons, single accent color against dark nav + light canvas split, and weight-600 Inter display headlines with tight negative tracking
Vercel
Monochrome palette with a single vivid blue accent on primary actions, oversized display type, and horizontal card carousels over centered editorial statements
Framer
Dark top navigation bar, porcelain-white content canvas, and the same restraint of letting 3D-rendered product visuals carry the only color on the page
Pitch
Quiet monochrome UI that relies on tight typographic hierarchy and pill buttons, with chromatic energy delegated to product imagery rather than UI chrome
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
