Signal Blue
#0f68eaPrimary CTA fill and outline, active nav accent, the single chromatic action color in the system
Planpoint
planpoint.ioWebsite preview
The design language
Planpoint uses a clean, white-canvas real estate blueprint aesthetic: generous whitespace, pill-shaped components, and bold confident display type that reads like a property floor plan drafted on quality paper. The interface is nearly monochromatic — near-black text (#1d1d1f) and white surfaces carry the entire structural weight — with a single vivid blue (#0f68ea) reserved exclusively for the primary action and a warm yellow (#ffcb00) that appears only as novelty punctuation. Components stay light and soft: large pill radii, one barely-there drop shadow at 6% opacity, and no decorative gradients or skeuomorphism. Typography is the dominant design element: Inter at extreme sizes (50–72px headlines, 144px display) with tight negative tracking gives the page architectural authority, while body text sits at a comfortable 16–18px with generous line height.
Color palette
brand
Deep Navy
#000a3bRare dark surface for featured cards or hero blocks — a near-black with depth
accent
Link Blue
#007affHyperlink color, icon stroke accent — Apple-system blue used for inline text links and interactive iconography
Highlight
#ffcb00Yellow action color for filled buttons, selected navigation states, and focused conversion moments.
neutral
Ink
#1d1d1fPrimary text, icon strokes, dark button fills — a slightly warm near-black chosen over pure black to feel printed rather than digital
White
#ffffffPage background, card surfaces, button text on dark fills, all input fields
Mist
#f0f2f4Subtle surface elevation, inactive button fills, secondary card backgrounds
Fog
#e5e6e8Hairline borders, subtle dividers, section separators
Carbon
#000000Navigation borders, pure-black accents where maximum contrast is needed
Slate
#333333Muted helper text, secondary image borders
Midnight
#00051aViolet action color for filled buttons, selected navigation states, and focused conversion moments.
Typography
Type scale
Minor Third (1.2) · 15px basedisplay-xl
144px · 700 · 0.9 · -3.89px trackingThe quick brown fox jumps
display
72px · 700 · 1 · -2.23px trackingThe quick brown fox jumps
heading-lg
50px · 700 · 1.1 · -1.65px trackingThe quick brown fox jumps
heading
43px · 700 · 1.15 · -1.55px trackingThe quick brown fox jumps
text-32
32px · 700 · 1.3The quick brown fox jumps
heading-sm
29px · 500 · 1.25 · -1.28px trackingThe quick brown fox jumps
text-23
23px · 400 · 1.6The quick brown fox jumps
subheading
22px · 600 · 1.3 · -1.32px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Inter
- Weights
- 400, 500, 600, 700
- Sizes
- 14, 16, 18, 22, 23, 29, 32, 43, 50, 72, 144
- Line height
- 1.50, 1.55, 1.60 for body; 1.10–1.30 for headings; 0.90–1.00 for display
- Letter spacing
- -0.07em at 14px, -0.06em at 22px, -0.044em at 29px, -0.036em at 43px, -0.031em at 72px, -0.027em at 144px — aggressive negative tracking at all sizes, compressing the geometric forms for density and modernity
- Fallback
- system-ui, -apple-system, Segoe UI, Roboto, sans-serif
- Features
- "cv11", "ss01"
Universal typeface for everything — nav, body, headings, display. Inter's geometric neutrality and broad weight range let the system scale from 14px captions to 144px display numbers without switching families. Display sizes at weight 600–700 with tight negative tracking create the site's architectural authority — headlines feel engraved, not styled.
Additional typeface
system-ui
- Weights
- 500
- Sizes
- 14
- Line height
- 1.50
- Letter spacing
- -0.0410em
- Fallback
- -apple-system, BlinkMacSystemFont, Segoe UI
Minor fallback for badge and link rendering where system speed matters over Inter's polish
Spacing & shape
Spacing
- Density
- spacious
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 14px
Border radius
tags
46.8pxcards
28.8pxbadges
100pxinputs
18pxbuttons
100pxSpacing scale
2px4px5px7px8px10px11px12px14px16px20px22px25px28px29px30px40px43px58px64px72px73px82px86px108px137px140px240px256pxGuidelines
Do
- Use Inter weight 700 at 50–72px for all page-level headlines with tracking between -1.65px and -2.23px — the tight negative tracking is what makes display type feel engraved.
- Use #0f68ea Signal Blue exclusively for the primary action button and active nav states; never as a background fill for cards or decorative blocks.
- Apply 100px border-radius to all buttons and tags — pill geometry is a signature element, not optional rounding.
- Use #ffcb00 Highlight only for novelty or status badges (≤1% of screen area); warm punctuation, not surface fill.
- Stack surfaces as #ffffff (base) → #f0f2f4 (elevated) → #0f68ea (brand) to maintain a clear elevation hierarchy without relying on heavy shadows.
- Maintain generous section gaps of 80px between major page sections; the spacious density is what gives the white canvas room to breathe.
- Use #1d1d1f Ink for all text and icon strokes — never #000000, the slight warmth reads as printed rather than digital.
Don’t
- Do not use #0f68ea as a text color for body copy or headings; it is an action color, not a typographic color.
- Do not apply gradients anywhere in the system — the blueprint aesthetic depends on flat, matte surfaces.
- Do not add decorative shadows beyond rgba(0,0,0,0.06) 0px 8px 48px 0px; heavier shadows break the lightweight feel.
- Do not use square or low-radius buttons (under 50px); the pill shape is non-negotiable.
- Do not introduce additional accent hues (greens, purples, reds) — the system is bichromatic plus yellow, and adding colors dilutes the brand.
- Do not use #ffffff borders on white surfaces; borders must be at least #f0f2f4 to remain visible.
- Do not set display type below weight 600 or above 72px without a specific reason — the 700/72px combination is the signature lockup.
Components
Primary Pill Button
Main call-to-action — the single filled blue buttonFilled with #0f68ea (Signal Blue), white text at 16px Inter weight 500–600, fully rounded at 100px radius, padding 20px 22px. Sits prominently in nav and hero. One soft shadow at rgba(0,0,0,0.06) 0px 8px 48px 0px gives it lift without heaviness.
Dark Pill Button
Secondary navigation CTA in headerDark fill (#1d1d1f Ink), white text, 100px radius, 22px padding horizontal, 20px vertical. Used for nav-level actions like "Free trial" where the blue would compete with primary content CTAs.
Outline Pill Button
Tertiary or paired actionTransparent fill, 1px border in #1d1d1f or #ffffff, matching text color, 100px radius, 22px padding. Used for "See what's new" and "Book a demo" paired beneath hero video.
New Badge
Novelty indicator on features or announcementsYellow fill (#ffcb00 Highlight), dark text (#1d1d1f) at 14px Inter weight 500, fully rounded pill (100px), padding 2px 10px. Appears as warm punctuation next to feature names like "Redesigned Editor".
Hero Section
First-screen value propositionWhite canvas, centered headline at 72px Inter weight 700 with -2.23px tracking, #1d1d1f color. Subhead at 18px in #1d1d1f or muted gray. Below: a 16:9 video embed with a solid blue (#0f68ea) background frame and white play button.
Video Embed Frame
Product demonstration containerFull-bleed #0f68ea blue background panel containing the video player. The blue frame makes the video the page's visual anchor and reinforces the brand color as action-driven.
Trust Headline
Social proof section titleCentered at 43px Inter weight 600, #1d1d1f, -1.55px tracking, with two lines: "Trusted by successful developers, property owners & marketing teams alike."
Logo Cloud
Client/partner logos gridLogos displayed in 3-row grids of 6–7 columns, each logo in a #f0f2f4 (Mist) pill-shaped container with 18px radius. Logos rendered in their native brand colors to add visual variety while the neutral containers keep rhythm consistent.
Top Navigation Bar
Site-wide headerWhite background, 64–80px tall. Left: blue diamond logo + "Planpoint" wordmark in #1d1d1f. Center-left: text nav links in 16px Inter weight 500, #1d1d1f. Right: language flag icon, "Support", "Login" text links, then dark pill CTA "Free trial" with right-arrow icon.
Card Surface
Content containers, logo tiles, feature blocksWhite (#ffffff) or Mist (#f0f2f4) background, 28.8px border radius, 24px padding. Optional 1px border in #f0f2f4 or #e5e6e8. Soft shadow at rgba(0,0,0,0.06) 0px 8px 48px 0px for elevation when needed.
Input Field
Form text inputs (not visible in screenshots but implied by system)White fill, 1px border in #e5e6e8 (Fog), 18px radius, 16px Inter placeholder text in #333333. Focus state: border shifts to #0f68ea Signal Blue.
Surfaces & elevation
Level 0
Canvas
#ffffffPrimary page background — the white drafting paper
Level 1
Surface
#f0f2f4Card backgrounds, logo containers, inactive button fills — subtle elevation above canvas
Level 2
Brand Surface
#0f68eaVideo frame, hero accent panel — the only chromatic surface
Level 3
Dark Surface
#000a3bRare deep accent for featured cards or contrast sections
Level 4
Accent Surface
#ffcb00Novelty badges, status indicators — warm highlight puncturing the cool palette
Primary CTA Button
rgba(0, 0, 0, 0.06) 0px 8px 48px 0px
Elevated Card
rgba(0, 0, 0, 0.06) 0px 8px 48px 0px
Hero Video Frame
rgba(0, 0, 0, 0.06) 0px 8px 48px 0px
Layout & imagery
Layout
Max-width 1200px centered container, generous 80px section gaps. The hero is a centered text stack (badge → headline → subhead → video) on a white canvas, with the video framed in a full-width #0f68ea blue band that breaks out of the max-width constraint. Below the hero: a centered button pair (outline pills) on white space, followed by a social proof section with a centered 43px headline and a 3-row logo cloud grid. Navigation is a top-fixed bar with horizontal text links and a right-aligned dark pill CTA. The rhythm is vertical and stack-based — no sidebar, no asymmetric split layouts, just centered blocks with breathing room.
Imagery
Photography is minimal — the design relies on product UI screenshots embedded in a video demo rather than lifestyle or property photography. The video player and product interface captures do the visual storytelling. The logo cloud uses brand-colored wordmarks in muted neutral pill containers, letting each partner's identity contribute a small chromatic moment without overwhelming the page. Icons are stroke-based, minimal, and rendered in #1d1d1f — small, functional, never decorative. The overall visual language is UI-first: screens, dashboards, and plan viewers, not photography.
Design notes
Agent Guide
**Quick Color Reference** - background: #ffffff - surface: #f0f2f4 - text: #1d1d1f - border: #e5e6e8 - accent: #0f68ea (Signal Blue) - badge: #ffcb00 (Highlight) - primary action: #0f68ea (filled action) **Example Component Prompts** 1. Create a hero section: white (#ffffff) background. Centered "New" badge — yellow (#ffcb00) pill fill, #1d1d1f text at 14px Inter weight 500, 100px radius, 2px 10px padding. Headline at 72px Inter weight 700, #1d1d1f, letter-spacing -2.23px. Subhead at 18px Inter weight 400, #1d1d1f, line-height 1.55. Below: a full-width blue (#0f68ea) band containing a 16:9 video player with a centered white play button. 2. Create a primary CTA button: #0f68ea fill, white text, 16px Inter weight 600, 100px border-radius, 20px 22px padding, soft shadow rgba(0,0,0,0.06) 0px 8px 48px 0px. 3. Create a logo cloud row: 6–7 items in a horizontal grid, each logo inside a #f0f2f4 pill container with 18px border-radius and 14px padding. Logos centered, rendered at native colors. 4. Create a top navigation bar: white background, 72px height. Left: blue diamond logo glyph + "Planpoint" wordmark in #1d1d1f. Center: 16px Inter weight 500 nav links in #1d1d1f. Right: "Support" and "Login" text links, then a dark (#1d1d1f) pill button "Free trial" with white text, 100px radius, 20px 22px padding, and a right-arrow icon. 5. Create a trust headline section: centered 43px Inter weight 600, #1d1d1f, letter-spacing -1.55px, line-height 1.15. Two lines of text on white background with 80px vertical padding above and below.
Similar brands
Mapbox
Same white-canvas approach with a single vivid blue accent and bold display type for a map/data product
Figma
Pill-shaped buttons, clean white surface stack, and aggressive negative tracking on display type
Linear
Spacious layout, Inter typeface, near-black text (#1d1d1f family), and minimal shadow usage for a product UI feel
Arc browser
Near-monochrome palette with one chromatic action color and pill geometry on all interactive elements
Vercel
Centered hero stacks, generous section gaps, Inter at extreme sizes with tight tracking, and flat matte surfaces
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
