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

# Portal · Design System

> A dark, media-led gateway to game creation

**Theme:** dark · **Industry:** gaming · **Source:** https://www.portalgaming.com/ · **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 black, cinematic hero with compact dark panels that introduce its creation tools, events, and community resources. Bright white calls to action and restrained lavender accents keep the interface legible without competing with vivid game imagery.

## North star

Keep the interface almost black and structurally quiet so white actions and vivid game media carry the attention.

## Overview

The page is built around a near-black canvas, with subtle charcoal section bands separating the hero, onboarding content, events, and FAQs. White headings and controls provide the strongest contrast; muted grays carry secondary copy, while pale lavender appears sparingly in links and selected interface details. Inter supplies a consistent geometric sans-serif voice, with heavy, tightly tracked display headings and compact uppercase button labels. The hero centers its headline above a row of dark, rounded media cards and a prominent white account CTA. Below it, the layout shifts into left-aligned, modular content: a partner logo strip, a broad Getting Started showcase, four event cards, then a two-column FAQ and events area. Game artwork, promotional thumbnails, and embedded media introduce saturated color inside otherwise subdued frames. Fine borders and modest radii define panels; the overall effect stays flat and controlled rather than glossy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Void Black | `#000000` | `--color-void-black` | brand | Primary canvas for the cinematic hero, media framing, and footer. |
| Coal Panel | `#0c0c10` | `--color-coal-panel` | surface | Core dark surface for the Getting Started section and interface panels. |
| Portal White | `#ffffff` | `--color-portal-white` | neutral | High-contrast headings, primary CTA fills, and key foreground text. |
| Midnight Slate | `#12121a` | `--color-midnight-slate` | surface | Raised cards, dark links, and secondary content surfaces. |
| Soft Silver | `#e2e2e2` | `--color-soft-silver` | neutral | Secondary explanatory text on dark backgrounds. |
| Panel Edge | `#1e1e2a` | `--color-panel-edge` | semantic | Fine borders separating cards, links, and controls from dark surfaces. |
| Quiet Gray | `#9a9a9c` | `--color-quiet-gray` | neutral | Muted supporting copy and low-emphasis interface text. |
| Cloud Gray | `#bdbdbf` | `--color-cloud-gray` | neutral | Occasional mid-tone text; use for supporting details, not primary emphasis. |
| Ash Text | `#7b7b7e` | `--color-ash-text` | neutral | Low-priority secondary copy within the dark interface. |
| Live Red | `#dc2626` | `--color-live-red` | semantic | LIVE event badge; a small status signal rather than a brand surface. |
| Steel Muted | `#767d8c` | `--color-steel-muted` | neutral | Muted navigation and footer links. |
| Border Slate | `#2a2a38` | `--color-border-slate` | semantic | Subtle card outlines, notably around FAQ panels. |
| Deep Fade | `#020203` | `--color-deep-fade` | surface | Near-black tone present in measured gradient transitions and media treatment. |
| Body Gray | `#b0b0b0` | `--color-body-gray` | neutral | Measured body-text color used for subdued descriptive copy. |
| Lavender White | `#f1ecff` | `--color-lavender-white` | accent | Pale violet-tinted text on dark cards and link-like elements. |
| Footer Charcoal | `#1f1f1f` | `--color-footer-charcoal` | surface | Near-black footer detail, providing subtle separation from the canvas. |
| Portal Lavender | `#b5a8ed` | `--color-portal-lavender` | accent | Sparse brand accent for selected text and interface highlights. |

### Semantic aliases

`--color-canvas` → `#000000` (Void Black) · `--color-surface` → `#0c0c10` (Coal Panel) · `--color-surface-2` → `#12121a` (Midnight Slate) · `--color-text` → `#ffffff` (Portal White) · `--color-text-muted` → `#e2e2e2` (Soft Silver) · `--color-text-subtle` → `#9a9a9c` (Quiet Gray) · `--color-border` → `#1e1e2a` (Panel Edge) · `--color-accent` → `#b5a8ed` (Portal Lavender)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#0c0c10` | 19.52:1 | AAA |
| `#ffffff` | `#12121a` | 18.63:1 | AAA |
| `#e2e2e2` | `#000000` | 16.21:1 | AAA |
| `#e2e2e2` | `#0c0c10` | 15.07:1 | AAA |
| `#e2e2e2` | `#12121a` | 14.38:1 | AAA |
| `#9a9a9c` | `#000000` | 7.48:1 | AAA |
| `#9a9a9c` | `#0c0c10` | 6.95:1 | AA |
| `#9a9a9c` | `#12121a` | 6.63:1 | AA |
| `#b5a8ed` | `#000000` | 9.79:1 | AAA |

