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

# Palette Supply · Design System

> Quiet editorial framing for creative tools

**Theme:** light · **Industry:** ecommerce · **Source:** https://palette.supply/ · **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._

Palette Supply pairs a restrained monochrome interface with warm, tactile photography to showcase templates and mockups. A compact monospaced interface gives way to clean product grids, split-image features, and editorial content.

## North star

Keep the interface quiet and precise so warm, art-directed product imagery carries the visual emphasis.

## Overview

The page is built on a white canvas with black typography and very restrained gray rules, keeping attention on the products and photography rather than decorative UI. A vivid blue appears in the top promotion strip and small brand details; it is an accent, not the dominant page colour. PP Supply Mono establishes the compact, technical character of navigation, captions, labels, and body copy, while ES Build gives larger headings and product links a softer, contemporary presence. The opening hero is a full-bleed warm wood interior with white overlaid copy and a small light CTA. Below it, broad white sections alternate between product detail, collection cards, split-image storytelling, and journal content. Product imagery supplies muted browns, greens, and warm neutrals that are not interface tokens. Layouts rely on generous whitespace around large image panels, while cards remain flat and square-edged with fine gray borders rather than shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Primary headings, body text, links, footer content, and dark inverse image panels. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the dominant background behind product, editorial, and footer sections. |
| Soft Rule | `#f6f6f6` | `--color-soft-rule` | neutral | Fine card and interface borders; use as a subtle separator rather than a section fill. |
| Pale Graphite | `#d2d2d2` | `--color-pale-graphite` | neutral | Secondary hairlines and understated input or card outlines. |
| Muted Type | `#707070` | `--color-muted-type` | neutral | Low-emphasis supporting copy and secondary footer or heading text. |
| Supply Blue | `#3651a2` | `--color-supply-blue` | accent | Small promotional and brand accent; the screenshot also shows related blue in the announcement strip. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Studio Ink) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#f6f6f6` (Soft Rule) · `--color-accent` → `#3651a2` (Supply Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#3651a2` | `#ffffff` | 7.35:1 | AAA |
| `#3651a2` | `#000000` | 2.86:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PP Supply Mono | `--font-mono` | webfont | 300, 400 | Navigation, body copy, captions, labels, and small interface text. | IBM Plex Mono |
| ES Build | `--font-display` | webfont | 500 | Main headings, section titles, and prominent product links. | Manrope |

- **PP Supply Mono:** Light, compact monospaced text; navigation and eyebrow labels are uppercase, with slight negative tracking in navigation.
- **ES Build:** Medium-weight sans serif with subtly tight tracking; keep headings sentence case and uncluttered.

### Type scale — Perfect Fifth (ratio ≈ 1.541, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 38px | 500 | 1.3 | -0.02em | — | ES Build | Hero title, set prominently over the full-bleed opening image. |
| h2 | 22.5px | 500 | 1.3 | -0.02em | — | ES Build | Section headings and feature titles. |
| body | 16px | 300 | 1.5 | 0 | — | PP Supply Mono | Product explanations and descriptive editorial copy. |
| caption | 12px | 300 | 1.5 | 0 | — | PP Supply Mono | Small product, image, and supporting labels. |
| nav | 14px | 400 | 1.5 | -0.02em | uppercase | PP Supply Mono | Uppercase header navigation and menu labels. |
| link | 19px | 500 | 1.2 | -0.02em | — | ES Build | Prominent product titles and editorial links. |
| eyebrow | 10px | 300 | 1.2 | 0.12em | uppercase | PP Supply Mono | Compact uppercase section and hero overlines. |
| code | 12px | 300 | 1.5 | 0 | — | PP Supply Mono | Small technical or utility-style interface details. |

OpenType features in use: `"ss02"`.

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 2, 4, 5, 6, 7, 8, 10, 12, 13, 14, 16, 18, 32, 48, 64 px.
- Section rhythm 32px · element gap 8px · card padding 18px · max content width —.

The homepage uses a full-bleed hero followed by a sequence of white, wide content bands. Sections shift between two-column product detail and editorial splits, multi-column product grids, and image-led feature panels. Align headings and copy to the left; reserve broad negative space around imagery and avoid enclosing every block in a card. The measured page has no fixed maximum-width value, so reproduce its generous desktop composition without inventing one. Overall density is compact in text and navigation but spacious between major image-led sections.

## Shape & elevation

