Context Action Violet
#4d49fcLocalized primary CTA within utility panels—a singular interruptive color defining the focal execution point
Figma
figma.comWebsite preview
The design language
The interface operates as a strict, high-contrast structural container that entirely defers visual dominance to user-generated content. A stark #000000 on #ffffff palette forms the baseline, eschewing subtle grays in favor of absolute maximum contrast for primary boundaries and text. Typographic hierarchy relies almost purely on size and aggressive negative tracking rather than color variation, turning large text strings into dense graphical blocks. The border-radius logic enforces a severe dichotomy: 50px extreme pills for global navigation elements clashing intentionally against completely sharp 0px corners on content containers.
Color palette
brand
accent
Angular Teal
#33dfdfDecorative sweeps, loading indicators, and active cursor visuals
neutral
Absolute Canvas
#ffffffPage background, floating toolbars, elevated panel bases
Structural Ink
#000000Primary typography, global solid button backgrounds, outlined button strokes
Graphite Metadata
#595959Secondary author text, localized component subtext, placeholder values
Boundary Frame
#e2e2e2Subtle hair-line dividers and inactive input field bounds
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
72px · 400 · 1 · -1.44px trackingThe quick brown fox jumps
heading
56px · 400 · 1.1 · -0.5px trackingThe quick brown fox jumps
subheading
24px · 520 · 1.3 · -0.24px trackingThe quick brown fox jumps
body
18px · 330 · 1.4 · -0.13px trackingThe quick brown fox jumps
body-sm
16px · 400 · 1.4 · -0.08px trackingThe quick brown fox jumps
caption
12px · 400 · 1 · 0.36px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
figmaSans
- Sizes
- 16px, 18px, 24px, 56px, 72px
- Line height
- 1.00 - 1.45
- Letter spacing
- -0.0200em, -0.0150em, -0.0100em, -0.0090em, -0.0080em, -0.0070em, -0.0050em
- Fallback
- Inter
- Features
- "kern"
Universal workhorse driving everything from display headers to navigational labels. Defines personality through varying optical negative tracking.
Additional typeface
figmaMono
- Sizes
- 12px, 16px
- Line height
- 1.00, 1.30
- Letter spacing
- 0.0300em, 0.0500em
- Fallback
- JetBrains Mono
- Features
- "kern"
Micro-labels, coordinate tracking, and technical subtext functioning as UI chrome rather than content.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1440px
- Section gap
- 96-120px
- Card padding
- 16px
- Element gap
- 24px
Border radius
contentCards
0pxfloatingPanels
16pxglobalNavButtons
50pxcontextualButtons
8pxSpacing scale
2px4px5px6px8px10px12px16px18px20px21px24px30px32px40px48px53px56px60px64px80px90px105px120px180pxGuidelines
Do
- Enforce absolute #000000 for primary typography matrices—rely on weight and harsh negative tracking (-1.44px at display sizes) for hierarchy instead of greys.
- Pair the 50px pill paradigm explicitly and exclusively with global navbar / page-level navigation elements.
- Maintain raw 0px corners on community and gallery containers to strip away UI artifacts from structural content layouts.
- Use #4d49fc strictly as an inner-panel interruptive signal, never for global headers or marketing backgrounds.
- Limit drop shadows strictly to workspace/prompt panels that float structurally above the canvas; do not apply baseline shadows to grid items.
Don’t
- Do not dilute body content with #595959 text; force high contrast #000000 on #ffffff for all core structural strings.
- Do not mix button border geometries—never use an 8px radius in the header, and never use 50px pills within an elevated prompt panel.
- Do not frame or stroke image artwork thumbnails; let the unstyled edge define the visual rectangle inside the card space.
- Never apply hover elevation—use pure background-color offsets or opacity changes, reserving box-shadow for persistent Z-index tiers.
- Avoid decorative colored blocks in the UI system—constrain #24cb71, #00b6ff, #ff7237 exclusively to actual artwork or avatar renders.
Components
Button Group — Global Action Pills
Prompt Input Panel
Community Artifact Cards
Global Action Pill
Page-level CTA and authentication boundariesbackgroundColor #000000, color #ffffff, extreme borderRadius 50px, padding 8px 18px. Typographically set in 16px weight 480.
Navigation Utility Pill
Secondary global actions structurally matched to primary pillTransparent background with a 1.5px solid #000000 border, text #000000. borderRadius 50px, padding 8px 18px.
Prompt Input Panel
The central elevated workspace orchestratorbackgroundColor #ffffff, borderRadius 16px. Padding 16px all around, defined by an aggressive standalone shadow: rgba(0,0,0,0.1) 0px 24px 70px 0px.
Panel Execution CTA
The localized trigger within a Prompt Input PanelbackgroundColor #4d49fc, color #ffffff. Notably distinct borderRadius of 8px (differentiating it from 50px global pills), padding 8px 16px.
Community Artifact Card
Container framework for raw user-generated outputStrict 0px borderRadius grid cell. Image spans 100% full width to bleed at the top, bottom metadata stack uses 12px vertical gaps and no horizontal bounding padding against the grid frame.
Surfaces & elevation
Z-axis hierarchy relies on a binary absolute threshold. 99% of the UI (buttons, cards, inputs) exists entirely flush with the background, utilizing zero shadow. Elevation is summoned centrally as a single, massive volumetric throw (0 24px 70px 10% opacity) beneath core interactive 'prompt modules'—physically disconnecting the active toolset layer from the flat, passive content layer underneath.
Layout & imagery
Layout
Compositions rely on extreme maximum-width boundaries (1440px max) centering the viewport, utilizing tight clusters of content separated by massive macro-whitespace (96-120px section gaps). The hero archetype frequently stacks an asymmetric gallery-wall of images pinned dynamically beneath a floating, perfectly-centered UI block. Below the fold, information conforms immediately to strict 4-column unpadded grid architecture framing repeated card clusters, maximizing object density while eliminating frame padding.
Imagery
User-centric outputs completely govern the image domain. Assets appear as flat, unbordered 0px squares or scattered, overlapping physical-like cuts set against a stark void. The imagery operates as the only source of chroma on the site. There are zero lifestyle photography elements or generic corporate illustrations—every graphic is an exact, literal snapshot of a digital canvas creation, functioning both as proof of product and primary aesthetic payload.
Design notes
Agent Guide
### Quick Color Reference - Canvas Background: `#ffffff` - Structural Text & Actions: `#000000` - Contextual Brand CTA: `#4d49fc` - Subtext Metadata: `#595959` - Field Bounds: `#e2e2e2` ### Example Component Prompts 1. **Build a Global Navigation Action:** Create a solid black (#000000) pill button with white (#ffffff) text 'Get started for free' set in figmaSans 16px lock-up. Assign a 50px border-radius and use 8px top/bottom, 18px left/right padding. 2. **Generate the Floating Prompt Box:** Layout an absolute white (#ffffff) container with 16px padding and an exact 16px border-radius. Apply the mandatory focal box-shadow of `rgba(0,0,0,0.1) 0px 24px 70px 0px`. Inside, set a large prompt text 'Make anything possible' at size 56px, tracking at -0.5px. Add an internal 'Get started' button using #4d49fc background, white text, and a rigid 8px border-radius. 3. **Assemble a Community Card Array:** Create a 4-column grid using a 24px element gap. Each card must have exactly a 0px border-radius and background transparent. The top half is an image bleeding literally to all boundary edges. Below, write a bold structural title in #000000 at 16px, immediately followed underneath by an author string in #595959 at 12px figmaMono.
Similar brands
Apple
Typographic aggression via exact, tracked-in varying weights driving hierarchy entirely without structural color.
Notion
Tools-as-infrastructure layout mindset, relying entirely on monochrome wireframes that recede to let user components inject visual flair.
Vercel
High-contrast monochromatic structural scaffolding that defines interaction surfaces with stark geometry and singular vivid accent highlights.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
