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

# Obscura · Design System

> Pixel-art privacy on an open-sky canvas

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

Obscura pairs a sky-blue canvas and pixel-art display typography with a clear, approachable explanation of its privacy-first VPN. Warm orange CTAs, white information panels, and small retro illustrations give the long page a friendly, distinctive rhythm.

## North star

Keep the sky-blue field continuous, then use pixel-display headlines, crisp orange emphasis, and restrained white panels to make privacy feel approachable.

## Overview

The page uses a continuous pale-blue canvas as its defining visual field, carrying the same atmosphere from the hero through feature explanations, FAQs, the founder note, and the final CTA. Saturated orange marks primary actions and selected headline phrases, while dark charcoal anchors the pixel-style display text; muted gray keeps supporting copy quiet. Jersey 10 gives headings a chunky retro, game-like character, contrasted with readable Manrope for navigation, body copy, and controls. Centered headline-and-copy blocks alternate with two- and three-column feature arrangements, product UI comparisons, and a framed protocol explainer. White rounded cards make dense content legible without fragmenting the canvas. Pixel-art clouds, a small mascot, and software-interface imagery add personality and help explain the product. The footer shifts decisively to deep brown, providing a dark, grounded finish to the otherwise light page.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Open Sky | `#dceefe` | `--color-open-sky` | brand | Dominant page canvas across the hero and nearly every content section. |
| Signal Orange | `#ff5e24` | `--color-signal-orange` | accent | Primary CTA fill, emphasized headline words, selected links, and small interface highlights. |
| Soft Graphite | `#5c6066` | `--color-soft-graphite` | neutral | Secondary copy and understated labels, including status and supporting navigation text. |
| Panel White | `#ffffff` | `--color-panel-white` | surface | Navigation, cards, FAQ rows, and inset product or protocol panels. |
| Charcoal Ink | `#232629` | `--color-charcoal-ink` | neutral | Primary body text, navigation text, and dark display headlines. |
| Apricot Glow | `#ff7b50` | `--color-apricot-glow` | accent | Lighter orange accent detected in navigation and gradient styling; subordinate to the primary orange. |
| Cloudline | `#cedeed` | `--color-cloudline` | semantic | Subtle card and media outlines separating pale surfaces from the blue canvas. |
| Frost Mist | `#f6f8f7` | `--color-frost-mist` | surface | Very pale footer and heading details; a minor supporting neutral rather than a major section color. |
| Cocoa Footer | `#6c3200` | `--color-cocoa-footer` | brand | Distinctive dark-brown footer background, contrasting with the blue content canvas. |
| Quiet Silver | `#989ea4` | `--color-quiet-silver` | neutral | Low-emphasis text and minor labels; use sparingly beneath the main muted-text color. |
| Pale Divider | `#eeeeee` | `--color-pale-divider` | semantic | Minor light border detail, not a defining brand color. |

### Semantic aliases