### Gradients

- `linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 28%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.22) 72%, rgb(0, 0, 0) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.28) 42%, rgba(0, 0, 0, 0.88) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.82) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 500, 700, 600, 400, 800 | All interface typography, from hero headings and navigation to cards, buttons, and footer copy. | Inter |

- **Inter:** Use bold weights for headings and buttons; button and eyebrow labels are uppercase with loose tracking, while headings use compact tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.379, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 42px | 800 | 1 | 0.031em | — | Inter | Hero headline announcing the game-creation proposition. |
| h2 | 26px | 700 | 1.2 | -0.02em | — | Inter | Section titles such as Getting Started and Upcoming Events. |
| h3 | 21.5px | 600 | 1.35 | 0 | — | Inter | Card or subsection headings within content modules. |
| body | 16px | 700 | 1.3 | -0.02em | — | Inter | Emphasized explanatory copy and primary card descriptions. |
| caption | 14px | 500 | 1.4 | 0 | — | Inter | Compact metadata, event dates, and secondary labels. |
| button | 13px | 700 | 1 | 0.04em | uppercase | Inter | Uppercase labels on primary and account actions. |
| nav | 14px | 600 | 1.43 | 0 | — | Inter | Header links and footer navigation items. |
| link | 16px | 400 | 1.5 | 0 | — | Inter | Inline and card-based links to tools and resources. |
| eyebrow | 13px | 700 | 1 | 0.04em | uppercase | Inter | Small uppercase labels used to introduce interface content. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 19, 20, 27 px.
- Section rhythm 54px · element gap 3px · card padding 19px · max content width 1136px.

Use a centered content frame capped at the measured 1136px maximum, with the hero centered and subsequent section headings aligned left. The page moves from a full-width cinematic hero into a slim partner strip, then broad media-led onboarding, a four-column event row, and a two-column FAQ/events band. Section backgrounds alternate between black and subtly lighter charcoal rather than using strong color blocks. Keep spacing comfortable and content modular, with the measured 54px section gap as the rhythm reference.

## Shape & elevation

- Radius: button `8px` · card `14px` · media `8px` · badge `9999px` · link `14px` · xs `4px` · sm `8px` · md `12px` · lg `14px` · xl `16px` · 2xl `18px` · pill `9999px`
- Shadow `hairline` (media): `rgba(96, 165, 250, 0.15) 0px 0px 0px 1px`
- Shadow `md` (button): `rgba(0, 0, 0, 0.22) 0px 2px 12px 0px`
- Shadow `hairline-2` (other): `rgba(255, 255, 255, 0.06) 0px 0px 0px 1px`
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat, relying on charcoal surface shifts and fine borders instead of strong shadows. Cards use measured dark outlines and rounded corners; the primary CTA has a restrained shadow for separation. Media may receive a subtle hairline edge. Use overlap and gradients only to layer hero imagery without making the page feel glossy.

## Imagery

Use vivid game art, tool previews, and promotional media as focal points inside dark rounded frames. The hero combines small creation previews with a wider trending panel, while onboarding uses a large media showcase and narrow step cards. Preserve the page’s restrained treatment around imagery: black surroundings, soft dark overlays, and gradients that fade media into the canvas. Logos remain compact and monochrome where possible; saturated color belongs mainly to artwork and event icons.

## Components

### Header

Minimal black top bar with Portal identity, a compact app-grid control, and a white uppercase LOG IN button.

### Hero CTA

Centered white account button with uppercase Inter label, dark text, rounded corners, and a soft measured shadow.

### Creation previews

Dark rounded media cards for asset and game creation, paired with short captions and vivid preview artwork.

### Partner strip

Narrow charcoal band carrying a horizontally aligned row of partner and tool logos.

### Event cards

Four compact event links on a dark section, with title, date, small icon tile, and rounded LIVE or ENDED badge.

### FAQ panel

Dark FAQ preview card with a subtle #2a2a38 border, concise explanatory copy, and a supporting icon.

### Footer

Black two-column footer with Portal identity, subdued utility links, social icons, and copyright text.

### Measured component styles

- **Primary button** (“LOG IN”): background #ffffff · text #0a0a0e · border 1px solid #ffffff · radius 4px · padding 8px 20px · 700 11.664px Inter · uppercase
- **Secondary button** (“1. Account Create one account for models”): background #12121a · text #f1ecff · border 1px solid #1e1e2a · radius 13.6px · padding 0px · 400 16px Inter
- **Link** (“2. Assets Create game-ready sprites, aud”): background #12121a · text #f1ecff · border 1px solid #1e1e2a · radius 13.6px · padding 0px · 400 16px Inter
- **Card** (“Get answers to the most common questions”): transparent background · text #f1ecff · border 1px solid #2a2a38 · radius 12px · padding 18.4px 19.2px · 400 16px Inter
- **Badge** (“ENDED”): background #4b5563 · text #ffffff · radius 999px · padding 2.9px 8px · 700 10px Inter · uppercase
- **Navigation item** (“LOG IN”): transparent background · text #f1ecff · radius 0px · padding 0px · 400 16px Inter

## Do

- Use near-black as the dominant page canvas.
- Separate content with subtle charcoal section bands.
- Reserve bright white for headings and primary actions.
- Keep lavender accents sparse and functional.
- Frame colorful game media inside dark panels.
- Use Inter consistently across interface elements.

## Don't

- Do not turn the interface into a bright, colorful dashboard.
- Do not use vivid accents as large background fields.
- Do not compete with artwork using decorative gradients.
- Do not add heavy shadows to every card.
- Do not center all lower-page content; align sections left.
- Do not make secondary copy as bright as primary headings.

## Agent prompt

Build a new Portal-style page with a cinematic, nearly black canvas. Use Void Black (#000000) for the main background, Coal Panel (#0c0c10) and Midnight Slate (#12121a) for alternating content surfaces, and Panel Edge (#1e1e2a) for restrained outlines. Set all text in Inter; use bold white headings, muted gray supporting copy, and uppercase button labels. Keep the hero centered with a clear headline, media previews, and a prominent white CTA. Organize lower content into left-aligned modular sections, with compact cards and generous separation. Use vivid artwork only inside dark media frames; apply lavender accents sparingly. Favor subtle borders and modest corner rounding over pronounced shadows, and preserve a clear hierarchy between actions, headings, and secondary information.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width black hero with centered headline, media cards, and account CTA. | Primary account conversion, Tool discovery | Centered headline, Media preview cards, White primary CTA |
| 2 | how-it-works | Partner logo strip followed by a broad media-led onboarding showcase. | Partner reassurance, Sequential onboarding | Logo cloud, Large media frame, Step cards |
| 3 | content-feed | Four event cards arranged in a horizontal row on a slightly lighter dark band. | Event discovery, Status scanning | Event links, Date metadata, LIVE and ENDED badges |
| 4 | faq | Two-column dark section pairing an FAQ preview with an events list. | Help discovery, Related content navigation | Outlined FAQ card, Compact linked event list, More links |
| 5 | footer | Black footer with brand and copyright at left, utility links and social controls at right. | Utility navigation, Legal access | Brand mark, Muted links, Social icons |

## Source CSS custom properties (selected)

```css
--site-bg: #000;
--portal-hover-border: #c3b5ff8c;
--portal-hover-bg: #2b2937;
--portal-hover-shadow: 0 12px 28px #00000059, 0 0 14px #a88cff47, 0 0 28px #c3b5ff29;
--site-text-title: #fff;
--site-text-body: #b0b0b0;
--site-text-lead: #ffffffa3;
--site-text-hero-lead: #fffc;
--site-surface-panel-bg: #ffffff1a;
--site-space-section-y: clamp(5rem, 10vh, 7.5rem);
--site-space-section-x: clamp(1.25rem, 5vw, 5rem);
--site-space-xs: .5rem;
--site-space-sm: 1rem;
--site-space-md: 2rem;
--site-space-lg: 2.5rem;
--site-space-xl: 4rem;
--site-space-btn-x: 3rem;
--site-space-btn-y: 1rem;
--site-space-btn-h: 3.5rem;
```

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