Indigo Pulse
#4177ffSaturated category badge fill — the sole chromatic accent on chrome elements, used sparingly to tag template categories
Jp
jp.worksWebsite preview
The design language
Jp is a curated template gallery built on a near-monochrome canvas: a single white page, a single near-black accent, and pill-shaped geometry that reads like a museum wall of brand systems. Typography does the heavy lifting — PP Neue Montreal at restrained sizes and weights creates editorial calm, with the occasional 38px headline as the only moment of scale. Color is rationed: the UI itself stays grayscale, while small chromatic badges (violet, blue) act as category punctuation on the template thumbnails. The overall feel is a high-end stock-photo agency merged with a minimalist directory — every element earns its place through shape and whitespace, never decoration.
Color palette
accent
Sky Pulse
#41a9ffSecondary category badge fill — lighter blue companion to Indigo Pulse for alternating category tags
neutral
Ink
#333333Primary text, icons, card borders, structural lines — the default foreground across all body and heading content
Paper
#ffffffPage canvas, card surfaces, button text, inverted foregrounds
Whisper
#e6e6e6Hairline borders, dividers, subtle separators, card outlines
Carbon
#202020Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Slate
#3b3b3bSecondary dark surfaces, icon strokes, muted dark text on light surfaces
Graphite
#555555Tertiary text, secondary button borders, subdued labels
Ash
#838383Body secondary text, helper copy, placeholder text
Fog
#bdbdbdDisabled controls, very light icon strokes, decorative dot motifs
Mist
#c7c7c7Inverted muted foreground — light text on Carbon-filled buttons and dark cards (replaces Paper when on dark surfaces)
Typography
Type scale
Major Second (1.125) · 16px basedisplay
38px · 400 · 1.11The quick brown fox jumps
heading-sm
18px · 600 · 1.4The quick brown fox jumps
text-16
16px · 400 · 1.4The quick brown fox jumps
body
14px · 400 · 1.43The quick brown fox jumps
text-13
13px · 500 · 1The quick brown fox jumps
text-12
12px · 500 · 1.2The quick brown fox jumps
text-11
11px · 400 · 1.4The quick brown fox jumps
caption
10px · 500 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
PP Neue Montreal
- Weights
- 400, 500, 600
- Sizes
- 10, 11, 12, 13, 14, 16, 18, 38
- Line height
- 1.0, 1.11, 1.20, 1.40, 1.43, 1.60
- Letter spacing
- 0.0200em
- Fallback
- Inter, General Sans, Satoshi
The sole typeface across the entire product — body copy at 14px/1.43, UI labels at 12–13px, subheadings at 16–18px, and a single display step at 38px. Weights 400 for body, 500 for navigation/tabs, 600 for the hero headline and button text. The 0.020em positive tracking is signature: it opens the geometric forms slightly so small sizes (10–12px) stay legible without feeling mechanical.
Additional typeface
proxima-nova
- Weights
- 400
- Sizes
- 14px
- Line height
- 1.43
proxima-nova — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1200px
- Section gap
- 48px
- Card padding
- 0px
- Element gap
- 8px
Border radius
tabs
100pxcards
12pxbadges
100pxbuttons
100pxSpacing scale
2px3px4px6px7px8px10px12px14px16px18px22px24px26px36px48px56px60px101pxGuidelines
Do
- Use 100px border-radius on every button, tab, and badge — the pill shape is non-negotiable
- Keep the interface grayscale: #333333 text, #ffffff surface, #202020 for filled interactive moments
- Reach for PP Neue Montreal at 13–14px weight 400–500 for all body and UI text
- Reserve #4177ff and #41a9ff exclusively for category badges — never use them for buttons, text, or borders
- Set the hero headline at exactly 38px weight 500, centered, with no more than two lines
- Separate template cards with consistent 8px gaps in a 3-column grid
- Use #e6e6e6 for any hairline divider or card border — never a heavier gray
Don’t
- Don't introduce a chromatic CTA — the only filled action surface is #202020
- Don't use 12px radius on buttons or badges; 12px is reserved for cards only
- Don't add shadows to cards or buttons — elevation is implied by the white-on-white grid, not by drop-shadows
- Don't set body text below 12px or use weight 600 for anything smaller than 16px
- Don't alternate between sans-serifs or substitute PP Neue Montreal with a serif anywhere
- Don't place blue or violet on text, borders, or icon strokes — the chromatic colors are badge-fills only
- Don't use 4px or 8px radius on anything — the design has exactly two radii: 12px and 100px
Components
Hero Headline
Primary page title at the top of landing pagesCentered text, 38px PP Neue Montreal weight 500, line-height 1.11, color #333333. Two-line max, no decoration. Sits above a 16px subheading in #838383.
Primary Pill Button (Filled)
The only high-emphasis action — 'Get unlimited access', 'Subscribe', primary CTAs100px border-radius, background #202020, text #ffffff at 13–14px weight 500, horizontal padding 18px, vertical padding 10px. No border, no shadow. Sits as a compact pill, not a chunky button.
Filter Tab (Default)
Category filter in the tab bar above template gridTransparent background, text #333333 at 13px weight 500, no border, no padding fill — just a text label. Horizontal spacing of 18–22px between tabs.
Filter Tab (Active)
Selected category — 'All' in the default view100px border-radius pill, background #202020, text #ffffff at 13px weight 500, padding 8px 18px. Sits inline with default tabs as a visual anchor.
Template Card
Each preview thumbnail in the 3-column grid12px border-radius, no border, no shadow in resting state. The card is purely a frame for the template preview image; no padding inside — the thumbnail fills edge-to-edge. Cards sit on the white page with 8px gaps.
Category Badge
Chromatic tag on template cards or template detail100px border-radius, background #4177ff or #41a9ff, text #ffffff at 10–12px weight 500, padding 4px 10px. The only place saturated color appears in the interface chrome.
Secondary Pill Button (Ghost/Outlined)
Lower-emphasis actions beside the primary pill100px border-radius, transparent background, 1px border #555555, text #555555 at 13px weight 500. Used when a second action is needed without competing with the dark pill.
Top Nav Bar
Persistent header with brand mark and primary CTAFull-width white bar, 16–20px vertical padding, no border. Left: small 'P' wordmark in #333. Right: primary pill button (#202020). No navigation links visible in the captured screens — the nav is deliberately minimal.
Subheading Text
Supporting copy under hero headline14–16px PP Neue Montreal weight 400, color #838383, line-height 1.6. Centered, max-width matches headline width.
Chat Widget Bubble
Floating support/contact affordance in the bottom-rightCircular (100px radius), 40–48px diameter, background #202020, white icon glyph centered. No shadow or a single soft 5px drop-shadow at 45% black.
Surfaces & elevation
Level 0
Page Canvas
#ffffffThe entire page background — the gallery wall
Level 1
Template Card
#ffffffSame white as canvas; the thumbnail image provides the visual surface
Level 2
Filled Dark Surface
#202020Primary button, active tab, chat widget — the only non-white surface in the system
Jp uses almost no elevation. There is a single soft 5px/45% black shadow used on the floating chat widget only; cards, buttons, and modals rely on the white-on-white canvas and 12px radius to imply depth. This is a deliberately flat, editorial approach — the product IS the content (template previews), so chrome stays invisible.
Layout & imagery
Layout
Full-width page with a 1200px max-width content well. Above the fold: centered text stack (38px headline, 14–16px subheading, single dark pill CTA) on pure white, with a minimal top nav (logo left, CTA right). Below the fold: a horizontally centered filter tab bar (pill-shaped active state, ghost text for inactive), then a 3-column responsive grid of template cards with 8px gaps — no section dividers, no alternating bands, just a continuous gallery flowing top to bottom. Section rhythm is defined by the grid, not by visual breaks.
Imagery
The page is image-dominant below the fold: a 3-column masonry grid of full-bleed template preview thumbnails that fill their cards edge-to-edge with no padding, no border, no shadow. The thumbnails themselves are wildly varied — dark editorial layouts, bright orange product pages, lavender SaaS heroes, teal mobile app shots — so the gallery acts as a visual portfolio of the product's range. Above the fold is text-only; no hero image, no illustration, no decorative graphic. The 'P' wordmark is the only persistent brand glyph.
Design notes
Agent Guide
**Quick Color Reference** - text: #333333 - background: #ffffff - border: #e6e6e6 - accent (badges only): #4177ff - dark surface (filled button, active tab): #202020 - primary action: no distinct CTA color **Example Component Prompts** 1. Build a hero section: white (#ffffff) background, centered headline at 38px PP Neue Montreal weight 500 color #333333, line-height 1.11, 0.02em tracking. Subheading at 14px weight 400 color #838383. Below it, a filled pill button at 100px radius, background #202020, white text at 13px weight 500, padding 10px 18px. 2. Build a filter tab bar: horizontal row of tab labels at 13px weight 500 color #333333, 18–22px horizontal gap. The active tab is a pill at 100px radius, background #202020, white text, padding 8px 18px. No borders on any tab. 3. Build a 3-column template card grid: each card is a 12px-radius frame with no border and no shadow, containing a full-bleed preview image. 8px gap between columns and rows. No card padding — the image fills edge to edge. 4. Build a category badge: 100px radius, background #4177ff, white text at 11px weight 500, padding 4px 10px. Use this exact pattern for any chromatic tag. 5. Build the top nav: full-width white bar with 16px vertical padding, no border. Left side: a small 'P' wordmark in #333. Right side: the filled pill button (#202020, 100px radius) as the only nav action.
Radius System
Jp has exactly two radii in its entire design system: 12px for cards (template thumbnails) and 100px for everything interactive (buttons, tabs, badges, chat widget). There is no 4px, 6px, or 8px radius anywhere. This binary radius system is the single most recognizable trait of the visual language — the pill is the shape of the product.
Typography Personality
The 0.020em positive letter-spacing across PP Neue Montreal is an unusual choice for a geometric sans — it slightly opens the letterforms, giving the type a more editorial, less techy feel. Combined with the restrained 38px maximum size (most headlines you'd expect at 56–72px on competitor sites) and weight 500 (not 700), the typography whispers rather than shouts. An AI agent should resist the urge to scale headlines up: the restraint IS the brand.
Similar brands
Framer Showcase
Same template-gallery model with a 3-column grid of full-bleed preview cards, pill-shaped navigation, and a near-monochrome interface that lets the colorful template thumbnails dominate
Webflow Templates
Shared grid-of-previews layout with category filter pills above a card grid, though Jp's pill geometry (100px radius on everything) is more extreme
Dribbble Shots
Same editorial-gallery logic: white canvas, image-dominant grid below a minimal text header, no chrome competing with the showcased work
Minimal Gallery (Awwwards)
Shared typographic restraint — both use a single geometric sans at modest sizes, letting the featured work speak in full-bleed color while the chrome stays invisible
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