`--color-canvas` → `#dceefe` (Open Sky) · `--color-surface` → `#ffffff` (Panel White) · `--color-surface-2` → `#6c3200` (Cocoa Footer) · `--color-text` → `#232629` (Charcoal Ink) · `--color-text-muted` → `#5c6066` (Soft Graphite) · `--color-text-subtle` → `#f6f8f7` (Frost Mist) · `--color-border` → `#cedeed` (Cloudline) · `--color-accent` → `#ff5e24` (Signal Orange) · `--color-accent-2` → `#ff7b50` (Apricot Glow) · `--color-accent-3` → `#6c3200` (Cocoa Footer) · `--color-on-accent` → `#ffffff` (Panel White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#232629` | `#dceefe` | 12.82:1 | AAA |
| `#232629` | `#ffffff` | 15.21:1 | AAA |
| `#232629` | `#6c3200` | 1.52:1 | fail |
| `#5c6066` | `#dceefe` | 5.33:1 | AA |
| `#5c6066` | `#ffffff` | 6.33:1 | AA |
| `#5c6066` | `#6c3200` | 1.59:1 | fail |
| `#f6f8f7` | `#dceefe` | 1.11:1 | fail |
| `#f6f8f7` | `#ffffff` | 1.07:1 | fail |
| `#f6f8f7` | `#6c3200` | 9.4:1 | AAA |
| `#ff5e24` | `#dceefe` | 2.57:1 | fail |

### Gradients

- `linear-gradient(oklab(0.266776 -0.00263395 -0.0065749 / 0.07) 0%, oklab(0.266776 -0.00263395 -0.0065749 / 0.00999999) 100%)`
- `linear-gradient(oklab(0.734146 0.138283 0.108516) 0%, rgb(255, 94, 36) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Manrope Variable | `--font-body` | webfont | 500, 400, 700, 600, 800 | Body copy, navigation, buttons, labels, and links. | Manrope |
| Jersey 10 | `--font-display` | webfont | 500, 400 | Display headlines and section headings with a pixel-art, arcade-like voice. | Press Start 2P |

- **Manrope Variable:** Use clear sans-serif text with mostly regular weights; buttons and selected links use a stronger weight. Avoid uppercase styling.
- **Jersey 10:** Chunky pixel display forms; use for headings rather than long copy, with compact tracking and varied headline scale.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 500 | 0.7 | -0.025em | — | Jersey 10 | Hero headline and oversized campaign-style display text. |
| h1 | 72px | 500 | 0.85 | -0.025em | — | Jersey 10 | Primary page headline and major section headlines. |
| h2 | 60px | 500 | 0.8 | -0.025em | — | Jersey 10 | Feature, protocol, FAQ, and CTA section headings. |
| h3 | 48px | 500 | 1 | -0.031em | — | Jersey 10 | Subsection headings and prominent feature titles. |
| h4 | 36px | 400 | 1.11 | 0 | — | Jersey 10 | Smaller card and supporting section headings. |
| body | 16px | 400 | 1.5 | 0 | — | Manrope Variable | Explanatory paragraphs and general content. |
| caption | 14px | 500 | 1.43 | 0 | — | Manrope Variable | Compact labels, image captions, and secondary metadata. |
| button | 14px | 600 | 1.43 | 0 | — | Manrope Variable | Primary Get Started and FAQ control labels. |
| nav | 16px | 500 | 1.5 | 0 | — | Manrope Variable | Main navigation and header links. |
| link | 14px | 500 | 1.43 | 0 | — | Manrope Variable | Inline calls to action and supporting text links. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 6, 8, 12, 16, 20, 24, 32, 64, 96 px.
- Section rhythm 96px · element gap 8px · card padding 16px · max content width —.

A spacious, vertically sequenced landing page sits on a consistent blue canvas, with a centered header and hero followed by broad section breaks. Centered introductions lead into two-column comparisons, three-column feature content, a wide protocol panel, a narrow centered FAQ list, and a split founder story. The measured sections use an 8px spacing base and a spacious density; preserve generous separation and readable card interiors rather than compressing content. No fixed maximum page width was measured, so follow the screenshot’s broad, centered composition without assuming a numeric cap.

## Shape & elevation

- Radius: button `6px` · card `16px` · media `16px` · nav `6px` · link `6px` · xs `6px` · sm `8px` · md `12px` · lg `16px` · xl `24px` · pill `9999px`
- Shadow `xl` (other, card, nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.01) 0px 49px 30px 0px, rgba(0, 0, 0, 0.03) 0px 2`
- Shadow `lg` (other, card, media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 34, 52, 0.01) 0px 27px 11px 0px, rgba(15, 34, 52, 0.02)`
- Shadow `inset` (button): `oklab(1 0 5.96046e-8 / 0.17) 0px 1px 0px 0px inset, oklab(1 0 5.96046e-8 / 0.03) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(255, 94, 36) 0px 0px 0p`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.630643 0.200076 0.105919 / 0.1) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `xl-2` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.266776 -0.00263395 -0.0065749 / 0.08) 0px 0px 0px 1px, rgba(1, 18, 35, 0.01) 0px 88px 53px`
- Shadow `xl-3` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The composition is mostly flat, with color and whitespace doing more work than deep shadows. White cards and interface panels sit clearly above the blue canvas through rounded corners, fine pale outlines, and subtle soft shadows. The navigation and CTA also receive restrained lift; avoid heavy, dark elevation.

## Imagery

Pixel-art clouds and a small character decorate the hero and lower CTA, reinforcing the retro display typography. Product screenshots and simplified network diagrams explain VPN behavior, while the founder section includes a real team photograph. Keep illustrations crisp and playful against the blue background; place interface imagery in light, framed panels and treat photography as a supporting editorial moment rather than the page’s visual anchor.

## Components

### Header navigation

White horizontal header with the Obscura wordmark, compact dark links, a status pill above, and an orange Get Started button.

### Hero announcement

Small pill-shaped Linux availability announcement, with an orange lead-in and a light surface above the centered display headline.

### Primary CTA

Orange filled Get Started button with white Manrope text, a small corner radius, and restrained inset highlight and shadow.

### Privacy comparison

Two side-by-side VPN data examples contrasting traditional visibility with Obscura’s separation of identity and activity, housed in outlined interface panels.

### Feature cards

Three white cards explain logs, email, and credit-card information with compact orange iconography and short supporting copy.

### FAQ accordion

Centered stack of white rounded question rows with compact copy and controls, plus Show All and Hide All actions above.

### Founder story

Split layout pairing a white text panel with a rounded team photograph and a small caption.

### Footer

Three-column deep-brown footer with brand/contact information, a short quotation, and grouped resource and community links.

### Measured component styles

- **Primary button** (“Get Started”): background #ff5e24 · text #ffffff · radius 6px · padding 8px 16px · 600 14px Manrope Variable · shadow oklab(1 0 5.96046e-8 / 0.17) 0px 1px 0px 0px inset, oklab(1 0 5.96046e-8 / 0.03)
- **Secondary button** (“New Now available on Linux”): background #f8fcff · text #ff5e24 · radius 3.35544e+07px · padding 0px 12px 0px 0px · 600 14px Manrope Variable · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“Not connected to Obscura”): background #ffffff · text #5c6066 · radius 6px · padding 0px · 400 14px Manrope Variable
- **Card** (“Jacob Williams 96.96.216.135 Visited wik”): background #ffffff · text #232629 · radius 12px · padding 16px · 400 14px Manrope Variable · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Product Learn Pricing Discord Log in Get”): transparent background · text #232629 · radius 0px · padding 0px · 400 16px Manrope Variable

## Do

- Use Open Sky #dceefe as the dominant page canvas.
- Set display headlines in a pixel-style face and keep paragraphs in a readable sans.
- Reserve Signal Orange #ff5e24 for primary actions and selective emphasis.
- Use white cards to organize dense product details and FAQ content.
- Keep generous space between sections and clear centered introductions.
- Use pixel-art details as supporting illustrations, not as decoration everywhere.

## Don't

- Do not replace the pale-blue canvas with a generic white background.
- Do not set long paragraphs in the pixel display font.
- Do not use orange for every heading, link, or interface element.
- Do not crowd sections or flatten every layout into one column.
- Do not add heavy shadows or dark outlines to every card.
- Do not mistake illustration colors for the core page palette.

## Agent prompt

Build a new Obscura-style page with a spacious, friendly privacy-software aesthetic. Use Open Sky #dceefe as the continuous canvas, Charcoal Ink #232629 for primary text, and Soft Graphite #5c6066 for secondary copy. Set bold, retro display headlines in a pixel-style font and use Manrope-like sans-serif typography for body text, navigation, and controls. Apply Signal Orange #ff5e24 to primary CTAs and selective headline or link emphasis. Arrange content in broad, well-separated sections with centered introductions, varied feature columns, and inset Panel White #ffffff cards with subtle outlines and gentle elevation. Use crisp pixel-art accents and product-interface visuals sparingly. End with a distinct Cocoa Footer #6c3200 section. Keep the page readable, playful, and restrained; do not invent extra colors or rely on heavy shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero beneath a compact white navigation bar; product interface preview anchors the lower area. | Linux availability notice, Primary Get Started CTA, Platform links | Pixel display headline, Orange emphasis, Pixel clouds and mascot, Software interface preview |
| 2 | comparison | Centered headline and intro above two side-by-side product-data panels. | Traditional versus Obscura comparison, Illustrated data examples | Two-column layout, White interface cards, Orange privacy highlights |
| 3 | feature-grid | Centered section heading above three evenly arranged feature cards. | Logs, email, and payment concerns explained | Three white cards, Small orange icons, Compact explanatory copy |
| 4 | feature-split | Centered title and copy above a wide explanatory network diagram. | More-detail link, Network restriction explanation | Pixel-art network symbols, Sparse diagram, Orange heading emphasis |
| 5 | how-it-works | Wide framed white panel with centered heading and explanatory content arranged across columns. | Technical details link, Two-party relay explanation | Rounded panel, Connected routing diagram, Pixel-style endpoint illustrations |
| 6 | faq | Centered intro above a narrow vertical list of expandable white question rows. | Show All and Hide All controls, Expandable questions, Support contact link | White rounded accordion rows, Compact icons, Orange inline emphasis |
| 7 | team | Two-column story with a white text panel beside a team photograph. | Founder note, Contact link, Photo caption | Editorial split layout, Rounded photo, White text card |
| 8 | cta | Centered closing headline, platform description, and primary action above the footer. | Get Started action, Other platforms link | Pixel headline, Orange CTA, Mascot on illustrated ground |
| 9 | footer | Full-width dark-brown band with three columns of brand, navigation, and community content. | Support email, Grouped resource links, Community destinations | Cocoa background, Light footer text, Pixel-art ground boundary |

## Source CSS custom properties (selected)

```css
--foreground: #232629;
--background: #dceefe;
--border: color-mix(in oklab, #232629 8%, transparent);
--destructive-foreground: #fdeded;
--primary: #ff5e24;
--primary-foreground: #ffede6;
--secondary: color-mix(in oklab, #c6cbcd 30%, transparent);
--secondary-foreground: #5c6066;
--muted-foreground: #989ea4;
--accent: #00000008;
--accent-foreground: #232629;
--info-foreground: #2473eb;
--success-foreground: #dcf9df;
--warn-foreground: #fff6d6;
--card-foreground: #232629;
--popover-foreground: #0a0a0a;
--radius: .5rem;
--ec-codeFontFml: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
--ec-codeFontSize: 0.85rem;
--ec-codeFontWg: 400;
--ec-codeBg: #fff;
--ec-codeFg: #24292e;
--ec-codeSelBg: #0366d625;
--ec-gtrFg: #1b1f2381;
--ec-gtrHlFg: #24292eab;
--ec-uiFontSize: 0.9rem;
--ec-uiFontWg: 400;
--ec-uiSelBg: #e2e5e9;
--ec-uiSelFg: #2f363d;
--ec-tm-lineMarkerAccentMarg: 0rem;
--ec-tm-lineMarkerAccentWd: 0.15rem;
--ec-tm-markBg: #9fb6ff80;
--ec-tm-insBg: #94c68480;
--ec-tm-delBg: #fea09280;
--ec-frm-edActTabBg: #fff;
--ec-frm-edActTabFg: #2f363d;
--ec-frm-edTabBarBg: #f6f8fa;
--ec-frm-edBg: #fff;
--ec-frm-trmTtbFg: #2f363d;
--ec-frm-trmTtbDotsFg: #2f363d;
```

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