Iris Sweep
#4e6fffBrand logo gradient midpoint — the wordmark's signature purple-to-blue sweep
Pixso
pixso.netWebsite preview
The design language
Pixso's marketing surface is a near-monochrome gallery: a warm-white canvas, hairline borders, and black headline type let the colorful product work and design kit thumbnails do the visual talking. Figtree carries the entire voice in a wide weight range — whispers at 400, confident at 600, and a wall of presence at 700 for the hero statement. The only chromatic punctuation is a single pale-blue wash and a purple-to-blue logo gradient; everything else earns its color by showing real product, not decoration. Components sit flat with very soft shadows and modest radii, so the page feels like a designer's tool laid out on a marble desk — the tools are quiet, the work is loud.
Color palette
brand
Orchid Edge
#ee7cffBrand logo gradient start — warm violet anchor of the wordmark sweep
Sky Drift
#559cffBrand logo gradient end — cool blue terminus of the wordmark sweep
accent
Ice Wash
#cfe7edPale cool-blue background tint for highlighted cards and feature panels
neutral
Obsidian
#000000Primary text, heading type, dark icons, and the strongest foreground layer
Carbon
#121212Filled primary buttons, active nav state, dark surface fill
Graphite
#333333Secondary headings, button labels on light surfaces, heavy icon strokes
Slate
#666666Body secondary text, helper copy, muted metadata
Ash
#808080Tertiary text, disabled states, placeholder copy, subtle borders
Fog
#999999Inactive icons, low-emphasis dividers, shadow tinting
Pebble
#8b8c8fIcon strokes on neutral surfaces, muted glyph color
Smoke
#4d4d4dHeavy body text where Obsidian feels too sharp, small caption emphasis
Charcoal Veil
#3d3d3dNavigation bar text and borders — the dark nav strip registers as a separate layer
Dusk
#292929Deep surface fill for elevated dark blocks and image overlays
Paper
#faf8fdPage canvas — barely-there warm/lavender tint that separates the site from pure white
Bone
#f9f9faCard surfaces, secondary panels, subtle raised containers
Mist
#eaebeeHairline borders, divider rules, button outlines, input borders
Typography
Type scale
Minor Third (1.2) · 14px basedisplay-lg
60px · 700 · 1.1The quick brown fox jumps
text-50
50px · 700 · 1.2The quick brown fox jumps
display
48px · 600 · 1.17The quick brown fox jumps
heading-lg
34px · 400 · 1.21The quick brown fox jumps
heading
30px · 400 · 1.21The quick brown fox jumps
text-28
28px · 600 · 1.2The quick brown fox jumps
heading-sm
24px · 400 · 1.3The quick brown fox jumps
subheading
18px · 600 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Figtree
- Weights
- 400, 500, 600, 700
- Sizes
- 12px, 13px, 14px, 16px, 18px, 24px, 28px, 30px, 34px, 48px, 50px, 60px
- Line height
- 1.10–1.61 (display tight at 1.10–1.17, body generous at 1.50–1.61)
- Fallback
- Inter, DM Sans, Manrope
Single-family system: 700 carries the hero and section headlines at 48–60px with tight tracking, 600 handles subheadings and prominent labels at 24–34px, 500 covers button labels and emphasized body at 16–18px, 400 runs body and caption copy at 13–16px. The geometric, low-contrast character of Figtree keeps the all-black type from feeling oppressive.
Spacing & shape
Spacing
- Density
- comfortable
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 20px
- Element gap
- 10px
Border radius
nav
8pxcards
8pxinputs
8pxbuttons
12pxbuttons-prominent
18pxSpacing scale
2px3px4px5px6px7px8px9px10px11px12px14px15px16px17px18px20px23px24px26px30px31px32px39px40px45px48px50px51px58px60px64px78px80px88px110px120px180px220pxGuidelines
Do
- Use Figtree for everything — no secondary font family, no system fallbacks in production output
- Let the page background be #faf8fd, never pure #ffffff, so cards visibly lift
- Pair a Filled Primary Button (Carbon #121212) with an Outlined Secondary Button (Mist border) in the same action row
- Reserve 8px radius for cards and nav, 12px for buttons, 18px only for prominent product frames
- Keep shadows to the signature two-layer stack: 1px hairline dark + 2–4px soft blur
- Use the Iris Sweep gradient only on the wordmark and brand-identity surfaces — never on buttons or functional UI
- Let product mockups and design kit thumbnails carry all the color; keep chrome grayscale
Don’t
- Don't introduce a chromatic CTA color — the primary action is always Carbon #121212
- Don't use heavy drop shadows or colored shadows; elevation must stay hairline
- Don't set body type below 13px or use Figtree below weight 400
- Don't add gradient backgrounds to UI surfaces; gradients belong to the logo and decorative imagery
- Don't center-align body paragraphs — the system uses left-aligned running text below the hero
- Don't use #0000ee or browser-default link blue for any interactive element
- Don't round buttons to pill (9999px); the system uses 8/12/18px radii only
Components
Filled Primary Button
Main conversion action — the loudest UI element on the page#121212 background, #ffffff text, Figtree 500 at 14–16px, 12px horizontal / 8px vertical padding, 12px radius. Whisper-soft shadow stack. White hover invert or subtle darken. Used for "Get started" and similar conversion moments.
Outlined Secondary Button
Companion action — same row, lower weightTransparent background, 1px #eaebee border (darker on hover, ~#999999), #000000 text, Figtree 500, 12px radius, same padding as primary. The pairing of filled + outlined on the same row is the signature CTA pattern.
Ghost Nav Link
Top navigation items and in-content linksTransparent background, #3d3d3d text at 14px Figtree 500, no underline, 8px hover background wash. Dropdowns indicated by chevron, no decoration.
Design Kit Card
Gallery tile in the design kit grid (4-column layout)#ffffff surface, 8px radius, full-bleed colorful product mockup image filling the card body, 16–20px padding below image for title block. Title in Figtree 600 at 16px Obsidian, category label in 13px Slate. No visible border, relies on the 1px shadow for separation from the Paper canvas.
Product Showcase Frame
Large framed mockup in the product section#ffffff card containing device-frame mockups at full width, 18px radius on outer container, landscape gradient backdrop (#7cb86a green/grass) visible behind the cards. Internal UI cards use 12–18px radius.
Floating Feature Card
Callout card floating over hero or product imagery#ffffff surface, 12–18px radius, soft drop shadow, small device thumbnail on the left (40–60px), title at Figtree 600 16px Obsidian, description at Figtree 400 13–14px Slate. Sits offset from its parent, creating the layered look.
Top Navigation Bar
Persistent site headerWhite/transparent background flush with the page canvas, no bottom border, 64–72px tall. Logo (colorful Iris Sweep gradient mark + Obsidian wordmark) on the left, horizontal nav items centered, "Log in" ghost link + filled "Get started" button on the right. 8px radius on the CTA button.
Section Divider
Vertical separation between content sectionsNo visible rule — sections are separated by ~80px of whitespace on the Paper canvas. Occasionally a 1px #eaebee hairline marks a transition.
Decorative Icon Scatter
Atmospheric floating icons in the hero marginsSmall (24–40px) flat colorful icons positioned absolutely around the hero. Each rendered in a single brand-adjacent color (pinks, purples, blues, greens, oranges). No animation implied, but placement feels intentionally asymmetric — they exist to soften the otherwise empty white space.
Surfaces & elevation
Level 0
Canvas
#faf8fdPage background — warm-white with a whisper of lavender so cards float above rather than blending in
Level 1
Card
#ffffffElevated card surface for product mockup frames, design kit thumbnails, feature tiles
Level 2
Panel
#f9f9faSubtle raised panels and secondary containers
Level 3
Cool Wash
#cfe7edSoft cool-tinted highlight surface for featured callouts
Shadows are whisper-quiet: a 1px hairline darkness plus a 2–4px soft blur. Elevation is communicated by surface lightness and the hairline border, not by stacked drop shadows. This keeps the page flat and editorial rather than skeuomorphic.
Primary button
rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.3) 0px 0px 1px 0px
Secondary outlined button
rgba(0, 0, 0, 0.1) 0px 1px 1px 0px, rgba(0, 0, 0, 0.4) 0px 0px 1px 0px
Layout & imagery
Layout
Full-bleed page structure with a 1200px max-width content rail. The hero is centered: oversized headline (48–60px, Figtree 700, tight 1.10 line-height) over a 16–18px subtitle, then a horizontally paired button row, then a floating product card. Product showcase sections use a 4-up row of device-frame mockups over a landscape photo background, framed by a 1200px container. The design kit gallery is a strict 4-column grid with 20px gaps, equal-height cards. Navigation is a flat 64–72px top bar, transparent over the canvas, with the logo left, links center, and CTA right. Section rhythm is generous — 80px vertical gaps between major sections on the Paper canvas, with no alternating dark/light bands. Everything is left-aligned or center-aligned; there are no asymmetric or magazine-style compositions.
Imagery
Imagery is the only source of color in this system. The product showcase uses full-width landscape photography (green grass field with wildflowers) as a backdrop for floating device-frame mockups. The design kit gallery is a 4-column grid of vibrant product screenshots — Apple CarPlay, Material 3, HarmonyOS, iPadOS, 3D avatar sets, fitness apps, finance apps — each thumbnail a different vivid color story. The hero is decorated with small flat icons (24–40px) in pink, purple, blue, green, and orange scattered asymmetrically around the white space. No photography of people, no lifestyle imagery, no abstract 3D renders — it's all real product work presented as visual evidence. Icon style is flat, single-color, geometric, with a slight chunky quality that matches Figtree's character.
Design notes
Agent Guide
## Quick Color Reference - Page background: #faf8fd (Paper) - Card surface: #ffffff - Border / divider: #eaebee (Mist) - Primary text: #000000 (Obsidian) - Muted text: #666666 (Slate) - Brand accent: #ee7cff → #4e6fff → #559cff (Iris Sweep gradient — logo only) - primary action: no distinct CTA color ## Example Component Prompts 1. **Hero Headline + Action Row**: Center a 56px Figtree 700 headline in #000000 with 1.15 line-height. Below, place a Carbon #121212 filled button (Figtree 500 14px, #ffffff text, 12px radius, 12px 24px padding) next to an outlined button (1px #eaebee border, #000000 text, same padding and radius). Page background #faf8fd. 2. **Design Kit Gallery Card**: 4-column grid with 20px gap. Each card: #ffffff surface, 8px radius, full-bleed colorful product screenshot filling the body, 16px padding below for a Figtree 600 16px #000000 title and Figtree 400 13px #666666 category label. No border, rely on the whisper shadow. 3. **Floating Feature Callout**: #ffffff card with 12px radius and the standard two-layer shadow, ~60px device thumbnail on the left, Figtree 600 16px #000000 title and Figtree 400 14px #666666 description to its right. Sits offset 24px from its parent container. 4. **Section Divider (no rule)**: No visible line. Just 80px of #faf8fd background between content blocks, with a 1px #eaebee hairline only if marking a list or table boundary. 5. **Top Navigation**: 64px tall, transparent over #faf8fd. Left: Iris Sweep gradient mark + Obsidian wordmark. Center: Figtree 500 14px #3d3d3d nav links with 8px hover wash. Right: ghost "Log in" text link + Carbon #121212 filled "Get started" button (Figtree 500 14px, #ffffff, 8px radius, 8px 16px padding).
Similar brands
Figma
Same near-monochrome marketing canvas with a single-color brand gradient, and design kit gallery rows of colorful product thumbnails doing the visual work
Framer
Same quiet off-white page with oversized centered headlines, paired filled + outlined CTA buttons, and product mockups as the primary color source
Notion
Same restrained neutral palette and hairline-border card aesthetic, letting user content and screenshots supply all the color
Linear
Same single-family geometric sans (Figtree/Inter) carrying the entire voice and same near-black filled button as the only foreground accent
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
