Deep Space Violet
#151035Primary brand surface — hero background, navigation, dark panels, code/token sidebars, and the product UI shell. Sets the dark-mode identity and creates the canvas against which the teal accent glows
Penpot
penpot.appWebsite preview
The design language
Penpot operates as a two-act visual system: a deep midnight-violet hero stage that commands attention, then a luminous off-white working area that lets product content breathe. The chromatic palette is intentionally austere — one deep violet, one vivid teal, and neutral grays — so the colorful design tool interface (the actual product) becomes the only place multicolor lives. Work Sans at large display sizes creates confident, slightly tightened headlines, while the same family at 14–16px keeps interface chrome readable and unpretentious. Components are flat and geometric: 8px radii on controls, 20px radii on cards, hairline borders, no decorative shadows. The single teal accent is rationed carefully — it activates CTAs, the emphasis word in headlines, and a few decorative strokes — making it feel like a switch flipped on rather than decoration.
Color palette
brand
Bright Teal
#1ccac7Primary action fill, emphasis word in headlines, active tab indicator, and decorative spark. The single chromatic note — rationed to CTAs, highlights, and one word per headline — making each occurrence feel switched on
Rich Violet
#2f226cSecondary violet for subtle borders, dividers, and accent strokes within the dark panels. A bridge between Deep Space Violet and Bright Teal on the dark canvas
neutral
Off-White
#fafafaPage canvas, light card surfaces, body text on dark surfaces, icon fills. The light-mode workhorse — never pure white, slightly warm to soften the contrast against Deep Space Violet
Light Gray
#eeeeeeHairline borders, subtle dividers, and nav separators on light surfaces. The quietest neutral — present but never demanding attention
Silver
#d3d3d3Button borders and disabled/secondary control outlines. Slightly heavier than Light Gray — used when a border needs to define a control edge
Pure Black
#000000Body text on light surfaces and maximum-contrast borders where the violet would be too soft. Sparingly used — the violet handles most dark roles
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
72px · 500 · 1.1 · -2.016px trackingThe quick brown fox jumps
heading-lg
52px · 500 · 1.2 · -1.456px trackingThe quick brown fox jumps
heading
48px · 700 · 1.2 · -1.344px trackingThe quick brown fox jumps
subheading
24px · 400 · 1.2 · -0.672px trackingThe quick brown fox jumps
body-lg
18px · 700 · 1.5 · -0.504px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · -0.448px trackingThe quick brown fox jumps
body-sm
14px · 500 · 1.5 · -0.392px trackingThe quick brown fox jumps
caption
12px · 500 · 1.5 · -0.336px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Work Sans
- Weights
- 400, 500, 700
- Sizes
- 12, 14, 16, 18, 24, 48, 52, 72
- Line height
- 1.10 (display), 1.20 (headings), 1.50 (body)
- Letter spacing
- -0.0280em across all sizes — tightens geometric forms at display sizes and keeps body text crisp
- Fallback
- Inter, DM Sans, or Plus Jakarta Sans
The sole typeface — used for everything from 72px hero headlines down to 12px captions. Geometric humanist sans with friendly proportions; weight 400 for body, 500 for nav/buttons, 700 for headings and emphasis. The -0.028em tracking is a signature choice: it tightens the wide geometric forms of Work Sans at large sizes so headlines feel architectural rather than airy.
Additional typeface
Times
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.2
Times — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80-120px
- Card padding
- 20-24px
- Element gap
- 8-12px
Border radius
tabs
8pxcards
20pxpills
9999pxinputs
8pxbuttons
8pxSpacing scale
4px8px10px12px16px20px24px32px40px130px217pxGuidelines
Do
- Use #1ccac7 fill with Deep Space Violet text for the one and only primary action button per screen — its scarcity is what makes it powerful
- Set hero headlines at 48-72px Work Sans weight 700 with -0.028em tracking, and color the final word #1ccac7 to echo the brand gesture
- Use 8px border-radius for all controls (buttons, inputs, links) and 20px for cards — the two-radius system is the geometry rule
- Separate dark sections (Deep Space Violet) from light sections (Off-White) by color block, not by shadow or divider line
- Apply -0.028em letter-spacing uniformly across all Work Sans sizes — the tightened tracking is what gives the geometric forms their architectural feel
- Use 1px #eeeeee borders for card edges and section dividers on light surfaces; use 1px #fafafa borders for ghost controls on dark surfaces
- Maintain the chromatic ration: teal appears on CTAs, one headline word, and active tab indicators — never on body text, icons, or backgrounds
Don’t
- Don't use drop shadows anywhere — Penpot builds depth through color contrast and hairline borders, not elevation
- Don't use #1ccac7 for body text, icons, or large background fills — the accent must remain rationed to single words and button fills
- Don't introduce additional chromatic colors in UI chrome — the system is intentionally achromatic with one accent; let the product screenshots carry the color
- Don't use pure white (#ffffff) for backgrounds or text — #fafafa is slightly warmer and pairs better with the deep violet
- Don't mix border-radius values randomly — controls are 8px, cards are 20px, pills are 9999px. Never use 4px or 12px
- Don't use weight 400 for headlines — weight 700 with tight tracking is the headline voice; weight 500 is for UI labels
- Don't place teal and violet in the same small area (except within the product UI screenshot) — the violet and teal relationship works because they're on opposite sides of the value scale and rarely share real estate
Components
Navigation Bar
Top-level site navigationFull-width dark bar on Deep Space Violet (#151035). Logo (white Penpot mark + wordmark) left, dropdown nav items (Product, Community, Resources) center-left, Pricing link, then Log In text link, a ghost 'Contact Sales' button (#fafafa border, #fafafa text, 8px radius, 8px 20px padding), and a filled teal 'Sign up' button (#1ccac7, dark text, 8px radius, 8px 20px padding). 64-72px tall, no shadow — the dark fill creates separation from the hero.
Primary CTA Button (Filled Teal)
Main action buttonBright Teal (#1ccac7) fill with Deep Space Violet text, 8px border-radius, padding 8px 20px. Work Sans weight 500 at 14-16px. The only filled chromatic button in the system — its scarcity makes it the definitive action. Used for 'Sign up, it's free' and the nav 'Sign up' button.
Ghost Button (Outlined Light)
Secondary action on dark surfacesTransparent fill with 1px Off-White (#fafafa) border, #fafafa text, 8px border-radius, padding 8px 20px. Work Sans weight 500 at 14-16px. Used for 'Contact Sales' on the dark nav and 'Self-host install' on the hero.
New Badge Pill
Announcement/badge indicatorSmall pill with 'New' label in Rich Violet (#2f226c) or Deep Space Violet text, rounded at 9999px or 50px radius, padding 4px 12px. Sits beside announcement text in a horizontal row. Background can be transparent on the dark hero with a subtle border. Work Sans weight 500 at 12-14px.
Hero Headline
Primary page headlineWork Sans weight 700 at 48-72px, #fafafa text, line-height 1.10-1.20, letter-spacing -0.028em (~-2px at 72px). The signature move: the final word switches to Bright Teal (#1ccac7) for emphasis — e.g. 'Think and build digital products. Together.' — creating a two-tone headline that is the brand's visual identity condensed into one line.
Feature Tab Navigation
Section tab selectorHorizontal row of 4 tab labels (UI Design, Code, Design System, AI Workflows) centered above content. Work Sans weight 500 at 14-16px in #fafafa. Active tab is distinguished by a teal underline or pill background (#1ccac7). No visible container — the tabs float on the dark hero canvas, separated by 24-32px gaps.
Product Screenshot Frame
Product showcase containerLarge rectangular frame containing a screenshot of the Penpot design tool interface. Rounded corners at 8-20px. In the hero, shown on the dark Deep Space Violet canvas. In the feature section, placed on a warm cream/light background. No shadow — the screenshot's own internal contrast creates depth. Slightly cropped at the bottom edge of the viewport in the hero for dramatic effect.
Design System Token Panel
Product UI sidebar showing tokensDark Deep Space Violet (#151035) panel with rounded 8px corners, representing the product's left sidebar. Contains nested sections (LAYERS, ASSETS, TOKENS) with active tab highlighted in teal. Token items use Rich Violet (#2f226c) accent for selected/active states. The design system's own tokens are displayed as a meta-reference within the marketing page.
Color Swatch Token
Design system color displaySmall circular or rounded-square swatches (20-50px) showing color values. Filled with the actual color (#1ccac7 teal, violet hues). Used within the product screenshot to demonstrate the color tokens feature. White or dark text labels beneath showing the hex value.
Emphasis Word in Headline
Highlighted word within a headlineA single word in a headline set in Bright Teal (#1ccac7) while the rest of the headline is Off-White (#fafafa). Work Sans weight 700, same size and tracking as the surrounding text. The defining brand gesture — one teal word per hero-level headline, always placed at the end as a period and a promise.
Stat Badge / Icon Counter
Quantitative indicatorSmall rounded badge with an icon (headphones, etc.) and a number (35K). Rounded at 9999px (pill) or 50px. White or light teal background on the dark product canvas. Work Sans weight 500 at 14px. Used within the product UI screenshot to show analytics or token usage.
Card with 20px Radius
Content cardWhite or light surface card with 20px border-radius, hairline Light Gray (#eeeeee) border, 20-24px padding. No shadow — the border alone defines the edge. Used for feature cards, content blocks, and the product UI's own card components. The larger radius (20px vs 8px for controls) signals a different functional layer.
Surfaces & elevation
Level 0
Off-White Canvas
#fafafaBase page background for all light sections — the default working surface
Level 1
Card Surface
#fafafaInset card panels on the light canvas (same tone, separated by border rather than shadow)
Level 2
Deep Space Stage
#151035Hero section, navigation bar, and product UI shell — the dark mode identity
Level 3
Teal Accent Surface
#1ccac7Primary CTA buttons, active states, and emphasis — sits on top of any surface as a high-contrast focal point
Penpot deliberately avoids drop shadows. Depth is achieved through surface color contrast (Deep Space Violet vs Off-White) and border definition (1px hairlines in #eeeeee or #fafafa). The dark hero stage is separated from the page by color, not shadow. This flat approach keeps the system feeling modern, architectural, and tool-like — appropriate for a design platform where shadows would compete with the product's own canvas.
Product Screenshot Frame
none — the screenshot's internal contrast against the dark hero creates depth without a shadow
Layout & imagery
Layout
The page follows a dark-to-light two-act structure: a full-viewport dark hero (Deep Space Violet, centered headline, centered CTA pair, large product screenshot extending below the fold) transitions into lighter feature sections (off-white/cream canvas with embedded product UI). The hero is centered and symmetrical with generous vertical padding (80-120px). Below the fold, content alternates between dark product showcases and light text+visual sections. The feature tab section uses centered tab navigation above a wide product screenshot. Grid usage is primarily 2-column text+image in feature sections and single-column centered stacks in the hero. Navigation is a sticky top bar on the dark canvas. Max content width approximately 1200px with 20-24px column gaps.
Imagery
Product screenshots are the primary visual content — large, full-width frames showing the Penpot design tool interface with its dark sidebar panels, colorful canvas content (pink, purple, yellow cards), and token management UI. The product is shown in-context: a real canvas with a design being built, not an abstract wireframe. No photography, no illustration, no 3D renders. Icon style within the product is outlined with thin strokes, monochrome. The hero product screenshot is slightly cropped at the viewport bottom for dramatic reveal. Feature sections show the product in different states (UI Design, Code, Design System, AI Workflows) to demonstrate breadth.
Design notes
Agent Guide
## Quick Color Reference - Text on dark: #fafafa - Text on light: #000000 or #151035 - Page background (light): #fafafa - Dark hero surface: #151035 - Border (light surfaces): #eeeeee - Border (dark surfaces): #fafafa - Accent / emphasis word / active state: #1ccac7 - primary action: #1ccac7 (filled action) ## Example Component Prompts 1. **Hero Headline**: Create a hero headline at 72px, Work Sans weight 700, #fafafa, letter-spacing -2px (which is -0.028em), line-height 1.10. The final word should be #1ccac7 instead of white. Center the text on a #151035 background. 2. Create a Primary Action Button: #1ccac7 background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 3. **Ghost Button on Dark**: Create a transparent button with 1px #fafafa border, #fafafa text, Work Sans weight 500 at 16px, 8px border-radius, 8px vertical and 20px horizontal padding. Place on a #151035 background. 4. **Feature Tab Bar**: Create a horizontal row of 4 tab labels (UI Design, Code, Design System, AI Workflows) centered on a #151035 background. Work Sans weight 500 at 16px, #fafafa color, 32px gap between tabs. The active tab gets a 2px #1ccac7 underline. 5. **Content Card**: Create a card with #fafafa background, 20px border-radius, 1px #eeeeee border, 24px padding. No shadow. Work Sans weight 700 at 24px for the card title and weight 400 at 16px for body text in #000000.
Similar brands
Figma
Same dark-to-light hero structure with centered headline and product screenshot reveal; similar generous spacing and confident Work Sans / geometric sans typography
Linear
Same disciplined monochrome palette with a single vivid accent color, flat surfaces with no shadows, and tight letter-spacing on large display headlines
Vercel
Same dramatic dark hero stage transitioning to light content, hairline borders, and 8px-radius controls with one chromatic accent appearing sparingly
Supabase
Same dark-violet/near-black hero with teal accent button, open-source platform presentation style, and Work Sans-class geometric typography
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
