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

# Frankys · Design System

> Merino wool, framed in playful monochrome.

**Theme:** light · **Industry:** fashion · **Source:** https://www.frankys-hats.com/ · **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._

Frankys pairs a warm blush canvas and precise black rules with expressive slab-serif lettering and high-contrast hat imagery. The homepage presents its single-product story in a framed, split layout that feels both editorial and playfully graphic.

## North star

Keep the warm canvas and fine black framing quiet so the product imagery and expressive serif lettering remain the focus.

## Overview

The page is built from a warm blush canvas (#f3e5df) and near-absolute black (#000000), with white (#ffffff) reserved for small text details such as the purchase button label. The restrained palette lets the checkerboard product backdrop and monochrome lifestyle photograph carry visual contrast without introducing competing brand colours. A single custom slab-serif family gives the wordmark, product headline, specifications, and small navigation a consistent, slightly playful editorial voice. The desktop hero is a thinly outlined frame split between a large product image and a narrower information column; fine rules divide the announcement, purchase controls, and product details. The composition is spacious around the frame but information-dense within it, with compact type, short feature bullets, and rounded pill controls. Small illustrated navigation marks below the frame add a hand-drawn counterpoint to the otherwise disciplined grid.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#000000` | `--color-soft-ink` | neutral | Primary text, fine frame and divider rules, checkerboard imagery, and filled purchase controls. |
| Blush Canvas | `#f3e5df` | `--color-blush-canvas` | surface | Main page canvas and the pale ground surrounding the product and lifestyle imagery. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Small reversed details, notably the label inside the black purchase button. |

### Semantic aliases

`--color-canvas` → `#f3e5df` (Blush Canvas) · `--color-surface` → `#000000` (Soft Ink) · `--color-text` → `#000000` (Soft Ink) · `--color-border` → `#000000` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f3e5df` | 17.08:1 | AAA |

### Gradients

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

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| frankysDailySlab | `--font-body` | webfont | 400, 500 | Custom slab-serif used throughout the wordmark, headings, product copy, navigation, and controls. | Roboto Slab |

- **frankysDailySlab:** Use measured regular and medium weights; retain natural casing and compact, untracked lettering.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 500 | 1 | 0 | — | frankysDailySlab | Large product headline and primary page title. |
| h2 | 20px | 400 | 1.4 | 0 | — | frankysDailySlab | Secondary product and section headings. |
| body | 14px | 400 | 1.43 | 0 | — | frankysDailySlab | Product details, feature bullets, and supporting copy. |
| caption | 12px | 400 | 1.33 | 0 | — | frankysDailySlab | Small supporting labels and fine print. |
| button | 12px | 400 | 1.33 | 0 | — | frankysDailySlab | Compact purchase and action labels. |
| nav | 12px | 400 | 1.33 | 0 | — | frankysDailySlab | Announcement, bag, and navigation links. |

OpenType features in use: `"zero"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 12, 14, 16, 24, 32, 48 px.
- Section rhythm 48px · element gap 4px · card padding 8px · max content width 1184px.

A centered content frame sits within a generous blush canvas, with a slim announcement strip and centered wordmark above it. The hero uses a two-column split: image-led product presentation on the left and product title, purchase controls, specifications, and a second photograph on the right. Thin borders define the main frame and horizontal separators organize the details. Small illustrated navigation links sit just below the hero, while the newsletter and legal links continue the right-column alignment. The measured maximum page width is 1184px.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · media `6px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat, with no measured shadows. Thin black outlines frame the hero, image, and information dividers, giving structure without raised cards. The purchase action is differentiated by a solid black pill and reversed white label; image layers provide the strongest depth.

## Imagery

Lead with crisp product photography of the dark hat against a bold black-and-blush checkerboard image, then pair it with a framed monochrome lifestyle photograph. Keep both images rectangular and prominent; the graphic backdrop belongs to the product imagery, not the core brand palette. Small hand-drawn icons support the secondary navigation.

## Components

### Announcement strip

A narrow, ruled band above the centered wordmark carries a compact shipping message.

### Header

Centered brand wordmark with a small back control on the left and bag count on the right.

### Framed product hero

A thin black rectangular frame holds a two-column product presentation, with imagery left and product information right.

### Purchase controls

A horizontal row pairs the try-on option with a black rounded purchase button and white compact label.

### Product specifications

Short centered bullet points list fit, construction, wool, trim, embroidery, lining, and origin.

### Illustrated link navigation

Small hand-drawn icons and concise labels link to wool, about, shipping, and help content below the hero.

### Newsletter signup

A slim rounded email field with a fine black outline and a dark circular submit control.

### Measured component styles

- **Primary button** (“Buy 〔€80〕”): background #000000 · text #ffffff · radius 3.35544e+07px · padding 0px 16px · 400 12px frankysDailySlab
- **Input**: transparent background · text #000000 · border 1px solid #000000 · radius 3.35544e+07px · padding 0px 48px 0px 16px · 400 12px frankysDailySlab
- **Card** (“Why wool About us Shipping Bored?”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 16px 0px · 400 16px frankysDailySlab
- **Navigation item** (“We ship world wide!”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px frankysDailySlab

## Do

- Use the measured blush canvas as the main background.
- Frame major content with fine black rules.
- Keep product photography monochrome or high contrast.
- Use the slab-serif consistently across interface text.
- Make purchase actions black pills with white labels.
- Keep supporting navigation compact and lightly illustrated.

## Don't

- Do not introduce unmeasured brand colours.
- Do not add gradients, heavy shadows, or raised cards.
- Do not replace the split hero with a generic centered banner.
- Do not let labels compete with the product imagery.
- Do not use oversized rounded cards or thick borders.
- Do not mistake colours inside the checkerboard artwork for interface palette.

## Agent prompt

Build a new Frankys page with the same restrained visual language: use Blush Canvas (#f3e5df) as the page ground, Soft Ink (#000000) for text, outlines, and primary actions, and Paper White (#ffffff) only for reversed button details. Use a slab-serif throughout, substituting Roboto Slab if the custom face is unavailable. Compose content inside a centered, thinly outlined frame with a clear editorial split between prominent imagery and concise product information. Favor monochrome product photography, compact specifications, and fine horizontal separators. Keep controls simple: pill-shaped black actions, unfilled text links, and outlined rounded fields. Maintain generous breathing room around the frame, but keep internal copy concise and structured. Add small illustrated link icons only where they support navigation; avoid extra palette colours, shadows, gradients, or decorative card effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | product-detail | Announcement and centered header above a framed two-column product hero; image left, purchase details and lifestyle image right. | direct purchase, AR try-on, bag count, newsletter signup | thin black frame, slab-serif type, pill purchase button, compact feature bullets, illustrated link icons |

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