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

# Artboard Studio · Design System

> A calm canvas for vivid mockup work

**Theme:** light · **Industry:** design · **Source:** https://artboard.studio/ · **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._

Artboard Studio presents its mockup library and creative tools on a pale, spacious canvas, with crisp dark typography and vivid product examples. The page balances a compact category-led gallery with alternating tool showcases, then closes with a restrained FAQ and link-dense footer.

## North star

Keep the interface quiet and spacious so the richly colored mockup imagery, not decorative UI, carries the visual impact.

## Overview

The page’s visual identity is a quiet, pale-green-tinted canvas paired with near-black typography and colorful mockup imagery. The measured base canvas is white, while the first viewport and feature bands read as a very light green-to-warm-gray wash; reserve the measured gradient colors for those atmospheric bands rather than treating them as new brand accents. Vend Sans gives headings a confident, compact editorial voice, while system-ui keeps navigation and supporting copy neutral and legible. A centered hero leads into a dense six-column category gallery, after which generous alternating feature sections pair concise copy with large interface or mockup visuals. Product examples supply most of the saturated color, including blue, green, peach, and other image-specific tones. Borders are subtle and shadows are absent, so rounded cards and buttons remain crisp and flat.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Olive Ink | `#0d1400` | `--color-deep-olive-ink` | brand | Primary headings, body text, navigation, links, and the dark active category and CTA buttons. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Measured page canvas and clean FAQ and footer surfaces. |
| Soft Divider | `#e6e7e5` | `--color-soft-divider` | neutral | Thin outlines around mockup cards and light, secondary buttons. |
| Lime Haze | `#f9ffeb` | `--color-lime-haze` | surface | Pale endpoint of the subtle section wash and a light surrounding field visible in the screenshot. |
| Warm Mist | `#f4f3f2` | `--color-warm-mist` | surface | Warm neutral middle of the measured section gradient behind feature content. |
| Slate Panel | `#444444` | `--color-slate-panel` | surface | Dark surface appearing in feature or editor mockup cards, not a dominant page background. |
| Sky Panel | `#cbedff` | `--color-sky-panel` | accent | Blue surface used in mockup examples and image backdrops, rather than as a general UI accent. |
| Fresh Lime | `#caf3aa` | `--color-fresh-lime` | accent | Green accent surface in mockup examples; the brand’s brighter green also appears inside product imagery. |
| Apricot Panel | `#ffe4c3` | `--color-apricot-panel` | accent | Warm peach surface within visual examples, not a recurring interface color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#444444` (Slate Panel) · `--color-surface-2` → `#cbedff` (Sky Panel) · `--color-surface-3` → `#caf3aa` (Fresh Lime) · `--color-surface-4` → `#ffe4c3` (Apricot Panel) · `--color-text` → `#0d1400` (Deep Olive Ink) · `--color-border` → `#e6e7e5` (Soft Divider) · `--color-accent` → `#caf3aa` (Fresh Lime)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0d1400` | `#ffffff` | 18.8:1 | AAA |
| `#0d1400` | `#444444` | 1.93:1 | fail |
| `#0d1400` | `#cbedff` | 15.3:1 | AAA |
| `#0d1400` | `#caf3aa` | 15.14:1 | AAA |
| `#caf3aa` | `#ffffff` | 1.24:1 | fail |
| `#caf3aa` | `#444444` | 7.84:1 | AAA |
| `#caf3aa` | `#cbedff` | 1.01:1 | fail |

### Gradients

