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

# Shelby Kay · Design System

> An earthy editorial canvas for digital craft

**Theme:** light · **Industry:** portfolio · **Source:** https://shelbykay.dev/ · **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._

Shelby Kay’s portfolio pairs oversized editorial typography with a warm, muted canvas and a dense archive of web projects. The page moves from a spacious name-led hero into a compact project gallery and a restrained profile section.

## North star

Let oversized olive typography and warm paper tones frame the work, while project imagery supplies the colour.

## Overview

The page is built around a warm paper-like canvas (#efe6d9) and dark olive ink (#393c2a), with muted taupe, sand, and sage tones used as occasional section surfaces. The palette feels deliberately subdued; the vivid colours in the long project archive belong to individual site thumbnails, not the portfolio’s core identity. Ranade supplies oversized uppercase display typography, creating a bold, almost poster-like name treatment. Switzer handles compact navigation, descriptions, and metadata with a practical, readable texture. Layout shifts from a sparse hero with enormous lettering and a small introduction to a tightly packed multi-column project archive, then opens into a widely spaced profile area. A faint botanical image texture softens the hero without competing with the typography. Overall, the visual strategy balances expressive scale with small, orderly project labels and a restrained editorial rhythm.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Olive Ink | `#393c2a` | `--color-olive-ink` | brand | Primary text, oversized display lettering, navigation, and project links. |
| Warm Paper | `#efe6d9` | `--color-warm-paper` | neutral | Main page canvas and low-contrast text or details against darker surfaces. |
| Soft Putty | `#d2cabf` | `--color-soft-putty` | surface | Muted neutral surface tone within the page’s secondary backgrounds. |
| Dusty Taupe | `#afa199` | `--color-dusty-taupe` | surface | Subtle section surface that supports the warm, low-contrast palette. |
| Sandstone | `#d6b292` | `--color-sandstone` | accent | Warm accent surface; use sparingly rather than as a high-contrast CTA. |
| Sage Slate | `#7b8785` | `--color-sage-slate` | semantic | Muted inverse section surface; not the dominant hero or portfolio colour. |

### Semantic aliases

`--color-canvas` → `#efe6d9` (Warm Paper) · `--color-surface` → `#d2cabf` (Soft Putty) · `--color-surface-2` → `#afa199` (Dusty Taupe) · `--color-surface-3` → `#d6b292` (Sandstone) · `--color-surface-4` → `#7b8785` (Sage Slate) · `--color-text` → `#393c2a` (Olive Ink) · `--color-text-muted` → `#efe6d9` (Warm Paper) · `--color-accent` → `#d6b292` (Sandstone)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#393c2a` | `#efe6d9` | 9.17:1 | AAA |
| `#393c2a` | `#d2cabf` | 6.98:1 | AA |
| `#393c2a` | `#afa199` | 4.52:1 | AA |
| `#393c2a` | `#d6b292` | 5.74:1 | AA |
| `#efe6d9` | `#d2cabf` | 1.31:1 | fail |
| `#efe6d9` | `#afa199` | 2.03:1 | fail |
| `#efe6d9` | `#d6b292` | 1.6:1 | fail |
| `#d6b292` | `#efe6d9` | 1.6:1 | fail |
| `#d6b292` | `#d2cabf` | 1.22:1 | fail |
| `#d6b292` | `#afa199` | 1.27:1 | fail |

### Gradients

- `linear-gradient(90deg, rgb(57, 60, 42), rgb(57, 60, 42))`
- `linear-gradient(90deg, rgb(239, 230, 217), rgb(239, 230, 217))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Switzer | `--font-body` | webfont | 500, 600, 700 | Body copy, navigation, project labels, and links. | Inter |
| Ranade | `--font-display` | webfont | 700, 400 | Display lettering and uppercase section headings. | Manrope |

- **Switzer:** Compact sans-serif; measured weights 500–700. Navigation is semibold, while body and links are medium-weight.
- **Ranade:** Bold uppercase headings and a regular-weight display treatment; dramatic scale comes from size, not tracking.

### Type scale — Custom (ratio ≈ 2.086, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 265px | 400 | 0.9 | 0 | uppercase | Ranade | Oversized uppercase name lettering in the hero. |
| h1 | 158.5px | 700 | 1 | 0 | uppercase | Ranade | Primary uppercase page or section title treatment. |
| h2 | 83px | 700 | 1 | 0 | uppercase | Ranade | Large uppercase headings introducing major sections. |
| h3 | 24px | 700 | 1.2 | 0 | uppercase | Ranade | Compact uppercase subsection headings. |
| body | 14px | 500 | 1.2 | 0 | — | Switzer | Short introduction and profile information. |
| caption | 10px | 500 | 1.2 | 0 | uppercase | Switzer | Tiny uppercase project metadata and labels. |
| nav | 14px | 600 | 1.3 | 0 | — | Switzer | Compact primary navigation links. |
| link | 14px | 500 | 1.2 | 0 | — | Switzer | Project titles and inline navigation links. |

## Spacing & layout

- Base unit **1px**, density **compact**.
- Scale (most used values): 7, 8, 12, 20 px.
- Section rhythm 40px · element gap 8px · card padding — · max content width —.

The hero spans the viewport, placing oversized lettering across the top, a short introduction below it, and navigation along the bottom edge; a rotated name fragment anchors the right side. The work section becomes a dense four-column thumbnail archive with small labels and generous outer breathing room. Profile content is widely distributed across the canvas rather than enclosed in cards. Keep alignment deliberately asymmetrical and section transitions calm; measured spacing uses a compact 8px element gap and a 40px section gap.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.6s cubic-bezier(0.165, 0.84, 0.44, 1)` on interactive elements.

The page reads as flat and print-like, with no measured shadow system or rounded-corner language. Project previews are separated through their own thumbnail frames and surrounding canvas, not floating card elevation. Keep surfaces and sections flush, using colour changes and whitespace instead of decorative borders or layered UI effects.

## Imagery

A low-contrast botanical texture sits behind the hero lettering, reading as a soft photographic or image-based wash. The portfolio gallery is the main imagery: many small, framed website previews with varied palettes, layouts, and subject matter. A single portrait appears in the profile section with a muted olive treatment. Preserve the thumbnails’ variety without letting them redefine the site palette.

## Components

### Oversized hero wordmark

Run the name in huge uppercase Ranade over the warm canvas, with olive lettering and a cropped, rotated name element at the right edge.

### Hero introduction

A short, left-aligned two-line description in compact Switzer sits beneath the display name.

### Bottom-edge navigation

Small bold uppercase links for Work, Profile, and Contact sit along the hero’s lower edge, with the year separated toward the right.

### Project archive

A dense four-column gallery of small website previews, each paired with tiny project metadata; thumbnail colours vary by project.

### Profile details

A spacious profile block combines a muted portrait with compact skill, values, and recognition lists.

### Text links

Use plain, unboxed dark-olive links with no measured border, radius, or shadow treatment.

### Measured component styles

- **Link** (“INT #01–04”): transparent background · text #393c2a · radius 0px · padding 0px · 500 20px Switzer
- **Card**: background #393c2a · text #393c2a · radius 0px · padding 0px · 500 20px Switzer
- **Navigation item** (“Byotōne”): transparent background · text #393c2a · radius 0px · padding 0px · 600 14px Switzer

## Do

- Use Warm Paper (#efe6d9) as the dominant canvas.
- Set primary type in Olive Ink (#393c2a).
- Use Ranade for bold, uppercase display moments.
- Keep body copy compact and straightforward in Switzer.
- Let project thumbnails retain their individual colour palettes.
- Balance dense gallery content with generous section-level breathing room.

## Don't

- Do not turn the muted palette into a saturated interface theme.
- Do not apply a single accent colour across every project thumbnail.
- Do not put the whole portfolio into rounded or elevated cards.
- Do not add heavy borders or drop shadows.
- Do not make the hero introduction compete with the display lettering.
- Do not force the asymmetric layout into a uniform centered template.

## Agent prompt

Build a portfolio page in this editorial, warm-toned style. Use Warm Paper (#efe6d9) for the main canvas and Olive Ink (#393c2a) for display lettering, body text, and links. Keep Dusty Taupe (#afa199), Soft Putty (#d2cabf), Sandstone (#d6b292), and Sage Slate (#7b8785) as restrained secondary surfaces. Use Ranade-like bold uppercase display type for a dramatic name or page title, paired with compact Switzer-like sans-serif for navigation, copy, and metadata. Compose a spacious, asymmetric hero, then a dense multi-column archive of small, varied project previews and a looser profile section. Keep the interface flat: no ornamental shadows, rounded cards, or heavy borders. Use whitespace and typography for hierarchy.

## Source CSS custom properties (selected)

```css
--gap: 8px;
--color-primary: #7b8785;
--color-primary-dark: #454931;
--color-primary-darker: #393c2a;
--color-beige-warm: #d6b292;
--color-beige: #efe6d9;
--color-brown-light: #afa199;
--color-black: #2c1c03;
--color-blue: #7b8785;
--ease-quart: cubic-bezier(.165, .84, .44, 1);
--ease-quart-inout: cubic-bezier(.76, 0, .24, 1);
--ease-cubic: cubic-bezier(.33, 1, .68, 1);
--ease-cubic-inout: cubic-bezier(.785, .135, .15, .86);
```

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