---
title: "Planpoint design system"
variant: extended
source: https://www.planpoint.io/
captured_at: 2026-10-12
theme: light
industry: real-estate
generator: Design DNA (https://four.wiralomi.com/style/planpoint-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Planpoint · Design System

> Real estate software, framed in deep navy and electric blue

**Theme:** light · **Industry:** real-estate · **Source:** https://www.planpoint.io/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Planpoint pairs a dramatic navy hero and electric-blue highlights with an airy sequence of pale product-feature bands. Oversized Inter headlines, rounded calls to action, and interface imagery make the real-estate platform feel polished and approachable.

## North star

Use deep navy as the anchor, electric blue as a precise highlight, and generous pale feature bands to let product interfaces breathe.

## Overview

The page opens with a near-black navy hero, white navigation and headline, and blue emphasis on the second line; the carousel gives the product story a bright-blue focal panel. A white logo area transitions into repeated #f0f2f4 feature bands, where dark Inter headings and restrained copy sit beside clean interface mockups. These spacious, rounded sections establish a calm product-demo rhythm rather than a dense marketing grid. Bright blue returns as a full-bleed innovation block, while lower calls to action alternate navy and blue panels against white space. Inter is used throughout: heavy, tightly tracked display and heading styles contrast with relaxed body copy. Rounded pill buttons and large-radius cards soften the technical interface. Shadows are modest and mainly support media or card separation; pale borders and backgrounds do most of the structural work. Treat vivid blues inside screenshots as product imagery, not as additional site-brand colours.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, logo cloud, whitespace, and light section backgrounds; also the default text on dark or blue panels. |
| Midnight Ink | `#00051a` | `--color-midnight-ink` | brand | Hero and footer backgrounds, dark demo card, and primary text on pale sections. |
| Signal Blue | `#0f68ea` | `--color-signal-blue` | brand | Primary CTA fill, innovation section, carousel panel, feature emphasis, and blue links. |
| Cloud Gray | `#f0f2f4` | `--color-cloud-gray` | surface | Broad feature bands, contact panel, pale media surfaces, and subtle boundaries. |
| Skyline Blue | `#2e82e2` | `--color-skyline-blue` | accent | Secondary blue accent and gradient endpoint; use for restrained link or gradient variation. |
| Soft Silver | `#bfc0c6` | `--color-soft-silver` | semantic | Muted text and secondary links, especially where supporting copy sits against dark surfaces. |
| Blue-Black | `#000105` | `--color-blue-black` | surface | Near-black inverse surface detected in minor areas; visually subordinate to the main navy. |
| Deep Cobalt Ink | `#000a3b` | `--color-deep-cobalt-ink` | surface | Secondary deep inverse section tone, close to the navy hero and footer. |
| True Black | `#000000` | `--color-true-black` | semantic | Small instances of black text, including button or content details; not the main text system. |
| Iced Periwinkle | `#c3d9fa` | `--color-iced-periwinkle` | semantic | Minor pale-blue text detail; use only where a subdued blue note is needed, not as a dominant surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f0f2f4` (Cloud Gray) · `--color-surface-2` → `#00051a` (Midnight Ink) · `--color-surface-3` → `#000105` (Blue-Black) · `--color-surface-4` → `#000a3b` (Deep Cobalt Ink) · `--color-text` → `#00051a` (Midnight Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#bfc0c6` (Soft Silver) · `--color-border` → `#f0f2f4` (Cloud Gray) · `--color-accent` → `#0f68ea` (Signal Blue) · `--color-accent-2` → `#2e82e2` (Skyline Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#00051a` | `#ffffff` | 20.26:1 | AAA |
| `#00051a` | `#f0f2f4` | 18.05:1 | AAA |
| `#00051a` | `#000105` | 1.03:1 | fail |
| `#ffffff` | `#f0f2f4` | 1.12:1 | fail |
| `#ffffff` | `#00051a` | 20.26:1 | AAA |
| `#ffffff` | `#000105` | 20.86:1 | AAA |
| `#bfc0c6` | `#ffffff` | 1.81:1 | fail |
| `#bfc0c6` | `#f0f2f4` | 1.62:1 | fail |
| `#bfc0c6` | `#00051a` | 11.16:1 | AAA |
| `#bfc0c6` | `#000105` | 11.5:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgb(15, 104, 234), rgb(46, 130, 226))`
- `linear-gradient(90deg, rgb(15, 104, 234) 0%, rgb(89, 183, 255) 45%, rgb(15, 104, 234) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600, 700, 500 | All page typography, from navigation and body copy to display headings, links, and CTA labels. | Inter |

- **Inter:** Use measured weights 400, 500, 600, and 700. Headings are bold with tight negative tracking; body copy is regular and comfortably spaced.

### Type scale — Perfect Fifth (ratio ≈ 1.552, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 144px | 700 | 1.1 | -0.066em | — | Inter | Large hero display headline and prominent page-level statements. |
| h1 | 68.5px | 700 | 1 | -0.063em | — | Inter | Primary hero heading and highest-level page headline. |
| h2 | 50.5px | 700 | 1 | -0.071em | — | Inter | Major section headings, including innovation and world coverage. |
| h3 | 43px | 700 | 1.1 | -0.067em | — | Inter | Feature-panel and secondary section headlines. |
| h4 | 32.5px | 700 | 1.3 | -0.044em | — | Inter | Subheads and nested feature titles within content bands. |
| body | 16px | 400 | 1.6 | -0.027em | — | Inter | Supporting descriptions, product explanations, and testimonial copy. |
| caption | 14.5px | 500 | 1.6 | -0.04em | — | Inter | Small labels, helper copy, and details accompanying product visuals. |
| nav | 18px | 500 | 1.6 | -0.032em | — | Inter | Primary navigation labels and menu items. |
| link | 18px | 600 | 1.6 | -0.032em | — | Inter | Prominent inline links and action-oriented text links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 7, 11, 14, 20, 22, 25, 29, 32, 40, 43, 64, 72, 86, 108 px.
- Section rhythm 72px · element gap 14px · card padding 86px · max content width 1296px.

A centered, wide desktop composition uses a measured 1296px maximum page width and comfortable density. The hero and innovation block span broad dark or blue fields; the logo cloud and world section return to white. Feature content repeats in large pale bands, with text and interface media arranged as a split composition. Centered headings establish the hero and major brand moments, while feature copy is left-aligned. Section spacing is generous, with measured 72px section gaps and a 14px element gap; keep content uncluttered rather than compressing panels.

## Shape & elevation

- Radius: button `9999px` · card `9999px` · media `16px` · nav `50%` · link `20px` · xs `16px` · sm `20px` · md `29px` · pill `9999px`
- Shadow `md` (media): `rgba(20, 20, 43, 0.08) 0px 1px 12px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.06) 0px 8px 48px 0px`
- Shadow `md-2` (media): `rgba(0, 0, 0, 0.2) 0px 5px 15px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The overall treatment is mostly flat: colour bands, whitespace, and rounded surfaces provide hierarchy instead of heavy outlines. Measured shadows are reserved for media and cards, including a light media shadow and a broader card shadow. Avoid pervasive borders; pale gray hairlines and surfaces separate content quietly, while layered hero media creates the strongest depth.

## Imagery

The page prioritizes product UI mockups and interface-led media: floorplans, property-viewing tools, dashboards, and platform screens appear within pale feature bands. The hero uses a carousel panel layered over a dimmed background image, with a vivid blue overlay and rounded framing. Lower down, customer photography anchors a testimonial panel. Keep screenshots crisp and lightly framed; imagery is evidence of the product, while logos and photography remain supporting content.

## Components

### Navigation bar

Dark navy header with white logo and links, a thin divider, and a bright-blue pill-shaped Free trial action.

### Hero carousel

Centered white-and-blue headline above a rounded bright-blue story card; dimmed background media, circular blue arrows, and compact slide indicators support browsing.

### Logo cloud

Centered dark heading over a spacious white field of customer logos arranged in a loose multi-column grid.

### Feature bands

Repeated #f0f2f4 panels pair left-aligned Inter headings and explanatory copy with product UI media; rounded imagery and broad whitespace keep each feature distinct.

### Innovation CTA

Full-bleed #0f68ea section with centered white heading and copy, followed by a pale pill button.

### Contact panel

Pale-gray rounded panel centers a project-discussion heading and places dark pill actions for a virtual call and email beneath it.

### Demo cards

Two side-by-side rounded cards contrast a #00051a demo invitation with a #0f68ea how-it-works invitation, each using white copy and a light action pill.

### Footer

Deep navy footer combines a brand mark, a free-start prompt, a meeting action, and multiple columns of compact white links.

### Measured component styles

- **Primary button** (“Free trial”): background #0f68ea · text #ffffff · radius 57.6px · padding 0px 72px 0px 43.2px · 500 16.2px Inter
- **Secondary button** (“View new features”): background #f0f2f4 · text #000000 · radius 57.6px · padding 0px 72px 0px 43.2px · 500 16.2px Inter
- **Link** (“Planpoint Visit tour”): transparent background · text #ffffff · radius 0px · padding 0px · 600 18px Inter
- **Card** (“Book your demo One of our team members i”): background #00051a · text #ffffff · radius 28.8px · padding 86.4px · 400 16.2px Inter
- **Navigation item** (“Planpoint Visit Planpoint Viewer More Su”): transparent background · text #000000 · radius 0px · padding 0px · 400 16.2px Inter

## Do

- Anchor the page with Midnight Ink (#00051a).
- Reserve Signal Blue (#0f68ea) for key actions and featured moments.
- Use Cloud Gray (#f0f2f4) for broad product-feature bands.
- Set headings in bold Inter with tight tracking.
- Give UI mockups generous breathing room inside feature panels.
- Use rounded pill actions and softly rounded media framing.

## Don't

- Don't introduce unmeasured brand colours.
- Don't make every section a saturated colour block.
- Don't crowd product screenshots with copy or decoration.
- Don't use heavy borders as the main way to separate sections.
- Don't replace the spacious band rhythm with a dense grid.
- Don't treat vivid colours inside product mockups as page-brand colours.

## Agent prompt

Build a new Planpoint-style real-estate SaaS page using Inter throughout. Anchor the navigation and footer in Midnight Ink (#00051a), with white type and a Signal Blue (#0f68ea) pill CTA. Keep the canvas Gallery White (#ffffff); group product explanations into spacious Cloud Gray (#f0f2f4) bands, pairing concise left-aligned copy with crisp interface mockups. Use Skyline Blue (#2e82e2) only as a restrained accent or gradient partner. Make the hero bold and centered, with tightly tracked heavy headings, a blue-highlighted phrase, and a layered carousel or product visual. Alternate calm light sections with a single full-width blue innovation moment. Prefer rounded media and cards, soft shadows only where useful, and generous whitespace. Keep content hierarchy clear, interactions obvious, and decorative detail subordinate to the product.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark navy, centered headline above a layered carousel feature. | carousel navigation, primary trial action | white and blue headline, rounded blue media card, circular arrows |
| 2 | product-showcase | Navy full-width carousel area with a central showcase and surrounding slide content. | browse featured stories, view enterprise action | blue overlay card, carousel controls, slide indicators |
| 3 | logo-cloud | White section with centered heading and multi-column logo rows. | brand trust scan | centered heading, logo grid |
| 4 | feature-split | Wide pale-gray feature panel with copy aligned left and product media opposite. | learn about Visit | feature headline, supporting copy, rounded media surface |
| 5 | feature-split | Pale-gray band with explanatory copy on one side and a dashboard mockup on the other. | scan capability details | nested headings, dashboard mockup |
| 6 | product-showcase | Feature band balances short product copy with several overlapping interface visuals. | explore platform capabilities | UI collage, pale-gray background |
| 7 | feature-split | Pale-gray split panel with pricing benefits beside payment-related product imagery. | understand subscription terms | benefit headings, payment UI mockup |
| 8 | feature-split | Pale-gray feature band pairs customization copy with a themed viewer interface. | review customization options | template messaging, product screenshot |
| 9 | feature-split | Pale-gray split composition with support details beside messaging interface imagery. | learn about onboarding support | support copy, chat-style mockup |
| 10 | other | Minimal white strip with oversized pale device-category words. | recognize device coverage | large low-contrast type |
| 11 | cta | Full-bleed blue field with centered white message and a light pill button. | view new features | saturated blue background, centered CTA |
| 12 | other | White centered introduction above the customer showcase. | introduce global reach | centered heading, short supporting text |
| 13 | gallery | White-background image and link showcase arranged as a horizontal gallery row. | browse customer examples | linked image tiles |
| 14 | gallery | Continuation of the white linked-image gallery. | browse more examples | image tiles, compact links |
| 15 | gallery | Final white gallery row of linked customer imagery. | continue gallery browsing | linked media tiles |
| 16 | feature-grid | Two side-by-side rounded cards, one navy and one blue, each with a centered action. | schedule a demo, learn how it works | contrasting card fills, light pill buttons |
| 17 | contact | Pale-gray rounded panel with centered heading and two dark contact actions. | start virtual call, email support | centered content, dark pill links |
| 18 | testimonials | Dark testimonial panel with customer portrait on one side and quote content on the other. | read customer endorsement, view features | portrait media, white quote, brand mark |
| 19 | footer | Deep navy footer with top CTA row and multiple compact link columns. | start for free, book a meeting, navigate site | brand lockup, white links, multi-column directory |

## Source CSS custom properties (selected)

```css
--untitled-ui-primary700<deleted|variable-da4f7fa3>: #6941c6;
--color--brand--primary: #0f68ea;
--color--brand--secondary: #2e82e2;
--untitled-ui-primary600<deleted|variable-c514c1b4>: #7f56d9;
--untitled-ui--primary300: #d6bbfb;
--untitled-ui--primary50: #f9f5ff;
--color--gradient--primary: #0f68ea;
--color--gradient--secondary: #59b7ff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/planpoint-io