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

# Shade · Design System

> A dark canvas for a media-first product story

**Theme:** dark · **Industry:** saas · **Source:** https://shade.inc/ · **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._

Shade presents its cloud NAS as a dark, spacious product showcase, pairing restrained interface chrome with vivid media and software previews. Clear feature chapters, compact labels, and a purple CTA guide visitors through the product without interrupting the visual flow.

## North star

Keep the page almost entirely black and let product media, clear typography, and sparse purple accents do the explaining.

## Overview

The page uses a near-black canvas throughout, with subtly lighter charcoal surfaces to distinguish cards and interface mockups without creating strong section bands. White and cool gray carry the main hierarchy; muted copy stays readable but secondary. Purple is reserved for the primary demo action and product-interface accents, while the blue and plum gradient tones mostly appear in media or decorative card treatments. Inter Tight gives headlines and body copy a compact, contemporary shape, with a measured negative display tracking and medium weight. The layout is deliberately spacious: a centered, constrained content column alternates between broad product imagery, split feature explanations, and dense feature cards. Product screenshots, collaboration scenes, and video previews provide the colour and proof. Thin low-contrast separators, restrained shadows, and rounded media frames keep the interface polished without adding ornamental chrome.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Infinite Black | `#000000` | `--color-infinite-black` | brand | Page canvas and dominant background across the homepage sections. |
| Slate Mist | `#90959d` | `--color-slate-mist` | neutral | Primary muted text and secondary headings against the black canvas. |
| Carbon Panel | `#08090a` | `--color-carbon-panel` | surface | Main subdued card and interface surface, close to the canvas. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | High-emphasis headings, navigation, and primary readable text. |
| Shade Violet | `#6a4bc7` | `--color-shade-violet` | accent | Purple primary demo button and selected product-interface highlights. |
| Soft Silver | `#cccccc` | `--color-soft-silver` | neutral | Secondary navigation and supporting text. |
| Plum Haze | `#340f35` | `--color-plum-haze` | accent | Gradient tone within card and media treatments, not a main page surface. |
| Night Plum | `#0c020c` | `--color-night-plum` | surface | Deep gradient stop inside product-card visual treatments. |
| Velvet Purple | `#3a2266` | `--color-velvet-purple` | accent | Purple gradient accent on cards and product imagery. |
| Black Violet | `#020105` | `--color-black-violet` | surface | Near-black gradient stop in card and media treatments. |
| Deep Signal Blue | `#032c69` | `--color-deep-signal-blue` | accent | Blue gradient accent within product-related visual treatments. |
| Blue-Black | `#000007` | `--color-blue-black` | surface | Near-black blue gradient stop, mainly within media and card visuals. |
| Harbor Blue | `#02406d` | `--color-harbor-blue` | accent | Blue-toned gradient detail appearing in product cards and media. |
| Deep Teal Black | `#00060a` | `--color-deep-teal-black` | surface | Dark gradient stop within card and illustrative treatments. |
| Cool Chalk | `#d4d4d8` | `--color-cool-chalk` | neutral | Small amount of light supporting text, secondary to white. |
| Graphite Surface | `#0e0e10` | `--color-graphite-surface` | surface | Subtle alternate card and interface surface against the black canvas. |

### Semantic aliases

`--color-canvas` → `#000000` (Infinite Black) · `--color-surface` → `#08090a` (Carbon Panel) · `--color-surface-2` → `#0e0e10` (Graphite Surface) · `--color-text` → `#ffffff` (Clean White) · `--color-text-muted` → `#90959d` (Slate Mist) · `--color-text-subtle` → `#cccccc` (Soft Silver) · `--color-accent` → `#6a4bc7` (Shade Violet) · `--color-accent-2` → `#3a2266` (Velvet Purple) · `--color-accent-3` → `#032c69` (Deep Signal Blue) · `--color-on-accent` → `#0000ee`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#08090a` | 19.93:1 | AAA |
| `#ffffff` | `#0e0e10` | 19.28:1 | AAA |
| `#90959d` | `#000000` | 6.97:1 | AA |
| `#90959d` | `#08090a` | 6.62:1 | AA |
| `#90959d` | `#0e0e10` | 6.4:1 | AA |
| `#cccccc` | `#000000` | 13.08:1 | AAA |
| `#cccccc` | `#08090a` | 12.41:1 | AAA |
| `#cccccc` | `#0e0e10` | 12.01:1 | AAA |
| `#6a4bc7` | `#000000` | 3.44:1 | AA-large |

