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

# Becklyn · Design System

> Quiet darkness, expressive type, and expansive digital work.

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

Becklyn’s homepage pairs a near-black canvas with oversized editorial typography and generous pauses between sections. Project, service, client, team, and editorial content share a restrained grayscale system, with vivid gradient color reserved for small accent moments.

## North star

Let the near-black canvas and generous empty space frame expressive type and large, purposeful content rather than decorating every section.

## Overview

The visual system is built around a near-black #1a1a1a canvas that carries almost the entire page, with white type providing crisp contrast. Near-black #000000 appears in dark UI details, while #3b3b3b distinguishes cards and section surfaces without breaking the monochrome mood. The restrained blue-to-magenta-to-wine gradient is an accent, not a general background treatment. UniversalSans-500 handles navigation, body copy, service listings, and most headings; Cambon adds italic editorial character to the oversized hero and selected display lines. The layout favors a left-aligned reading edge, broad open areas, and long vertical pauses. Portfolio work and people imagery appear in substantial card-like frames, while services become a precise ruled list. Small white capsule controls contrast with dark floating navigation. Hairlines in muted gray quietly divide content; the page stays visually flat rather than relying on shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Paper Light | `#ffffff` | `--color-paper-light` | brand | Primary heading, body, navigation, link, logo, and footer text against the dark canvas. |
| Studio Charcoal | `#1a1a1a` | `--color-studio-charcoal` | brand | Dominant page canvas and dark text on the white circular control. |
| Quiet Graphite | `#606060` | `--color-quiet-graphite` | semantic | Muted supporting text and subtle hairline borders; use sparingly against the dark canvas. |
| Absolute Black | `#000000` | `--color-absolute-black` | surface | Deep dark surface and floating navigation backdrop, creating a subtle layer over charcoal. |
| Card Slate | `#3b3b3b` | `--color-card-slate` | surface | Raised-looking project, article, and team card surfaces; not a separate page band. |
| Signal Blue | `#004eff` | `--color-signal-blue` | accent | Gradient endpoint accent; appears in small interface details and gradient treatments, not as a dominant fill. |
| Violet Wine | `#710966` | `--color-violet-wine` | accent | Middle stop in the measured blue-to-wine gradient; a restrained chromatic accent. |
| Mulberry Red | `#8e2e45` | `--color-mulberry-red` | accent | Warm gradient endpoint, lending a muted red-violet finish to accent treatments. |

### Semantic aliases

