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

# In Common With · Design System

> Quiet editorial space for sculptural lighting and craft.

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

In Common With presents its lighting studio through immersive interiors, restrained typography, and a warm, material-led palette. The homepage pairs a cinematic hero with catalog browsing, product stories, collection imagery, showroom information, and editorial content.

## North star

Let atmospheric interior photography lead, while keeping the interface quiet, flat, and anchored by Brick Ink on Gallery White.

## Overview

The page balances a quiet Gallery White canvas (#fafaf9) with deep Brick Ink (#4a0a05) for headings, body copy, links, and fine rules. A muted blue-gray band (#b3bec5) marks the trade section, while Clay Stone (#bcb6a6) appears as a measured card surface; the warm interior photography supplies most of the visible color and should not be mistaken for UI palette. Mier A is the workhorse sans, used for navigation, body text, labels, and most headings in regular weight. Caslon Ionic adds a restrained editorial contrast in the measured secondary-heading role. Layout shifts between a full-bleed opening photograph and compact, asymmetrical editorial grids, with generous white intervals and thin separators. Product and room photography carries the storytelling: tactile materials, crafted fixtures, and lived-in architectural settings remain the visual focus. Controls stay understated, with square corners and outlined forms rather than elevated, rounded UI.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Brick Ink | `#4a0a05` | `--color-brick-ink` | brand | Primary text, headings, links, footer content, and thin borders. |
| Gallery White | `#fafaf9` | `--color-gallery-white` | neutral | Main page canvas and light text over dark imagery. |
| Mist Blue | `#b3bec5` | `--color-mist-blue` | surface | Trade-program section band; use as a calm background accent. |
| Clay Stone | `#bcb6a6` | `--color-clay-stone` | surface | Measured card surface tone; secondary to the page's photographic interiors. |

### Semantic aliases

`--color-canvas` → `#fafaf9` (Gallery White) · `--color-surface` → `#bcb6a6` (Clay Stone) · `--color-text` → `#4a0a05` (Brick Ink) · `--color-text-muted` → `#fafaf9` (Gallery White) · `--color-border` → `#4a0a05` (Brick Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#4a0a05` | `#fafaf9` | 15.04:1 | AAA |
| `#4a0a05` | `#bcb6a6` | 7.77:1 | AAA |
| `#fafaf9` | `#bcb6a6` | 1.94:1 | fail |

### Gradients

- `linear-gradient(rgba(179, 190, 197, 0) 0%, rgb(179, 190, 197) 6.25%, rgb(179, 190, 197) 92.71%, rgba(179, 190, 197, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Mier A | `--font-body` | webfont | 400 | Primary sans for navigation, body copy, links, buttons, labels, and most headings. | Inter |

- **Mier A:** Regular weight throughout; clean, unembellished forms and restrained sizing.

### Type scale — Major Third (ratio ≈ 1.229, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 26px | 400 | 1.2 | 0 | — | Mier A | Homepage identity and primary hero title. |
| h2 | 24px | 400 | 1.2 | 0 | — | Caslon Ionic | Editorial secondary headings and section titles. |
| h3 | 18px | 400 | 1.2 | 0 | — | Mier A | Catalog, product, collection, and content-card headings. |
| body | 14px | 400 | 1.2 | 0 | — | Mier A | Product descriptions, studio copy, and explanatory text. |
| caption | 13px | 400 | 1.2 | 0 | — | Mier A | Small labels, dates, product details, and supporting notes. |
| button | 14px | 400 | 1.2 | 0 | — | Mier A | Quietly styled actions such as sign-up and form controls. |
| nav | 14px | 400 | 1.2 | 0 | — | Mier A | Header navigation and account or utility links. |
| link | 14px | 400 | 1.2 | 0 | — | Mier A | Inline and standalone navigation actions. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 40, 48, 56, 60 px.
- Section rhythm 48px · element gap 12px · card padding 3px · max content width 1392px.

The homepage opens with full-bleed interior photography, then moves into a long, single-page editorial sequence on a light canvas. Measured content uses a maximum width of 1392px and a comfortable density, with a recurring 8-column structure. Align section labels to the left and let content occupy offset columns, alternating large image-led blocks with smaller supporting text and cards. Preserve generous section intervals, thin horizontal rules, and uneven image widths rather than forcing uniform centered panels.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat: no measured shadows, raised cards, or rounded container treatment. Separate content with fine Brick Ink rules and changes in image scale or background tone. The hero overlays text and navigation directly on photography; maintain legibility through placement and image contrast, not heavy UI panels.

## Imagery

Use large, naturalistic photographs of lighting in architectural interiors, with the fixture shown in context and materials left visibly tactile. The opening image fills the viewport and supports subtle overlaid navigation and text. Later sections mix portrait product images, wide room scenes, and small product cards. Keep color grading warm and atmospheric; avoid decorative illustration or artificial product renders that compete with the photography.

## Components

### Overlay navigation

Place compact Mier A navigation over the hero image; measured navigation appears in light text on imagery and Brick Ink on light backgrounds.

### Hero image

Use a full-bleed architectural interior photograph with a restrained title and supporting copy positioned directly over the scene.

### Category cards

Show product-category photography with short Brick Ink labels and simple shop links; keep cards visually open and unrounded.

### Editorial product feature

Pair a large product or room image with a small description and secondary product image, using asymmetrical columns and fine dividers.

### Trade band

Set trade-program copy and a small product image within a distinct Mist Blue (#b3bec5) section band.

### Newsletter form

Use a minimal email input and outlined sign-up button with Brick Ink (#4a0a05) borders and regular sans-serif text.

### Footer

Organize studio contacts, showroom details, newsletter signup, and link groups into compact columns separated by thin rules.

### Measured component styles

- **Primary button** (“Sign Up”): transparent background · text #4a0a06 · border 1px solid #4a0a05 · radius 0px · padding 0px 12px · 400 14px Mier A
- **Link** (“Shop All Lights”): transparent background · text #4a0a05 · radius 0px · padding 0px · 400 14px Mier A
- **Input**: transparent background · text #4a0a05 · border 1px solid #4a0a05 · radius 0px · padding 0px 12px · 400 14px Mier A
- **Card** (“Since our founding in 2018, our catalog ”): transparent background · text #4a0a05 · border 1px solid #4a0a05 · radius 0px · padding 12px 0px 0px 0px · 400 14px Mier A
- **Navigation item** (“In Common With Homepage Shop Collections”): transparent background · text #f8f7f1 · radius 0px · padding 0px · 400 14px Mier A

## Do

- Let contextual lighting photography dominate the page.
- Use Brick Ink (#4a0a05) for core text and fine rules.
- Keep the Gallery White (#fafaf9) canvas visually calm.
- Use asymmetrical image-and-copy compositions.
- Reserve Mist Blue (#b3bec5) for the trade section band.
- Keep typography regular-weight and understated.

## Don't

- Do not turn the interface into a bright, saturated storefront.
- Do not add shadows or elevated card effects.
- Do not round cards or controls.
- Do not make every section a uniform grid of equal tiles.
- Do not treat warm photographic tones as interface colors.
- Do not crowd images with heavy text panels.

## Agent prompt

Build a new In Common With page as a quiet, image-led design-studio experience. Use Gallery White (#fafaf9) for the main canvas and Brick Ink (#4a0a05) for headings, body text, links, and hairline rules. Let large, warm architectural photographs carry the mood; keep navigation and copy small, light, and directly over imagery where appropriate. Use Mier A or a close sans substitute for most text, with a restrained Caslon-style serif accent for editorial headings. Compose asymmetrical columns, varied image widths, and generous intervals instead of repeated uniform cards. A Mist Blue (#b3bec5) band may distinguish a partner or trade section. Keep controls square, outlined, and flat; avoid shadows, gradients beyond subtle image treatment, and decorative UI chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Full-bleed photographic hero followed by an 8-column editorial sequence of catalog, product stories, collections, showroom, newsletter, journal, and footer. | Overlay navigation, Browse product categories, Explore editorial stories, Newsletter signup | Warm interior photography, Asymmetric image-and-copy blocks, Thin horizontal rules, Flat square controls |

## Source CSS custom properties (selected)

```css
--transition-std-duration: .4s;
--transition-std-ease: cubic-bezier(.4,0,.2,1);
--transition-lighting-duration: 1.2s;
--transition-lighting-ease: cubic-bezier(.42, 0, .58, 1);
--color-bone-light: #fafaf9;
--color-bone-mid: #F8F7F1;
--color-bone-dark: #E9E4DC;
--color-clay-mid: #DCD8D0;
--color-clay-dark: #BCB6A6;
--color-brick-light: #5C1C07;
--color-brick-mid: #4A0A05;
--color-brick-dark: #441100;
--color-red-light: #E60000;
--color-red-mid: #AD0000;
--color-red-dark: #8D0000;
--color-text: #4A0A05;
--color-bg: #fafaf9;
--color-accent: #E60000;
--color-header: #F8F7F1;
--color-header-default: #4A0A05;
--font-serif: "Caslon Ionic", serif;
--font-sans: "Mier A", sans-serif;
--h1-sans-font: "Mier A", sans-serif;
--h2-sans-font: "Mier A", sans-serif;
--h3-sans-font: "Mier A", sans-serif;
--body-large-sans-font: "Mier A", sans-serif;
--body-medium-sans-font: "Mier A", sans-serif;
--body-regular-sans-font: "Mier A", sans-serif;
--body-small-sans-font: "Mier A", sans-serif;
--h1-large-font: "Caslon Ionic", serif;
--h1-serif-font: "Caslon Ionic", serif;
--h2-serif-font: "Caslon Ionic", serif;
--h3-serif-font: "Caslon Ionic", serif;
--body-large-serif-font: "Caslon Ionic", serif;
--body-medium-serif-font: "Caslon Ionic", serif;
--body-regular-serif-font: "Caslon Ionic", serif;
--body-small-serif-font: "Caslon Ionic", serif;
--swiper-theme-color: #007aff;
--bdp-d-launcherBackgroundColor: rgba(255, 174, 21, 1);
--bdp-d-launcherIconColor: rgba(255, 255, 255, 1);
```

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