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

# Bibliothèque · Design System

> A quiet frame for vivid creative work

**Theme:** dark · **Industry:** design · **Source:** https://bibliothequedesign.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._

Bibliothèque frames its studio work with a restrained black-and-white interface and an immersive, full-bleed project image. Minimal navigation and typography keep attention on the featured visual rather than competing for it.

## North star

Keep the interface nearly invisible so a single, edge-to-edge project image carries the visual impact.

## Overview

The measured interface is a strict monochrome frame: #000000 defines the canvas and #ffffff carries the small brand mark and interface text. In the supplied viewport, the dominant visual is a full-bleed photograph of an ornate restaurant, rich with warm reds, golds, and neon signage; these colors belong to the featured project imagery, not the measured site palette. Keep interface colors limited to the measured black and white rather than sampling the photograph into new brand accents. Unica77 LL is the measured sans-serif, used consistently for body copy, navigation, captions, and links at regular weight. The composition is spacious and image-led, with the project filling the viewport and a discreet white “B” mark at the upper-left. Avoid visible card framing, decorative borders, or shadows: the work itself supplies texture and color, while the site chrome stays quiet and flat.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Black | `#000000` | `--color-gallery-black` | brand | Measured canvas across the site; use for quiet interface areas and dark text where shown. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Measured interface text, links, navigation, and the small white brand mark over imagery. |

### Semantic aliases

`--color-canvas` → `#000000` (Gallery Black) · `--color-text` → `#ffffff` (Paper White) · `--color-text-muted` → `#000000` (Gallery Black)

### Contrast (WCAG 2.x)

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

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Unica77 LL | `--font-body` | webfont | 400 | Shared sans-serif for body, navigation, captions, and links. | Inter |

- **Unica77 LL:** Regular weight throughout; measured text uses natural casing and no added tracking.

### Type scale — Major Third (ratio ≈ 1.25, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 18px | 400 | 1.22 | 0 | — | Unica77 LL | General page copy and project-related text. |
| caption | 12px | 400 | 1.22 | 0 | — | Unica77 LL | Small supporting labels and image captions. |
| nav | 18px | 400 | 1.22 | 0 | — | Unica77 LL | Primary navigation and menu items. |
| link | 18px | 400 | 1 | 0 | — | Unica77 LL | Text links and project titles. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 4, 5, 10, 15, 18, 20, 30, 80, 162 px.
- Section rhythm 105px · element gap — · card padding — · max content width —.

Use an expansive, image-first composition with the featured work spanning the viewport. Keep navigation and identity details unobtrusive and aligned close to the image edges. The measured spacing scale is spacious, with a substantial section gap; preserve generous breathing room rather than adding dense content blocks. No measured max-width or grid was supplied, so avoid imposing a fixed container. The screenshot shows a single dominant visual with no card grid or visible section boundaries.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s ease` on interactive elements.

The measured interface has no shadows, gradients, or border colors, and the screenshot reads as a flat image canvas. Avoid cards and raised surfaces. Any depth comes from the photography itself—reflections, layered furnishings, and ambient light—not UI elevation effects.

## Imagery

Lead with high-impact project photography, cropped edge-to-edge so the work fills the viewport. The supplied image depicts a richly decorated restaurant interior with layered reflections, warm golds, dark reds, and luminous signage. Treat these hues as image content rather than brand colors; keep interface marks legible and minimal over the photograph.

## Components

### Brand mark

A small white “B” sits at the top-left over the hero image, acting as the primary visible identity element.

### Project hero

A full-bleed featured project image dominates the first viewport; its warm, detailed scene supplies the page's visual color.

### Primary navigation

Measured navigation uses Unica77 LL at regular weight, with white text on dark contexts and black text where the background is light.

### Text links

Project and section links use regular 18px Unica77 LL; measured examples are unboxed, with no padding, border, or shadow.

### Section labels

Labels such as “Recognition” and “Selected clients” are plain text rather than filled or outlined button controls.

### Measured component styles

- **Primary button** (“Recognition”): transparent background · text #ffffff · radius 0px · padding 0px · 400 18px Unica77 LL
- **Link** (“Adicolor”): transparent background · text #000000 · radius 0px · padding 0px · 400 18px Unica77 LL
- **Navigation item** (“B Brand identityPrintDigitalSpatialAll p”): transparent background · text #ffffff · radius 0px · padding 0px · 400 18px Unica77 LL

## Do

- Use only #000000 and #ffffff for measured interface colors.
- Let the featured project image fill the available viewport.
- Keep the brand mark small and easy to scan.
- Use Unica77 LL or a close neutral sans-serif substitute.
- Keep controls text-led, flat, and unboxed.
- Preserve generous negative space around interface elements.

## Don't

- Do not adopt the photograph's gold or red hues as brand accents.
- Do not overlay dense navigation or promotional copy on the hero.
- Do not add card shadows, gradients, or decorative borders.
- Do not invent a fixed content width or grid not present in the measurements.
- Do not make the interface louder than the featured work.

## Agent prompt

Build a design-studio page with an almost invisible interface and a dominant, edge-to-edge project image. Use Gallery Black (#000000) for the measured canvas and Paper White (#ffffff) for the brand mark, links, and navigation where contrast requires it. Keep image-derived colors inside the artwork; do not promote them into UI accents. Set interface text in Unica77 LL, regular weight, or a close sans-serif substitute such as Inter. Keep the visible identity compact near the upper-left and use plain text links without boxes, borders, or shadows. Favor a spacious, image-led composition with few competing elements. Do not invent fixed widths or section details unsupported by the measured page; let the selected project remain the main event.

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