`--color-canvas` → `#1a1a1a` (Studio Charcoal) · `--color-surface` → `#000000` (Absolute Black) · `--color-surface-2` → `#3b3b3b` (Card Slate) · `--color-text` → `#ffffff` (Paper Light) · `--color-text-muted` → `#606060` (Quiet Graphite) · `--color-border` → `#606060` (Quiet Graphite) · `--color-accent` → `#004eff` (Signal Blue) · `--color-accent-2` → `#710966` (Violet Wine) · `--color-accent-3` → `#8e2e45` (Mulberry Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#1a1a1a` | 17.4:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#3b3b3b` | 11.2:1 | AAA |
| `#606060` | `#1a1a1a` | 2.77:1 | fail |
| `#606060` | `#000000` | 3.34:1 | AA-large |
| `#606060` | `#3b3b3b` | 1.78:1 | fail |
| `#004eff` | `#1a1a1a` | 2.93:1 | fail |
| `#004eff` | `#000000` | 3.53:1 | AA-large |
| `#004eff` | `#3b3b3b` | 1.88:1 | fail |

### Gradients

- `linear-gradient(200deg, rgb(0, 78, 255) 0%, rgb(113, 9, 102) 75%, rgb(142, 46, 69) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| UniversalSans-500 | `--font-body` | webfont | 400 | Primary face for navigation, body copy, headings, service rows, links, and controls. | Inter |
| Cambon | `--font-display` | webfont | 400 | Editorial display face for the expressive hero line and selected italic statements. | Cormorant Garamond |

- **UniversalSans-500:** Measured at weight 400; compact negative tracking is common. Use sentence case and clean, unembellished forms.
- **Cambon:** Use selectively for large, elegant italic contrast; measured display role is regular weight with tight tracking.

### Type scale — Perfect Fifth (ratio ≈ 1.465, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 92px | 400 | 1 | -0.013em | — | Cambon | Oversized editorial statements and expressive serif display lines. |
| h1 | 68px | 400 | 1 | -0.059em | — | UniversalSans-500 | Primary sans-serif hero heading and prominent page titles. |
| h2 | 42px | 400 | 1.05 | -0.024em | — | UniversalSans-500 | Section headings such as services, clients, and team. |
| h3 | 36px | 400 | 1.15 | -0.014em | — | UniversalSans-500 | Subsection titles and secondary content headings. |
| body | 20px | 400 | 1.15 | -0.025em | — | UniversalSans-500 | Introductory agency copy, descriptions, and article text. |
| caption | 12px | 400 | 1 | -0.042em | — | UniversalSans-500 | Compact card metadata, labels, and footer details. |
| button | 20px | 400 | 1.15 | -0.025em | — | UniversalSans-500 | Navigation controls and interactive calls to action. |
| link | 20px | 400 | 1.15 | -0.025em | — | UniversalSans-500 | Inline navigation and text-based calls to action. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 6, 7, 8, 10, 20, 24, 40, 48 px.
- Section rhythm 260px · element gap 10px · card padding — · max content width 1360px.

Use a spacious, mostly single-column page structure within the measured 1360px maximum width. Keep content aligned to a consistent left edge, while project showcases and team content expand into multi-column grids. Long vertical gaps give each block a distinct entrance; the measured section gap is 260px. Case cards alternate broad full-width compositions with paired columns. Service content forms a full-width list with ruled rows. Maintain low density and generous negative space rather than filling every viewport.

## Shape & elevation

- Radius: button `50%` · card `10px` · xs `10px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s ease` on interactive elements.

The visual language is predominantly flat, with no measured shadows. Separate content through charcoal-on-charcoal contrast: #3b3b3b cards sit above the #1a1a1a canvas, while #000000 creates darker UI layers. Use thin #606060 hairlines for list separators. Card corners are measured at 10px; the floating navigation uses a dark pill and a white circular active control.

## Imagery

Large case-study images and team portraits provide the main visual material; client marks appear as a broad logo collection. Project imagery sits in substantial grid frames with softly rounded corners on cards. The page also includes editorial cards in charcoal surfaces. Treat media as content, not decoration: preserve its scale, let dark margins frame it, and avoid adding unmeasured illustration or color effects.

## Components

### Floating section navigation

A compact black pill near the lower viewport edge, with text links and a white circular active item. Keep labels white and the active state sharply contrasted.

### Editorial hero

A sparse, left-aligned statement on the dark canvas. Pair the large Cambon display treatment with UniversalSans for the contrasting continuation.

### Project cards

Large portfolio media blocks arranged as full-width and paired-column compositions; card surfaces use #3b3b3b and measured 10px corners.

### Services list

A full-width sequence of service names, short descriptions, and indices, separated by subtle #606060 hairlines.

### Team cards

A multi-column row of portrait-led cards with names and role captions; maintain consistent framing and restrained dark treatment.

### Editorial cards

Charcoal article cards with compact dark category chips, white titles, and small date captions; pair with a separate editorial display label.

### Footer statement

A large closing line combining sans-serif and italic serif styling, alongside contact and compact legal or social links.

### Measured component styles

- **Primary button**: background #ffffff · text #1a1a1a · radius 50% · padding 0px · 400 20px UniversalSans-500
- **Link** (“hello@becklyn.com”): transparent background · text #ffffff · radius 0px · padding 0px · 400 20px UniversalSans-500
- **Card** (“Design Engineering Marketing Neohaus Mar”): background #3b3b3b · text #ffffff · radius 10px · padding 0px · 400 20px UniversalSans-500

## Do

- Use #1a1a1a as the dominant page canvas.
- Keep essential copy and navigation in crisp #ffffff.
- Reserve Cambon for selected expressive display lines.
- Use #3b3b3b to distinguish cards from the canvas.
- Preserve large, deliberate pauses between content sections.
- Use #606060 hairlines to organize dense service rows.

## Don't

- Do not turn the gradient into a full-page background.
- Do not introduce unmeasured palette colors.
- Do not fill the negative space with extra UI.
- Do not add drop shadows to the otherwise flat surfaces.
- Do not use serif styling for routine navigation or body copy.
- Do not shrink portfolio media into decorative thumbnails.

## Agent prompt

Build a new page in Becklyn’s dark, editorial agency style. Use #1a1a1a as the continuous canvas, #ffffff for clear type, #3b3b3b for card surfaces, and #606060 only for muted details and hairlines; keep #000000 for deeper UI layers. Treat Signal Blue #004eff, Violet Wine #710966, and Mulberry Red #8e2e45 as restrained gradient accents, not broad fills. Set routine interface and copy in UniversalSans-500 or a close sans-serif substitute; use Cambon or an elegant free serif only for large editorial statements. Align content to a consistent left edge, preserve very generous vertical pauses, and let case imagery occupy substantial grid areas. Use restrained card rounding, thin rules, and flat surfaces without shadows. Keep navigation compact and high contrast.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Sparse, single-column hero with a large left-aligned editorial statement on the dark canvas. | Brand positioning, Mixed-type emphasis | Cambon display serif, White typography, Open dark canvas |
| 2 | other | Single-column introductory paragraph and text link, continuing on the same charcoal canvas. | Agency introduction, Learn-more link | Compact body copy, Text-only link, Generous separation |
| 3 | gallery | Full-bleed portfolio composition with two media elements in a broad grid. | Portfolio browsing, Case discovery | Large image frames, Dark surrounding canvas |
| 4 | gallery | Full-bleed, multi-column case-study composition with two media elements. | Portfolio browsing, Case discovery | Large image frames, Broad grid layout |
| 5 | feature-grid | Section heading above a full-width, ruled list of service names, descriptions, and indices. | Service overview, Scan by category | Indexed rows, Thin separators, Text links |
| 6 | other | A single-column explanatory statement with ample space around the text. | Brand rationale, Editorial reading | Small body text, Dark uninterrupted canvas |
| 7 | logo-cloud | Section title followed by a broad, five-column collection of client and partner marks. | Social proof, Client recognition | Logo grid, Unframed dark background |
| 8 | team | Team heading, multi-column portrait cards, a link to meet everyone, then editorial cards. | Meet the team, Editorial content discovery | Portrait grid, Role captions, Charcoal article cards |
| 9 | footer | Large closing statement, contact link, and compact legal, social, and editorial links. | Contact invitation, Secondary navigation | Mixed serif and sans-serif, Small footer links, Dark closing canvas |

## Source CSS custom properties (selected)

```css
--transition-background: #000;
--backdrop-background: rgba(0,0,0,0.5);
--backdrop-background-contrast: rgba(0,0,0,0.5);
--backdrop-hover-background-50: rgba(0,0,0,0.5);
--backdrop-hover-background-75: rgba(0,0,0,0.75);
```

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