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

# Portal · Design System

> A calm editorial canvas for a colorful freelance toolkit

**Theme:** light · **Industry:** saas · **Source:** https://useportal.net/ · **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._

Portal pairs a quiet, light canvas and literary serif headlines with vivid product imagery to present an all-in-one freelance toolkit. The long homepage moves from a cinematic hero through feature explanations, payment details, pricing, a founder memo, and a final beta invitation.

## North star

Keep the interface calm and editorial, letting expressive product artwork carry the color and personality.

## Overview

The page uses a soft off-white canvas (#f7f7f7) throughout, creating a quiet backdrop for black headings, muted charcoal copy, and compact interface details. The first screen makes the strongest visual statement: a blue-to-lilac twilight scene with stars, a pink horizon, and a large framed product preview. Treat that gradient as hero artwork rather than a site-wide interface colour; the measured interface palette remains restrained. Perfectly Nineties Regular gives headings a literary, editorial character, while Inter handles navigation, body copy, and utility text. A narrow centered content column alternates with two-column feature explanations, small interface mockups, and generous gaps between sections. Rounded cards and screens provide soft framing without turning the page into a dense dashboard. Bright blue is reserved for beta actions and small functional highlights, while vivid colors inside mockups and illustrations remain supporting product imagery.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Quiet Canvas | `#f7f7f7` | `--color-quiet-canvas` | surface | Page canvas and recurring background across the long sequence of content sections. |
| Soft Graphite | `#3e3e3e` | `--color-soft-graphite` | neutral | Muted body copy and supporting text beneath the darker editorial headings. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Cards, interface mockup panels, navigation details, and light contrast within product previews. |
| Ink | `#000000` | `--color-ink` | neutral | Primary headings, body text, and standard link or interface text. |
| Portal Blue | `#007aff` | `--color-portal-blue` | accent | Primary beta button and small functional highlights; bright colors inside mockups are imagery, not the core UI palette. |
| Slate Note | `#636363` | `--color-slate-note` | neutral | Sparse secondary text details; visually subordinate and not a defining brand color. |

### Semantic aliases

`--color-canvas` → `#f7f7f7` (Quiet Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#3e3e3e` (Soft Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-accent` → `#007aff` (Portal Blue) · `--color-on-accent` → `#000000` (Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f7f7f7` | 19.6:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#3e3e3e` | `#f7f7f7` | 9.98:1 | AAA |
| `#3e3e3e` | `#ffffff` | 10.7:1 | AAA |
| `#ffffff` | `#f7f7f7` | 1.07:1 | fail |
| `#007aff` | `#f7f7f7` | 3.75:1 | AA-large |
| `#007aff` | `#ffffff` | 4.02:1 | AA-large |

### Gradients

- `linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600, 500 | Navigation, body copy, captions, and links. | Inter |
| Perfectly Nineties Regular | `--font-display` | webfont | 400 | Large editorial hero and section headings. | DM Serif Display |

- **Inter:** Regular weight dominates; measured body and navigation use subtly tight tracking and sentence case.
- **Perfectly Nineties Regular:** Regular weight, sentence case, and open, literary forms; use for prominent headings rather than utility text.

### Type scale — Custom (ratio ≈ 1.732, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 1 | 0 | — | Perfectly Nineties Regular | Centered two-line hero headline. |
| h2 | 36px | 400 | 1 | 0 | — | Perfectly Nineties Regular | Editorial headings introducing major feature and content sections. |
| body | 16px | 400 | 1.35 | -0.02em | — | Inter | Explanatory paragraphs and supporting descriptions. |
| caption | 12px | 400 | 1.3 | -0.02em | — | Inter | Compact labels and secondary interface details. |
| nav | 16px | 400 | 1.35 | -0.02em | — | Inter | Header navigation links. |
| link | 16px | 400 | 1.35 | -0.02em | — | Inter | Inline and footer links. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 36, 40, 60, 80 px.
- Section rhythm 80px · element gap 10px · card padding 20px · max content width 600px.

A narrow centered content column organizes most sections, with measured page maximum width of 600px and comfortable density. The hero centers its headline, copy, and CTA above a large framed product preview. Below, editorial sections are left-aligned; feature groups alternate between two-column text and image arrangements, while some content remains a single column. Section rhythm is spacious, with a measured section gap of 80px and 20px card padding. The consistent light canvas makes changes in composition and imagery—not section background bands—the primary way to distinguish blocks.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `22px` · nav `9999px` · link `7px` · xs `5px` · sm `7px` · md `12px` · lg `14px` · xl `16px` · 2xl `21px` · pill `9999px`
- Shadow `hairline` (card): `rgb(247, 247, 247) 0px 0px 0px 5px`
- Shadow `inset` (other): `rgba(255, 255, 255, 0.6) 0px 0.5px 0px 0.5px inset, rgba(255, 255, 255, 0.4) 0px 0px 30px 0px inset, rgba(255, 255, 255, 0.8) 0px 0px 12px 0px inset`
- Shadow `inset-2` (other): `rgba(255, 255, 255, 0.6) 0px 0.5px 0px 0.5px inset`
- Shadow `hairline-2` (card): `rgba(0, 0, 0, 0.07) 2px 8px 2px 0px`
- Shadow `hairline-3` (other): `rgb(247, 247, 247) 0px 0px 0px 1px`
- Shadow `inset-3` (link): `rgb(255, 255, 255) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 3px 2px 0px`
- Motion: standard transition `0.4s cubic-bezier(0.44, 0, 0.56, 1)` on interactive elements.

The page is mostly flat, relying on whitespace and composition rather than borders or heavy shadows. Rounded white cards and framed media create gentle separation; measured card corners are 24px. Use subtle inset highlights and faint shadowing on selected mockups, not as a repeated dashboard treatment.

## Imagery

The hero uses a cinematic illustrated landscape with a starry blue-lilac sky, pink sunset, and a product portal framed over the scene. Further down, small product UI previews, payment cards, service examples, and a layered portfolio showcase demonstrate the toolkit. The imagery mixes interface mockups with colorful illustration; keep vivid mockup colors contained within media rather than spreading them across the page chrome.

## Components

### Top navigation

Small brand mark at left and compact Product, Blog, and Contact links at right, over the hero artwork.

### Hero CTA

A centered pill-shaped Join beta action; the measured accent is #007aff, with a subtle inset highlight.

### Framed product preview

Large rounded media frame containing a digital project portal, set against the illustrated sunset landscape.

### Feature rows

Alternating two-column text and product mockups explain proposals, subscriptions, payments, file transfer, and contracts.

### How-it-works list

Five sequential steps use blue numbered markers and concise descriptions to explain the path from project setup to payment.

### Pricing note

A compact editorial pricing section pairs a small blue percentage graphic with short explanatory copy.

### Founder memo

A white rounded letter-like card uses long-form text and a founder signature and portrait detail.

### Closing beta CTA

Centered closing headline and copy, product mark, and a blue pill action above the footer.

### Measured component styles

- **Primary button** (“Join beta”): background #007aff · text #000000 · radius 50px · padding 0px 36px · 400 12px sans-serif · shadow rgb(140, 194, 255) 0px 1px 0px 1px inset
- **Link** (“Droppable”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter
- **Card** (“New Payment Received +4,500€ 10:02 AM”): background #fcfcfc · text #000000 · radius 24px · padding 20px · 400 12px sans-serif
- **Navigation item** (“Product Blog Contact”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use #f7f7f7 as the continuous page canvas.
- Reserve the serif display face for prominent headings.
- Keep body text in Inter with clear visual hierarchy.
- Center the hero and final beta invitation.
- Alternate editorial copy with relevant product previews.
- Let colorful artwork stay inside media frames.
- Use rounded cards and soft, restrained elevation.

## Don't

- Do not turn the whole interface into a blue gradient.
- Do not use vivid mockup colors as general UI colors.
- Do not make every section a card.
- Do not compress the generous section rhythm.
- Do not use the display serif for dense paragraphs.
- Do not add heavy borders or deep shadows.
- Do not center-align every lower-page feature.

## Agent prompt

Build a new Portal-style page as a calm editorial canvas, not a conventional SaaS dashboard. Use Quiet Canvas (#f7f7f7) as the continuous background, Ink (#000000) for prominent text, and Soft Graphite (#3e3e3e) for supporting copy. Use a literary serif display face for section headlines and Inter for navigation, body, and utility text. Keep the content in a narrow centered column, with generous vertical separation and selected two-column feature rows. Use Gallery White (#ffffff) for product panels and Portal Blue (#007aff) sparingly for primary actions and functional accents. Place colorful illustrations and interface mockups inside rounded media frames; let imagery carry the visual drama. Keep elevation subtle, prioritize whitespace, and vary alignment by section rather than adding colored bands.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline, supporting copy, CTA, and large framed preview under the top navigation. | primary beta action, product preview | cinematic illustrated backdrop, serif headline, pill CTA |
| 2 | feature-split | Left-aligned editorial introduction followed by a compact two-column capability list and small product visuals. | benefit explanation, capability overview | serif section heading, small feature icons, subtle divider |
| 3 | feature-grid | Introductory copy followed by alternating two-column feature rows with UI mockups. | feature education, workflow details | alternating image and text, rounded interface previews |
| 4 | feature-grid | Section introduction followed by a two-column set of payment and subscription feature blocks. | payment education, payment options | compact feature grid, small colorful icons |
| 5 | product-showcase | Editorial copy above a centered layered portfolio preview. | visual product discovery, brand personalization | overlapping rounded screens, colorful mockup media |
| 6 | how-it-works | Single-column introduction followed by five vertically ordered numbered steps. | step-by-step explanation, progression cues | blue numbered markers, compact supporting text |
| 7 | pricing | Compact left-aligned pricing copy with a small visual percentage marker and comparison note. | fee transparency, pricing clarification | small blue percentage graphic, editorial text block |
| 8 | other | A centered white letter-style card sits within the light canvas. | brand story, founder introduction | rounded white card, signature and founder portrait |
| 9 | cta | Centered closing message and CTA, followed by a compact footer with links. | beta signup invitation, footer navigation | brand mark, blue pill CTA |

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