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

# Bajgart Office · Design System

> Expressive editorial type meets a quiet portfolio canvas.

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

A bright, typography-led studio homepage pairs an oversized editorial headline with an extensive, varied brand portfolio. Restrained black-and-white styling lets the colorful client work provide most of the visual contrast.

## North star

Keep the interface quiet and editorial so the studio’s oversized typography and diverse project imagery carry the personality.

## Overview

The page is built on a nearly white canvas, with black typography and compact black pill CTAs establishing a restrained identity. The palette stays intentionally narrow: the quiet interface gives the portfolio imagery room to introduce vivid colors, photography, mockups, and graphic compositions without turning the surrounding layout into a competing brand system. A refined light serif brings an editorial character to the hero and selected headings, while a clean sans-serif handles navigation, supporting copy, labels, and controls. The opening headline is large, left-aligned, and broken into short lines, with italic emphasis adding a subtle moment of contrast. Below it, project work is presented as a long, spacious sequence of varied image arrangements rather than uniform product cards. Generous white gaps separate the introductory copy, work, FAQ, testimonials, and closing studies feature. The effect is polished and image-led, but remains approachable through concise copy, rounded controls, and clear navigation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Primary text, headings, inverse CTA fills, and occasional dark portfolio surfaces. |
| Soft Canvas | `#f6f6f6` | `--color-soft-canvas` | surface | Measured pale canvas and card background; use as a subtle neutral rather than a prominent section band. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page background and open space surrounding navigation, copy, and portfolio work. |
| Quiet Gray | `#878787` | `--color-quiet-gray` | neutral | Minor muted text in the measured palette; suitable for secondary metadata, not primary copy. |

### Semantic aliases