- `linear-gradient(rgb(249, 255, 235), rgb(244, 243, 242) 20%, rgb(244, 243, 242) 70%, rgb(249, 255, 235))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| system-ui | `--font-body` | system | 400, 700 | Navigation, body copy, links, and standard button labels. | Inter |
| Vend Sans | `--font-display` | webfont | 500, 700, 600 | Display and page headings. | Manrope |

- **system-ui:** Neutral sans-serif; regular weight dominates, with compact single-line navigation and readable body leading.
- **Vend Sans:** Use semibold display text and bold section headings; hero tracking is tight, while case remains natural.

### Type scale — Perfect Fourth (ratio ≈ 1.307, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 61px | 600 | 1.2 | -0.033em | — | Vend Sans | Large hero or promotional display heading. |
| h1 | 48px | 700 | 1.2 | 0 | — | Vend Sans | Primary page heading in the centered hero. |
| h2 | 43px | 700 | 1.2 | -0.023em | — | Vend Sans | Major feature-section and FAQ headings. |
| h3 | 32px | 700 | 1.3 | 0 | — | Vend Sans | Mockup category and subsection headings. |
| h4 | 24px | 500 | 1.2 | 0 | — | Vend Sans | Smaller feature or supporting headings. |
| body | 16px | 400 | 1.5 | 0 | — | system-ui | Descriptive paragraphs and explanatory copy. |
| nav | 16px | 400 | 1 | 0 | — | system-ui | Header navigation labels. |
| link | 16px | 400 | 1 | 0 | — | system-ui | Category links, footer links, and inline actions. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 20, 24, 48 px.
- Section rhythm 48px · element gap 24px · card padding 3px · max content width 1346px.

Use a centered content frame with a measured maximum width of 1346px. The hero is single-column and centered; the mockup library becomes a dense six-column grid, while later feature bands alternate image and copy alignment in one- or two-column compositions. Keep the header compact, then allow generous vertical breathing room between major sections. The page moves from busy product browsing into spacious feature storytelling, followed by a two-column FAQ and four-column footer. Maintain comfortable density, aligned content edges, and consistent measured spacing rhythm.

## Shape & elevation

- Radius: button `8px` · card `8px` · nav `8px` · link `8px` · xs `8px` · sm `12px`
- No box shadows measured: the page is flat.

The interface is predominantly flat: measured data reports no shadows. Use thin pale borders to define cards and secondary buttons, with rounded corners providing the main edge treatment. Keep imagery visually layered inside its own frames, but avoid floating UI effects or heavy elevation.

## Imagery

Realistic mockup photography and rendered product scenes dominate the gallery: phones, apparel, books, packaging, and print examples are shown in grouped cards. Feature sections use large editor screenshots and composed product collages, with video and AI examples presented as colorful visual panels. Keep image frames clean and rounded; let artwork retain its own saturated backgrounds rather than adding decorative overlays.

## Components

### Header navigation

Compact horizontal brand mark and text links on the light canvas; keep labels in system-ui and avoid strong container styling.

### Hero

Centered Vend Sans headline with a restrained supporting paragraph and substantial open space before category browsing.

### Category selector

Six horizontally aligned rounded controls; the active option uses #0d1400 with white text, while inactive options use a pale outline.

### Mockup gallery cards

Dense multi-column groups of paired product previews with thin #e6e7e5 borders, rounded card corners, and category labels.

### Feature showcase

Alternating image-and-copy sections featuring editor screenshots, mockup collages, or video samples against pale section bands.

### Primary action

Compact dark button with white system-ui text and rounded corners; use for actions such as installing the Figma plugin.

### FAQ and footer

Two-column question list with simple chevrons, followed by a clean multi-column footer of small, text-led links.

### Measured component styles

- **Primary button** (“Install Figma plugin”): background #0d1400 · text #ffffff · border 1px solid #0d1400 · radius 8px · padding 8px 19.2px · 400 16px system-ui
- **Secondary button** (“Device Mockups”): transparent background · text #0d1400 · border 1px solid #e6e7e5 · radius 8px · padding 12px 24px · 400 16px system-ui
- **Link** (“Mockup Library”): transparent background · text #0d1400 · radius 8px · padding 4px 0px · 400 16px system-ui
- **Card** (“iPhone Mockups”): transparent background · text #0d1400 · border 1px solid #e6e7e5 · radius 12px · padding 0px 0px 12px 0px · 400 16px system-ui
- **Navigation item** (“Artboard Studio Mockup Library Figma plu”): transparent background · text #0d1400 · radius 0px · padding 0px · 400 16px system-ui

## Do

- Use #0d1400 for high-contrast text and active actions.
- Keep the hero centered and typographically prominent.
- Let mockup artwork provide most saturated color.
- Use thin #e6e7e5 outlines instead of shadows.
- Alternate feature copy and visuals across roomy bands.
- Keep navigation and supporting copy in system-ui.

## Don't

- Do not turn image-only colors into global UI accents.
- Do not add heavy shadows or layered elevation.
- Do not crowd the hero with extra controls.
- Do not replace the airy feature rhythm with dense uniform sections.
- Do not use decorative gradients beyond the measured pale wash.
- Do not make inactive category controls visually compete with the active one.

## Agent prompt

Build a new Artboard Studio page with a quiet, editorial SaaS aesthetic. Use Gallery White (#ffffff) and the measured pale Lime Haze (#f9ffeb) to Warm Mist (#f4f3f2) wash for spacious section backgrounds; use Deep Olive Ink (#0d1400) for typography and primary actions, and Soft Divider (#e6e7e5) for card outlines. Set headings in Vend Sans or a close geometric sans substitute, with system-ui for body text and navigation. Create a centered hero, then a dense category-led mockup gallery; follow with generous alternating feature bands that showcase realistic product imagery and editor screens. Keep cards and buttons softly rounded, borders subtle, and shadows absent. Reserve Sky Panel (#cbedff), Fresh Lime (#caf3aa), and Apricot Panel (#ffe4c3) for artwork or visual examples rather than broad interface fills.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single-column centered headline and supporting copy on a pale, open canvas. | Value proposition first, Centered reading flow | Large bold heading, Muted pale background |
| 2 | product-grid | Six category controls above a dense six-column gallery of grouped mockup cards. | Category switching, Browse by product type | Dark active tab, Outlined inactive tabs, Rounded preview cards |
| 3 | feature-split | Large product interface visual beside left-aligned feature copy and a compact action. | Feature explanation, Install action | Split image and text, Dark CTA |
| 4 | feature-split | Single-column feature band with the text and editor collage arranged in opposing positions. | Tool benefit explanation, Visual product proof | Large interface collage, Pale image panel |
| 5 | feature-split | Two-column feature composition with a four-image visual block and adjacent explanatory copy. | Capability explanation, Multiple visual examples | Four-part media panel, Alternating feature layout |
| 6 | feature-split | Single-column feature band with explanatory copy opposite a large AI-generated mockup composition. | Prompt-led feature, Generated result preview | Large visual panel, Soft tinted backing |
| 7 | faq | Two-column FAQ list followed by a centered contact prompt and small button. | Expandable questions, Contact support | Simple chevrons, Minimal separators |
| 8 | footer | Brand mark above four columns of small links, with copyright and chat access along the bottom. | Browse related categories, Persistent contact access | Four-column link lists, Compact brand mark |

## Source CSS custom properties (selected)

```css
--color-scheme-1--background: #fff;
--color-scheme-1--text: #0d1400;
--_typography---font-styles--heading: "Vend Sans", sans-serif;
--_primitives---colors--neutral-darkest: #0d1400;
--_ui-styles---radius--medium: 8px;
--_ui-styles---radius--small: 4px;
--_primitives---colors--neutral-dark: #838976;
--_primitives---colors--white: #fff;
--text-color--text-alternate<deleted|relume-variable-text-color-3>: white;
--_primitives---colors--neutral-darker: #222;
--_primitives---colors--neutral-light: #aaa;
--_primitives---colors--artboard-green: #af0;
--_primitives---colors--neutral-stroke: #0d14001a;
--_primitives---colors--neutral-lighter: #ccc;
--_primitives---colors--neutral-lightest: #eee;
--_ui-styles---stroke--border-width: 1px;
--color-scheme-1--border: #0d1400;
--color-scheme-1--foreground: #eee;
--background-color--background-secondary<deleted|relume-variable-background-color-2>: #eee;
--border-color--border-primary<deleted|relume-variable-border-color-1>: black;
--_ui-styles---radius--large: 12px;
--color-scheme-1--accent: #0d1400;
--_primitives---colors--neutral: #666;
--_sizing---spacers--spacer-2: 8px;
--_colors---✦--_bg--bg-secondary: #f5f5f5;
--_typography---body--medium--fontfamily: Inter;
--_colors---✦--_text--text-default: #000000e6;
--_typography---body--medium--fontsize: 11px;
--_sizing---spacers--spacer-3: 16px;
--_colors---artboard: #af0;
--_sizing---spacers--spacer-6: 40px;
--_sizing---spacers--spacer-0: 0px;
--_colors---✦--_border--border-default: #e6e6e6;
--_colors---✦--_bg--bg-default: #fff;
--_colors---✦--_text--text-secondary: #00000080;
--_colors---🎨--black--600: #000c;
--mg-border: #444;
--_colors---🎨--white--1000: #fff;
--_colors---🎨--white--500: #ffffffb3;
--_colors---🎨--grey--800: #2c2c2c;
```

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