### Gradients

- `linear-gradient(rgba(255, 255, 255, 0.05) 0%, rgba(97, 106, 115, 0) 15%)`
- `linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0) 140%)`
- `radial-gradient(99.74% 100% at 50% 0%, rgba(74, 21, 75, 0.7) 0%, rgba(29, 5, 29, 0.42) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter Tight | `--font-body` | webfont | 500 | Display headings, section headings, body copy, and captions. | Inter |
| Inter | `--font-inter` | webfont | 400, 500 | Navigation labels and compact header controls. | Inter |
| VCR OSD Mono Regular | `--font-mono` | webfont | 400 | Occasional technical or code-like micro-labels. | Share Tech Mono |

- **Inter Tight:** Measured weight 500; display uses tight negative tracking. Keep case natural and hierarchy clean.
- **Inter:** Measured weights 400 and 500; restrained, medium-weight navigation with sentence case.
- **VCR OSD Mono Regular:** Measured regular monospace; use sparingly for technical flavor rather than general copy.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 500 | 1.11 | -0.027em | — | Inter Tight | Large section headlines and prominent page messaging. |
| h1 | 20px | 500 | 1.2 | 0 | — | Inter Tight | Compact primary heading role in measured text hierarchy. |
| body | 16px | 500 | 1.5 | 0 | — | Inter Tight | Feature descriptions and supporting explanatory paragraphs. |
| caption | 14px | 500 | 1.5 | 0 | — | Inter Tight | Small labels and short supporting notes. |
| nav | 14px | 500 | 2 | 0 | — | Inter | Header navigation and top-level links. |
| code | 14px | 400 | 1.2 | 0 | — | VCR OSD Mono Regular | Occasional technical, system-like microcopy. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 7, 8, 10, 12, 20, 24, 32, 50, 56, 64 px.
- Section rhythm 160px · element gap 4px · card padding — · max content width 1024px.

Use a centered content frame with a measured maximum width of 1024px and a spacious section rhythm. The page is mostly single-column, with two- and three-column feature areas introduced when content benefits from comparison. Align headings to the start of their content blocks, pairing text with product visuals rather than centering every section. Maintain broad vertical separation between chapters and compact internal gaps in cards. Keep the density low overall, allowing product previews and video frames to occupy generous space.

## Shape & elevation

- Radius: button `6px` · card `6px` · media `6px` · nav `6px` · link `8px` · xs `2px` · sm `3px` · md `4px` · lg `6px` · xl `8px` · pill `9999px`
- Shadow `sm` (other, card): `rgba(31, 32, 35, 0.09) 0px 0.60947px 2.43788px -0.60947px`
- Shadow `sm-2` (link): `rgba(0, 0, 0, 0.09) 0px 1px 4px -1px`
- Shadow `inset` (card): `rgba(0, 0, 0, 0.09) 0px 4px 24px 0px, rgba(0, 0, 0, 0.4) 0px 30px 50px 0px, rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset`
- Shadow `inset-2` (card): `rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px inset, rgba(0, 0, 0, 0.16) 0px 2.28853px 2.28853px -2.5px inset, rgba(0, 0, 0, 0.06) 0px 10px 10px -3.75px inset`
- Shadow `inset-3` (card): `rgba(51, 3, 129, 0.09) 0px 4px 24px 0px, rgba(0, 0, 0, 0.4) 0px 30px 50px 0px, rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset`
- Shadow `inset-4` (card): `rgba(0, 0, 0, 0.09) 0px 4.01778px 24.1067px 0px, rgba(0, 0, 0, 0.4) 0px 30.1333px 50.2222px 0px, rgba(255, 255, 255, 0.1) 0px 1.00444px 0px 0px inset`

Favor near-flat surfaces and low-contrast separation over pronounced borders. Cards use subtle shadows and inset highlights to lift dark panels from the canvas; media frames and cards have softly rounded corners. Reserve stronger glow for the hero backdrop and primary purple CTA, keeping most section boundaries quiet.

## Imagery

Use real software interface previews, product screenshots, and collaboration photography as the main visual evidence. The hero is a large video-like product presentation with a vivid violet halo; later sections pair media with explanatory copy or card grids. Keep imagery in dark, softly framed containers, while allowing natural photo color and interface accents to provide contrast. Avoid decorative illustration unless it supports the product story.

## Components

### Top navigation

Compact dark header with the Shade mark, centered navigation links, and right-aligned login and demo actions.

### Primary demo button

Purple filled CTA using measured #6a4bc7, white-looking label in the screenshot, and a 6px radius.

### Hero product preview

Large software/video frame centered on black, backed by a soft purple glow that separates it from the canvas.

### Feature chapter

Start-aligned heading and concise copy paired with a product image, video, or supporting feature content.

### Dark feature card

Subtle charcoal panel with compact title and description, small icons or interface details, and restrained elevation.

### Product media frame

Dark rounded container for software screenshots, collaboration photography, and workflow previews.

### Text link

Compact secondary action within content; keep understated and visually subordinate to the purple demo CTA.

### Measured component styles

- **Primary button** (“Book a demo”): background #6a4bc7 · text #0000ee · radius 6px · padding 0px 12px · 400 12px sans-serif · shadow rgba(255, 255, 255, 0.2) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.24) 0px 0px 32px
- **Link** (“Learn more about ShadeFS”): background #1f1f1f · text #0000ee · radius 8px · padding 0px 12px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.09) 0px 1px 4px -1px
- **Card** (“Facial recognition Shade auto-detects an”): transparent background · text #000000 · radius 8px · padding 0px · 400 12px sans-serif · shadow rgba(51, 3, 129, 0.09) 0px 4px 24px 0px, rgba(0, 0, 0, 0.4) 0px 30px 50px 0px, r
- **Navigation item** (“Features Resources Pricing Download Expl”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use #000000 as the dominant page canvas.
- Keep section boundaries subtle and rely on generous whitespace.
- Set major headlines in Inter Tight with crisp, natural casing.
- Let product screenshots and photography carry visual interest.
- Reserve #6a4bc7 for primary actions and selected product accents.
- Pair explanatory copy with relevant product media.
- Use charcoal surfaces to distinguish cards without bright borders.

## Don't

- Do not introduce bright section backgrounds.
- Do not spread purple accents across every control.
- Do not crowd the page with decorative elements.
- Do not use heavy borders around dark cards.
- Do not replace product evidence with generic stock decoration.
- Do not center-align every feature section.
- Do not let small captions compete with headlines.

## Agent prompt

Build a new SaaS page in Shade’s dark, spacious visual style. Use Infinite Black (#000000) for the main canvas, Carbon Panel (#08090a) and Graphite Surface (#0e0e10) for quiet card separation, and Clean White (#ffffff) with Slate Mist (#90959d) for text hierarchy. Apply Shade Violet (#6a4bc7) selectively to the primary CTA and important interface details; keep other violet and blue tones within media or gradients. Use Inter Tight for headings and body, Inter for navigation, and occasional monospace micro-labels. Center content within the measured 1024px maximum width, with generous gaps between chapters and concise internal card layouts. Alternate start-aligned copy, feature grids, and large product screenshots or video. Use subtle shadows, restrained rounding, and minimal borders; prioritize real product UI over decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width dark hero with centered, wide product video preview. | product-first introduction, visual proof | purple ambient glow, large media frame, dark canvas |
| 2 | logo-cloud | Centered customer statement and compact row of partner logos. | social proof, customer story link | muted logo row, centered copy |
| 3 | comparison | Introductory heading and copy above a horizontally arranged set of dark feature cards. | quick product overview, tool replacement comparison | start-aligned headline, compact cards, product marks |
| 4 | feature-split | Two-column feature section with copy and product demonstration media. | collaboration explanation, review workflow | feature heading, supporting bullet points, interface preview |
| 5 | comparison | Broad single-column comparison section with a prominent heading and supporting visual area. | value comparison, tool consolidation | large headline, comparison-focused content |
| 6 | feature-split | Two-column feature content with a large media preview and paired explanatory details. | AI metadata explanation, system and user metadata | start-aligned heading, large image, small captions |
| 7 | feature-grid | Introductory heading and copy above a three-card collaboration grid and a lower promo panel. | remote-work benefits, stack consolidation | three image cards, dark promo panel, small action link |
| 8 | feature-split | Two-column feature content with divided capability blocks and large workflow media. | workflow explanation, local file access | feature heading, thin dividers, product screenshot |
| 9 | product-showcase | Single-column introduction followed by a wide product search screenshot. | AI feature discovery, explore features action | large heading, wide media preview, compact CTA |
| 10 | feature-grid | Feature heading followed by a multi-column row of vivid dark cards. | feature discovery, workflow scanning | compact feature cards, purple and blue visual accents |
| 11 | cta | Short closing call-to-action with a concise statement and demo action. | conversion prompt, demo booking | brief closing copy, prominent purple CTA |

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