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

# Basha-Franklin · Design System

> Warm minimalism for an editorial architecture portfolio

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

Basha-Franklin’s homepage pairs a restrained warm-neutral canvas with an understated studio masthead and a spacious project portfolio. Its open menu reveals a broad peach-toned navigation panel, while muted colour blocks appear within project imagery.

## North star

Let warm blank space and a quiet editorial hierarchy frame the architecture, rather than decorating around it.

## Overview

The visual strategy is quiet and architectural: a pale warm canvas (#f4ede6) dominates the page, leaving the top viewport exceptionally open and placing a compact black wordmark at the center of a slim header. Black is reserved for typography and small utility icons, rather than large filled controls. When opened, the navigation becomes a broad peach field (#e5c0a4) divided into tall columns by fine vertical rules; serif menu links give this panel an editorial, gallery-like character. STKBureau-Serif supplies the larger display and navigation voice, while STKBureau-Sans handles compact uppercase labels and supporting text. Project imagery introduces deeper terracotta, ochre, blush, and green tones, but these are supporting artwork colours, not the main canvas palette. The overall composition is spacious and low-density, with restrained alignment, generous blank areas, and flat surfaces instead of decorative effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#000000` | `--color-soft-ink` | neutral | Primary text, wordmark, navigation labels, and small header utility icons. |
| Gallery Cream | `#f4ede6` | `--color-gallery-cream` | brand | Dominant page canvas and the defining warm neutral across the portfolio. |
| Peach Panel | `#e5c0a4` | `--color-peach-panel` | surface | Broad opened-navigation surface, split into columns by fine vertical rules. |
| Muted Ochre | `#c49760` | `--color-muted-ochre` | accent | Project-card colour, appearing within portfolio artwork rather than the main interface. |
| Kiln Terracotta | `#7c3420` | `--color-kiln-terracotta` | accent | Deep project-image or card colour; supporting artwork, not a primary UI accent. |
| Dusty Apricot | `#d6a891` | `--color-dusty-apricot` | accent | Muted portfolio-card surface and image colour. |
| Rose Clay | `#c58e86` | `--color-rose-clay` | accent | Blush-toned colour inside a project card or portfolio artwork. |
| Forest Slate | `#34483f` | `--color-forest-slate` | accent | Dark green project-image block; artwork colour rather than a general interface surface. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Minor light area around the header; not the dominant page canvas. |

### Semantic aliases

`--color-canvas` → `#f4ede6` (Gallery Cream) · `--color-surface` → `#e5c0a4` (Peach Panel) · `--color-surface-2` → `#c49760` (Muted Ochre) · `--color-surface-3` → `#7c3420` (Kiln Terracotta) · `--color-surface-4` → `#d6a891` (Dusty Apricot) · `--color-text` → `#000000` (Soft Ink) · `--color-accent` → `#c49760` (Muted Ochre) · `--color-accent-2` → `#7c3420` (Kiln Terracotta) · `--color-accent-3` → `#d6a891` (Dusty Apricot)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f4ede6` | 18.1:1 | AAA |
| `#000000` | `#e5c0a4` | 12.41:1 | AAA |
| `#000000` | `#c49760` | 7.94:1 | AAA |
| `#000000` | `#7c3420` | 2.37:1 | fail |
| `#c49760` | `#f4ede6` | 2.28:1 | fail |
| `#c49760` | `#e5c0a4` | 1.56:1 | fail |
| `#c49760` | `#7c3420` | 3.35:1 | AA-large |

### Gradients

- `linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| STKBureau-Sans | `--font-body` | webfont | 400 | Compact supporting copy, uppercase labels, links, and utility navigation. | DM Sans |
| STKBureau-Serif | `--font-display` | webfont | 400 | Wordmark, prominent navigation links, and editorial display text. | Cormorant Garamond |

- **STKBureau-Sans:** Regular weight; small labels and links use uppercase with visibly open tracking.
- **STKBureau-Serif:** Regular weight; use a refined editorial serif and keep display tracking subtly tight.

### Type scale — Custom (ratio ≈ 2, base 14.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 29px | 400 | 1.19 | -0.02em | — | STKBureau-Serif | Editorial serif page or project headline. |
| body | 14.5px | 400 | 1.2 | -0.01em | — | STKBureau-Sans | Sans-serif descriptions and supporting project copy. |
| caption | 11.5px | 400 | 1.3 | 0.04em | uppercase | STKBureau-Sans | Small uppercase contextual labels. |
| nav | 29px | 400 | 1.19 | -0.02em | — | STKBureau-Serif | Large serif links in the menu and masthead hierarchy. |
| link | 11.5px | 400 | 1.3 | 0.04em | uppercase | STKBureau-Sans | Compact uppercase calls to action and text links. |
| eyebrow | 11.5px | 400 | 1.3 | 0.04em | uppercase | STKBureau-Sans | Small uppercase labels above content or project names. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 9, 22, 25, 36, 72, 176 px.
- Section rhythm 72px · element gap 9px · card padding — · max content width —.

Keep the header slim, with a menu icon aligned left, a centered wordmark, and small social icons at the right. Preserve a large, quiet canvas before the portfolio content; the captured first viewport is intentionally sparse. The opened menu spans the page width and separates link groups into tall columns with fine vertical dividers. Use a simple editorial grid for project cards, with generous gutters and no invented max-width. Section spacing feels comfortable, and content density stays low.

## Shape & elevation

- No box shadows measured: the page is flat.

The interface reads as flat and gallery-like. Measured data reports no shadows, and the card samples have no corner radius. Use thin, quiet vertical dividers in the opened menu rather than raised panels or heavy outlines; let background colour and whitespace establish the layers.

## Imagery

Treat project imagery as the main source of saturated colour: the scaled page view shows architectural portfolio cards with broad blocks of forest green, rose clay, ochre, and terracotta. Keep these colours inside the artwork rather than spreading them across interface chrome. The captured first viewport has no visible hero image, so retain an open, image-free opening area and introduce project imagery lower on the page.

## Components

### Slim masthead

Place the menu control at the left, centered Basha-Franklin wordmark, and compact social icons at the right on the warm canvas.

### Menu control

Use a minimal black menu icon; opening it reveals a full-width peach navigation panel.

### Column navigation

Group studio links in tall columns over #e5c0a4, with fine vertical dividers, small uppercase category labels, and serif links.

### Project card

Present architectural project imagery in a restrained grid; allow muted artwork colours such as #c49760 and #34483f.

### Text link

Use black sans-serif uppercase link styling for compact actions such as “+ FIND OUT MORE”.

### Measured component styles

- **Primary button**: transparent background · text #000000 · radius 0px · padding 0px · 400 14.4px STKBureau-Sans
- **Link** (“1 VINE STREET Premium Mayfair”): transparent background · text #000000 · radius 0px · padding 0px · 400 14.4px STKBureau-Sans
- **Card**: background #c49760 · text #000000 · radius 0px · padding 0px · 400 14.4px STKBureau-Sans
- **Navigation item** (“Projects”): transparent background · text #000000 · radius 0px · padding 0px · 400 28.8px STKBureau-Serif

## Do

- Use #f4ede6 as the dominant canvas.
- Keep the centered wordmark small and understated.
- Use the serif for prominent navigation and editorial display.
- Set utility labels and compact links in uppercase sans-serif.
- Use #e5c0a4 as a distinct navigation-panel surface.
- Keep project colours within the portfolio artwork.
- Preserve generous blank space and flat surfaces.

## Don't

- Do not fill the opening canvas with decorative content.
- Do not use saturated project colours as global UI accents.
- Do not add shadows or rounded-card styling.
- Do not replace the quiet masthead with a heavy navigation bar.
- Do not make labels compete with the large serif links.
- Do not crowd the project grid with dense metadata.

## Agent prompt

Build a new page in the Basha-Franklin visual style. Use Gallery Cream (#f4ede6) for the dominant canvas and Soft Ink (#000000) for typography and simple utility icons. Create a restrained masthead with a left menu control, centered studio wordmark, and small right-side social links. Use STKBureau-Serif, or a close editorial serif, for prominent headings and navigation; use STKBureau-Sans for compact supporting copy and uppercase labels. If showing an open menu, use a broad Peach Panel (#e5c0a4) divided into tall columns with subtle rules. Keep the opening area spacious and low-density. Build a clean portfolio grid, keeping Muted Ochre (#c49760), Kiln Terracotta (#7c3420), Dusty Apricot (#d6a891), Rose Clay (#c58e86), and Forest Slate (#34483f) primarily inside project imagery. Avoid shadows, rounded cards, and decorative effects.

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