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

# The Fascination — All Post Archive · Design System

> Warm editorial curation with a handwritten accent

**Theme:** light · **Industry:** media · **Source:** https://thefascination.com/lander/stories/ · **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._

The archive pairs a warm ivory canvas and crisp black typography with violet accents and handwritten category flourishes. A featured story leads into compact image-led feeds, each organized by lifestyle category.

## North star

Keep the page feeling like a warm, carefully edited magazine: ivory space, black structure, vivid editorial photography, and small handwritten violet accents.

## Overview

The page uses a consistent warm ivory canvas (#faf8ef) that lets the editorial photography supply most of the changing colour. Black (#000000) anchors the wordmark, headings, body copy, dividers, and the selected category control; violet-blue accents identify category links and handwritten flourishes. Graphik provides compact, confident sans-serif typography for navigation, story titles, and metadata, while Qwitcher Grypen adds an expressive handwritten note beside category headings and the hero title. The opening archive view centers a large masthead and category selector above a featured-story split, then transitions into three-column image-and-caption feeds. Long, full-width category bands repeat with fine black rules and generous breathing room between them. Images remain rectangular and editorial rather than heavily framed. The overall strategy is restrained: rely on strong alignment, repeatable feed structure, and restrained accent colour instead of decorative cards or deep shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Editorial Ink | `#000000` | `--color-editorial-ink` | brand | Wordmark, headings, story titles, body copy, fine dividers, and the active category tab. |
| Archive Ivory | `#faf8ef` | `--color-archive-ivory` | surface | Dominant page canvas behind the masthead, archive feeds, category sections, and footer. |
| Story Violet | `#4c40e0` | `--color-story-violet` | accent | Category labels and prominent editorial links; also echoed by the handwritten hero flourish. |
| Link Blue | `#2ea3f2` | `--color-link-blue` | accent | Minor link accent in measured styles; not a defining page colour. |
| Arrow Purple | `#9333ea` | `--color-arrow-purple` | accent | Measured on a single arrow button; an isolated interface accent rather than a dominant brand colour. |
| Caption Indigo | `#454ad3` | `--color-caption-indigo` | accent | Additional blue-violet text accent in measured links; use sparingly alongside category details. |
| Footer Sand | `#efe8dc` | `--color-footer-sand` | surface | Minor pale neutral surface, consistent with the warmer footer treatment visible in the page. |
| Deep Slate | `#1a202c` | `--color-deep-slate` | neutral | Minor measured link colour; secondary interface text only, not a major visual anchor. |
| Quiet Taupe | `#797472` | `--color-quiet-taupe` | neutral | Muted link or secondary text colour, including subdued category-navigation labels. |

### Semantic aliases

`--color-canvas` → `#faf8ef` (Archive Ivory) · `--color-text` → `#000000` (Editorial Ink) · `--color-border` → `#000000` (Editorial Ink) · `--color-accent` → `#4c40e0` (Story Violet) · `--color-accent-2` → `#2ea3f2` (Link Blue) · `--color-accent-3` → `#454ad3` (Caption Indigo)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#faf8ef` | 19.74:1 | AAA |
| `#4c40e0` | `#faf8ef` | 6.33:1 | AA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 70%, rgb(0, 0, 0) 0px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Graphik | `--font-body` | webfont | 500, 400, 700 | Primary sans-serif for the masthead, navigation, story headlines, metadata, and controls. | Inter |
| Qwitcher Grypen | `--font-display` | webfont | 400 | Handwritten display flourishes beside the archive masthead and lifestyle category headings. | Caveat |

- **Graphik:** Measured in regular, medium, and bold weights. Keep headings and story copy in sentence case; use bold for clear hierarchy.
- **Qwitcher Grypen:** Use the measured regular weight as a light, expressive contrast to Graphik; reserve it for short decorative phrases.

### Type scale — Perfect Fourth (ratio ≈ 1.369, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 700 | 1 | 0 | — | Graphik | Bold masthead and prominent editorial display text. |
| h1 | 60px | 400 | 0.55 | 0 | — | Qwitcher Grypen | Handwritten archive hero title or expressive page heading. |
| h2 | 48px | 400 | 0.55 | 0 | — | Qwitcher Grypen | Handwritten category-heading flourish. |
| h3 | 30px | 700 | 1 | 0 | — | Graphik | Bold category titles and featured editorial headings. |
| h4 | 24px | 400 | 1.33 | 0 | — | Graphik | Story-card titles and secondary editorial headings. |
| body | 20px | 500 | 1.2 | 0 | — | Graphik | Prominent article descriptions and featured-story supporting copy. |
| caption | 14px | 700 | 2.19 | 0 | — | Graphik | Compact category labels and article metadata. |
| button | 16px | 500 | 1.5 | 0 | — | Graphik | Category controls and newsletter submission action. |
| link | 20px | 500 | 1.2 | 0 | — | Graphik | Story titles, category links, and archive navigation. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 8, 16, 20, 22, 24, 28, 32, 48, 64, 80 px.
- Section rhythm 32px · element gap 32px · card padding 24px · max content width 1344px.

The archive sits within a centered content area measured at a 1344px maximum width, with a spacious overall density. A centered masthead and horizontal category selector lead into a two-column featured-story area; subsequent category feeds use three columns of image-led article cards. Sections repeat down the page with thin horizontal dividers, left-aligned headings, and consistent gaps. Preserve broad outer margins and clear separation between the hero, pagination, category feeds, and footer.

## Shape & elevation

- Radius: button `6px` · link `6px` · xs `6px`
- 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`
- Shadow `sm` (other): `rgb(128, 128, 128) 0px 0px 5px 0px`
- Motion: standard transition `0.2s linear` on interactive elements.

The interface is predominantly flat: ivory canvas, black hairline dividers, and rectangular images establish structure without raised cards. Measured article cards use thin black borders in some instances, but the page imagery shows clean, open feed layouts. Avoid prominent shadows; keep layering limited to the featured image and its small burst-style label.

## Imagery

Photography is the main source of colour and variety: product packages, people, lifestyle scenes, and editorial environments appear in rectangular crops. The lead feature receives a larger image than the feed cards, while supporting stories use a consistent three-column rhythm. Keep images bright and legible, without adding heavy overlays or decorative frames. The handwritten flourishes are typography, not a replacement for article photography.

## Components

### Archive masthead

Centered bold Graphik title, small establishment note, and a short handwritten violet tagline on the ivory canvas.

### Category selector

One outlined horizontal strip of category cells; the selected All control is black with white text and a 6px measured radius.

### Featured story split

Large lead article image beside a ruled editorial introduction, with a small bright featured badge and linked category/title.

### Article feed card

Rectangular story image followed by compact violet category metadata and a black Graphik headline.

### Category feed section

Left-aligned bold category title, violet handwritten phrase, View All link, divider, and a three-column story grid.

### Pagination

Compact centered page links separated from the lead archive feed by thin horizontal rules.

### Newsletter footer

Signup prompt and email form sit beside compact link columns on the same warm canvas, with a subdued lower footer band.

### Measured component styles

- **Primary button** (“All”): background #000000 · text #ffffff · radius 6px · padding 8px 16px · 400 16px Graphik
- **Secondary button** (“2”): transparent background · text #000000 · border 3px solid · radius 0px · padding 16px 16px 0px 16px · 500 16px Graphik
- **Link** (“I Thought All Protein Bars Were the Same”): transparent background · text #000000 · radius 0px · padding 0px · 500 20px Graphik
- **Input**: transparent background · text #1f2937 · radius 0px · padding 0px · 400 14px Graphik
- **Card** (“Health & Wellness”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 20px 28px · 400 17.9984px Graphik

## Do

- Use #faf8ef as the page-wide canvas.
- Anchor text, dividers, and selected controls with #000000.
- Reserve violet accents for category links and short handwritten flourishes.
- Lead with a featured editorial image before the smaller story grid.
- Repeat the three-column feed pattern consistently across category sections.
- Use thin rules and generous whitespace to distinguish sections.

## Don't

- Do not introduce saturated section backgrounds.
- Do not turn every story into a rounded, shadowed card.
- Do not use handwritten type for article titles or long copy.
- Do not let accent colours compete with the photography.
- Do not replace the category feed with a uniform product-commerce grid.
- Do not crowd the masthead or category selector with extra controls.

## Agent prompt

Build a new editorial archive page in The Fascination’s style. Use Archive Ivory (#faf8ef) as the canvas and Editorial Ink (#000000) for the wordmark, headings, story titles, controls, and thin dividers. Use Story Violet (#4c40e0) sparingly for category labels and short handwritten flourishes; keep the measured minor accents (#2ea3f2, #9333ea, and #454ad3) incidental rather than dominant. Set primary interface text in Graphik or a close sans-serif substitute, with Qwitcher Grypen-style script reserved for brief display notes. Center the masthead and outlined category selector, then give one story a larger split-layout feature before repeating three-column image-and-caption feeds. Separate category bands with fine rules and generous spacing. Keep photography rectangular and vivid, and avoid heavy shadows or card decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | Featured story split followed by a one-column lead archive feed and centered pagination. | category filtering, featured story, pagination | large editorial image, outlined category selector, thin rules, violet metadata |
| 2 | category-nav | Three-column story grid beneath a left-aligned title and handwritten category phrase. | view all link, story discovery | image-led cards, violet category labels, section divider |
| 3 | category-nav | Three-column story grid with a category heading and right-aligned View All link. | view all link, story discovery | editorial photography, compact captions, thin divider |
| 4 | category-nav | Three-column category feed with two rows of article cards. | view all link, category browsing | rectangular imagery, violet metadata, open spacing |
| 5 | category-nav | Three-column, two-row article grid below the category heading. | view all link, related-story discovery | photo-led cards, black headings, fine section rule |
| 6 | category-nav | Three-column story grid with repeated image-and-caption cards. | view all link, category browsing | lifestyle photography, violet category labels, thin divider |
| 7 | footer | Newsletter signup on the left, compact navigation columns alongside, and a narrow lower footer band. | email signup, social links, footer navigation | simple text columns, email input, subdued footer strip |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--color--sh-white: #ffffff;
--wp--preset--color--sh-black: #000000;
--wp--preset--color--sh-base: #1A202C;
--wp--preset--color--sh-primary-light: #ECF2FF;
--wp--preset--color--sh-highlight: #ffffe0;
--wp--preset--color--sh-contrast: #2ea3f2;
--wp--preset--color--sh-primary: #4c40e0;
--wp--preset--color--sh-secondary: #fd4650;
--wp--preset--color--sh-topic: #4c40e0;
--wp--preset--color--sh-background: #faf8ef;
--wp--preset--color--sh-header-bg: #faf8ee;
--wp--preset--color--sh-header-border: #000000;
--wp--preset--color--sh-archive-active-menu-bg: #000000;
--wp--preset--color--sh-archive-active-menu-item-color: #ffffff;
--wp--preset--color--sh-archive-border-menu-color: #000000;
```

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