- Radius: button `5px` · nav `5px` · link `5px` · xs `5px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is mostly flat: no measured shadow system is present, and card outlines are thin and pale. Product images provide their own depth through photographed paper, devices, and mockup layering. Keep panels square-edged and avoid adding decorative shadows; use subtle borders only where product cards or controls need separation.

## Imagery

Photography is the dominant visual material: warm wood interiors, studio scenes, printed templates, devices, and product mockups. Use large, rectangular crops and full-bleed hero imagery; keep the photos natural and softly toned rather than applying graphic filters. Template previews appear as carefully arranged flat layouts or device mockups. Warm browns and muted colors belong to the photographic assets, not the interface palette.

## Components

### Hero banner

Full-bleed interior photograph with a small uppercase eyebrow, large white title, and compact light CTA positioned over the image.

### Announcement strip

Narrow blue promotional band above the image-led header, with small high-contrast offer text.

### Product detail feature

Two-column presentation pairing template imagery with product title, concise copy, variant controls, and purchase actions.

### Product card

Flat product tile with a large image, prominent sans-serif title, compact monospaced details, and a fine #f6f6f6 border where measured.

### Split editorial feature

Large rectangular image beside a short heading and compact explanatory copy, with generous white space.

### Footer signup

Multi-column footer navigation with a concise brand note and a simple email signup field.

### Measured component styles

- **Primary button** (“Personal Variant sold out or unavailable”): background #000000 · text #ffffff · radius 0px · padding 4px 6px · 300 12px PP Supply Mono
- **Secondary button** (“ADD TO CART”): transparent background · text #000000 · border 1px solid · radius 5px · padding 0px · 300 10px PP Supply Mono · uppercase
- **Link** (“Photography Template Bundle — Portfolio,”): transparent background · text #000000 · radius 0px · padding 0px · 500 19px ES Build
- **Input**: transparent background · text #000000 · radius 0px · padding 0px 70px 10px 0px · 300 16px PP Supply Mono
- **Card** (“Photography Portfolio Template — Canva, ”): transparent background · text #000000 · border 1px solid #f6f6f6 · radius 0px · padding 18px · 500 13.7142px PP Supply Mono
- **Navigation item** (“HOME”): transparent background · text #ffffff · radius 0px · padding 0px 7px · 300 16px PP Supply Mono · uppercase

## Do

- Use white as the default section canvas.
- Keep interface text predominantly black and restrained.
- Pair monospaced utility text with clean sans-serif headings.
- Let full-size photography lead image-rich sections.
- Use blue sparingly for promotional emphasis.
- Keep cards flat with thin, pale outlines.

## Don't

- Do not turn the warm photo colors into interface tokens.
- Do not add gradients or a decorative shadow system.
- Do not round product cards into pill-like containers.
- Do not crowd image panels with extra labels.
- Do not use oversized, colorful buttons as the main visual focus.
- Do not invent fixed spacing or maximum-width values.

## Agent prompt

Build a new Palette Supply page as a quiet, editorial storefront. Use Gallery White (#ffffff) as the canvas and Studio Ink (#000000) for primary text; reserve Soft Rule (#f6f6f6) and Pale Graphite (#d2d2d2) for subtle borders, Muted Type (#707070) for secondary copy, and Supply Blue (#3651a2) for restrained promotional accents. Use PP Supply Mono or a close monospace substitute for navigation, captions, and body text, paired with a medium-weight, softly geometric sans serif for headings and product titles. Favor large, natural product photography, rectangular image panels, asymmetric splits, and clean product grids. Keep controls compact, cards flat, and major sections separated by generous whitespace. Avoid gradients, ornamental shadows, invented color accents, and decorative UI that competes with the photography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed interior photograph with overlaid copy aligned to the lower left. | explore templates CTA | image overlay, uppercase eyebrow, white heading |
| 2 | product-detail | Two-column product presentation with image gallery and purchase information. | variant selection, add to cart, buy with shop | image gallery, compact form controls, product details |
| 3 | product-grid | White collection section with a multi-column row of product cards. | shop all products, carousel pagination | product cards, price labels, image-led tiles |
| 4 | feature-split | Large template-preview image beside a text block and compact link. | shop templates link | split layout, large preview image, left-aligned copy |
| 5 | product-grid | Section intro followed by a multi-column carousel-style product display. | shop now, carousel pagination | product tiles, price details, large product images |
| 6 | feature-split | Text and accordion-like details alongside a large studio photograph. | expandable details, read more | two-column layout, fine separators, editorial image |
| 7 | gallery | Two side-by-side image-led promotional panels. | shop collection links | large rectangular photography, overlaid text |
| 8 | content-feed | Editorial introduction followed by a multi-column row of journal cards. | view journal, carousel pagination | article thumbnails, compact titles, section intro |
| 9 | category-nav | Compact horizontal category links above the footer. | direct category navigation | text-only links, thin section band |
| 10 | footer | Multi-column footer with brand note, link groups, social links, and signup field. | newsletter signup, footer navigation | column groups, email input, compact labels |

## Source CSS custom properties (selected)

```css
--color-background: 255,255,255;
--color-background-secondary: 244,244,244;
--gradient-background: #ffffff;
--color-foreground: 0, 0, 0;
--color-foreground-secondary: 112, 112, 112;
--color-foreground-title: 0, 0, 0;
--color-button-text: 255, 255, 255;
--color-button-text-hover: 0, 0, 0;
--color-button: 0, 0, 0;
--color-button-hover: 255, 255, 255;
--color-button-border: , ,;
--color-button-border-hover: 210, 210, 210;
--color-button-secondary: 227, 227, 227;
--color-button-secondary-hover: 255, 255, 255;
--color-button-secondary-text: 0, 0, 0;
--color-button-secondary-text-hover: 0, 0, 0;
--color-button-secondary-border: , ,;
--color-button-secondary-border-hover: 210, 210, 210;
--color-button-tertiary-text: 0, 0, 0;
--color-button-tertiary-text-hover: 112, 112, 112;
--color-overlay: 0, 0, 0;
--color-border-input: 244, 244, 244;
--color-background-input: 244, 244, 244;
--color-border: 210, 210, 210;
--color-background-secondaryu: 244,244,244;
--spaced-section: 16rem;
--border-radius-media: 0px;
--border-radius-input: 0px;
--font-body-family: 'PP Supply Mono', monospace;
--font-body-style: normal;
--font-body-weight: 300;
--font-body-scale: 1.6;
--font-body-second-scale: 1.2;
--font-body-line-height: 1.5;
--font-heading-family: 'ES Build', sans-serif;
--font-heading-style: normal;
--font-heading-weight: 500;
--font-heading-letter-spacing: -0.2em;
--font-heading-line-height: 1.3;
--font-special-heading-family: 'ES Build', sans-serif;
```

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