`--color-canvas` → `#f6f6f6` (Soft Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#000000` (Studio Ink) · `--color-text` → `#000000` (Studio Ink)

### Contrast (WCAG 2.x)

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

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Saans Regular | `--font-body` | webfont | 400, 700 | Navigation, body copy, labels, buttons, and sans-serif headings. | Inter |
| Rhymes Text Light | `--font-display` | webfont | 300 | Editorial display headlines and selected section headings. | Cormorant Garamond |
| Saans Medium | `--font-saans-medium` | webfont | 500 | Small emphasized interface text and labels. | Inter |

- **Saans Regular:** Use clean, regular sans-serif text; measured weights include 400 and 700, with medium weight available for emphasis.
- **Rhymes Text Light:** Light serif with tight negative tracking; use sentence case and occasional italic emphasis for expressive words.
- **Saans Medium:** Medium-weight sans-serif; reserve for subtle emphasis rather than heavy display treatment.

### Type scale — Augmented Fourth (ratio ≈ 1.456, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 300 | 1 | -0.06em | — | Rhymes Text Light | Editorial serif display lines and expressive closing-section title. |
| h1 | 70px | 400 | 1.03 | -0.02em | — | Saans Regular | Large hero headline, broken into short left-aligned lines. |
| h2 | 56px | 300 | 1.05 | -0.06em | — | Rhymes Text Light | Editorial section headings for portfolio and FAQ content. |
| h3 | 24px | 400 | 1.33 | -0.01em | — | Saans Regular | Compact project or supporting section headings. |
| body | 16px | 400 | 1.5 | 0 | — | Saans Regular | Introductory paragraph, project descriptions, and testimonial copy. |
| caption | 14px | 400 | 1 | 0 | — | Saans Regular | Navigation labels, metadata, tags, and compact interface text. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 16, 18, 24, 32, 40 px.
- Section rhythm 64px · element gap 24px · card padding — · max content width 1392px.

Use a broad, centered page frame with a measured maximum width of 1392px, while the hero content itself stays left aligned. The header distributes navigation, centered wordmark, and availability/CTA across the top. Allow the hero to breathe before a wide, varied portfolio sequence. Projects use changing columns and image proportions, with explanatory copy often offset from the work. Keep comfortable density and substantial section pauses; the FAQ and testimonials simplify into text-led layouts before the centered closing showcase.

## Shape & elevation

- Radius: button `9999px` · media `50%` · link `9999px` · xs `12px` · sm `20px` · pill `9999px`
- No box shadows measured: the page is flat.

The interface is predominantly flat, with little evidence of shadow or decorative borders. Use white space and image composition to establish separation. Navigation links and CTA buttons use rounded pill silhouettes; portfolio media can have soft rounded corners where visible, without adding a generic elevated-card treatment.

## Imagery

Treat project imagery as the page’s main color source: combine brand identity boards, digital mockups, packaging, product photography, websites, and occasional video-like studio content. Show work at varied scales and aspect ratios rather than forcing a uniform card crop. Keep the surrounding page white and avoid heavy image frames, allowing each project’s own visual language to remain distinct.

## Components

### Header navigation

Place compact rounded links at the left, a centered two-line serif wordmark, and a green availability note with a black pill CTA at the right.

### Hero introduction

Use a large, left-aligned editorial headline with selective italic emphasis, one concise supporting paragraph, compact industry tags, and a black booking CTA.

### Project gallery

Build a long portfolio showcase from varied image sizes and alignments; preserve each project’s own color and graphic identity.

### Service introduction

Pair a serif promise and compact explanatory copy with a large studio image or video preview, leaving generous white separation.

### FAQ

Set a serif question heading and intro on the left, with a simple right-side list of questions and understated expand indicators.

### Testimonials

Arrange founder quotes in a quiet multi-column text layout, with small client names, roles, and portrait or brand marks.

### Closing studies feature

Center a short editorial title, explanatory copy, and black Explore studies pill above a prominent, vivid featured image.

### Measured component styles

- **Primary button** (“Book your intro call”): background #000000 · text #0000ee · radius 50px · padding 8px 16px · 400 12px sans-serif
- **Link** (“Process + Pricing”): transparent background · text #0000ee · radius 50px · padding 8px 16px · 400 12px sans-serif
- **Card**: background #f6f6f6 · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Keep the main interface white, black, and visually quiet.
- Use the measured serif for expressive display moments.
- Set hero and section copy flush left where shown.
- Let portfolio artwork introduce its own color palettes.
- Vary project image size and arrangement across the page.
- Use black rounded pills for prominent calls to action.

## Don't

- Do not add bright interface accents absent from the measured palette.
- Do not place every project inside an identical card.
- Do not make the page feel dense or dashboard-like.
- Do not use heavy shadows or decorative borders as default.
- Do not center-align the hero headline.
- Do not let secondary copy compete with the portfolio imagery.

## Agent prompt

Build a new page in the Bajgart Office visual style: a quiet, spacious design-studio canvas with editorial typography and image-led work. Use Gallery White (#ffffff) as the dominant background and Studio Ink (#000000) for text and rounded CTA fills; Soft Canvas (#f6f6f6) may appear as a subtle neutral, while Quiet Gray (#878787) is reserved for minor secondary text. Pair an expressive light serif display face with a clean sans-serif for navigation, body copy, labels, and controls. Lead with a large, left-aligned headline, concise supporting copy, compact tags, and a clear booking action. Build portfolio sections from varied image scales and alignments, letting each project provide its own color. Preserve generous white gaps, flat surfaces, and a restrained, editorial rhythm. Include simple FAQ and testimonial sections, then finish with a centered studies showcase.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Three-part header with left navigation, centered wordmark, and right-side availability plus CTA. | Primary route links, Availability cue, Booking CTA | Pill navigation links, Centered serif wordmark, Black rounded button |
| 2 | hero | Left-aligned headline and supporting content on a broad white field. | Immediate value proposition, Industry tags, Intro call CTA | Large serif display, Italic word emphasis, Compact colored-dot tags |
| 3 | gallery | Wide, staggered portfolio imagery with varied widths and crops. | Visual discovery, Project variety | Mixed image proportions, Open white gutters |
| 4 | logo-cloud | Small centered credibility line above a horizontal row of client marks. | Social proof, Client recognition | Muted logo marks, Centered caption |
| 5 | feature-split | Editorial copy and CTA beside a large studio media panel. | Explain the service, Support conversion | Serif statement, Compact supporting copy, Media preview |
| 6 | faq | Introductory heading and CTA on the left, question list on the right. | Answer purchase questions, Expandable questions, Book intro call | Editorial heading, Minimal row separators or indicators |
| 7 | testimonials | Three-column testimonial presentation with compact identity details. | Founder endorsements, Attribution | Text-led quotes, Small portraits or marks, Open column spacing |
| 8 | gallery | Centered introduction followed by one prominent featured study image. | Explore speculative work, Secondary CTA | Serif display title, Black pill link, Large vivid artwork |

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