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

# Alt–Border · Design System

> Expressive typography, art direction, and image-led storytelling

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

Alt–Border introduces its Paris-based art direction studio through oversized typography and a tightly curated visual portfolio. A restrained monochrome interface lets vivid fashion, beauty, and design imagery carry the colour.

## North star

Keep the interface monochrome and let oversized typography and carefully selected project imagery create the visual impact.

## Overview

The visual identity is built on a pure white canvas, black type, and fine grey rules. Colour is deliberately absent from the interface itself: the saturated pinks, soft skin tones, cool blues, and dark objects belong to portfolio imagery, not to the brand palette. An oversized, lightweight sans-serif statement dominates the opening, with small editorial images inserted inline to make the introduction feel like a visual composition. A delicate serif display face adds contrast to navigation, labels, and selected links. The page alternates this typographic introduction with a three-column image feed, a large studio statement, project listings, and a monumental studio wordmark. Content aligns to a broad, consistent page width, while thin rules distinguish sections without adding visual weight. Comfortable spacing and simple rectangular image crops keep the dense portfolio legible. There are no decorative gradients, card shadows, or prominent coloured buttons; the work supplies the drama.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas and section backgrounds; provides a quiet gallery-like field around typography and project imagery. |
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Primary headings, body copy, studio wordmark, and most navigation and social text. |
| Rule Grey | `#808080` | `--color-rule-grey` | neutral | Fine section dividers and other restrained structural hairlines. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Studio Ink) · `--color-border` → `#808080` (Rule Grey)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neuehaasdisplay | `--font-body` | webfont | 300 | Oversized introductory statement and lightweight sans-serif text. | Inter |
| Inferi | `--font-display` | webfont | 200, 300 | Serif display accents, navigation, project links, and prominent studio lettering. | Cormorant Garamond |

- **Neuehaasdisplay:** Use a light weight for the large sentence and body; keep case natural and tracking close to neutral.
- **Inferi:** Use a very light serif with natural case and neutral tracking; contrast it against the clean sans-serif.

### Type scale — Custom (ratio ≈ 1.846, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 119.5px | 200 | 0.69 | 0 | — | Inferi | Monumental serif studio wordmark and display lettering. |
| h1 | 105px | 300 | 0.92 | 0 | — | Neuehaasdisplay | Oversized opening statement introducing the studio. |
| h2 | 34px | 200 | 0.69 | 0 | — | Inferi | Editorial studio statement and section-level display text. |
| body | 19px | 300 | normal | 0.01em | — | Neuehaasdisplay | Supporting studio copy and compact interface labels. |
| link | 34px | 200 | 0.69 | 0 | — | Inferi | Serif navigation, project titles, and prominent text links. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 2, 5, 7, 9, 11, 14, 19, 21, 28, 37 px.
- Section rhythm — · element gap 19px · card padding — · max content width 1403px.

Use a broad page canvas capped at the measured 1403px maximum width, with content aligned to consistent outer edges. The opening navigation runs across the top; below it, the oversized statement fills the available width and wraps naturally around inline images. Follow with a three-column feed, then a single-column studio introduction and a two-column project listing. Keep sections clearly separated by fine rules and generous breathing room. The overall density is comfortable, with a compact header and substantial space for imagery and display type.

## Shape & elevation

- Radius: xs `10px`
- Shadow `hairline` (other): `rgb(255, 255, 255) -100px 0px 0px 0px, rgb(255, 255, 255) 100px 0px 0px 0px`
- Shadow `hairline-2` (section): `rgb(255, 255, 255) -100px 0px 0px 0px, rgb(255, 255, 255) 100px 0px 0px 1px`

The page is essentially flat: white backgrounds, rectangular imagery, and thin grey separators provide structure. Avoid card shadows, gradients, and raised surfaces. Measured white box-shadow rules function as subtle section hairlines rather than visible elevation. Keep image and text layers cleanly aligned, with inline images treated as part of the typography.

## Imagery

Use art-directed fashion, beauty, product, and campaign photography as the main source of colour and mood. The opening statement incorporates small image snippets inline; the feed uses larger, simple rectangular crops in a three-column row. Project imagery remains visually varied, mixing close portraits, objects, and campaign compositions. Preserve the source artwork’s colour and texture rather than applying a uniform overlay.

## Components

### Editorial header

A restrained top row with the Alt–Border wordmark at left, serif project navigation near the centre, and information navigation at right.

### Inline-image statement

A large, lightweight sans-serif studio introduction with small portfolio images embedded between words and lines.

### Project feed

A feed label and Instagram link sit above a three-column row of image-led work with short captions.

### Studio introduction

A small section label and read-more link introduce a large, left-aligned statement in a single-column block.

### Project listing

A two-column selection of dated campaign and editorial projects, led by simple titles and media.

### Oversized wordmark

A monumental Alt–Border typographic signature anchors the lower page and contrasts with smaller studio lettering.

### Footer navigation

A minimal copyright line and back-to-top link finish the page without a coloured footer band.

### Measured component styles

- **Primary button**: transparent background · text #ffffff · radius 0px · padding 0px · 200 40px Inferi
- **Link** (“2025 Editorial — Woke up like this”): transparent background · text #0000ee · radius 0px · padding 0px · 200 14.4px Inferi

## Do

- Use white as the uninterrupted interface canvas.
- Keep primary typography black and lightweight.
- Pair the clean sans-serif with a delicate serif display face.
- Let campaign imagery provide the page’s colour.
- Use thin grey rules to distinguish content sections.
- Keep project images rectangular and visually prominent.

## Don't

- Do not add a coloured brand background or gradient.
- Do not turn projects into elevated, shadowed cards.
- Do not apply one colour treatment across varied portfolio images.
- Do not replace oversized editorial type with compact headings.
- Do not clutter the header with controls or badges.
- Do not use decorative borders beyond restrained hairlines.

## Agent prompt

Build a new page in the Alt–Border visual style: a quiet white (#ffffff) canvas, black (#000000) typography, and fine grey (#808080) section rules. Use lightweight oversized sans-serif type for the main statement, paired with a delicate serif for navigation, project links, and display accents. Make the layout broad and editorial, with a compact three-part header, a statement that may weave in small project images, and clean image-led portfolio rows. Let the photographs supply colour; do not introduce interface colours absent from the measured palette. Keep images rectangular, align content to consistent outer edges, and allow generous space around major sections. Avoid cards, gradients, and raised shadows. The result should feel like a design studio’s image-rich portfolio, not a conventional agency marketing template.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Oversized multiline studio statement across the broad page, with small inline images. | inline portfolio imagery, editorial introduction | light sans-serif display type, white canvas, thin divider |
| 2 | content-feed | Three-column image feed with a compact label and Instagram link above. | social feed link, captioned project images | rectangular image tiles, compact serif project links, hairline divider |
| 3 | feature-split | Single-column, left-aligned introduction beneath a small section label. | read-more link, large studio statement | oversized sans-serif copy, white background, fine section rule |
| 4 | gallery | Two-column selection of dated projects with campaign media and titles. | dated project links, mixed campaign media | editorial grid, minimal labels, unframed imagery |
| 5 | footer | Full-width closing area with oversized studio wordmark and compact footer details. | back-to-top link, copyright | monumental wordmark, white space, minimal footer text |

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