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

# Vucko · Design System

> Quiet canvas, expressive motion work

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

Vucko’s homepage pairs a restrained neutral interface with large, colorful motion-design project imagery. Spacious editorial framing and compact project and article cards present the studio’s work without competing with it.

## North star

Keep the interface quiet and spacious so the featured motion work carries the visual impact.

## Overview

The page uses a light grey canvas (#eeeeee) as its continuous backdrop, with near-black (#080808) for the logo, headlines, navigation, and most copy. Off-white (#fdfdfc) panels distinguish project links, article cards, and utility modules; muted grey (#646464) handles secondary labels and inactive navigation. Suisse Int'l is used throughout in a clean sans-serif voice, with larger, plainly set introductory and navigation text balanced by compact captions and card metadata. The desktop composition is asymmetric: a small brand mark and two introductory text blocks sit across the top, while a large featured project image dominates the main column and a narrow stack of controls and project links occupies the right. Below, three editorial cards form a compact row, followed by a sparse footer. Generous gaps keep the interface calm; rounded modules and image corners soften the grid. Colourful artwork and photography supply the main visual contrast, rather than interface accents.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#080808` | `--color-studio-ink` | neutral | Logo, primary headings, navigation, project titles, and the dark Article badge. |
| Soft Canvas | `#eeeeee` | `--color-soft-canvas` | brand | Continuous page background and selected utility or navigation surfaces. |
| Warm Paper | `#fdfdfc` | `--color-warm-paper` | surface | Project and article card surfaces, pale utility panels, and light text on dark badges. |
| Quiet Grey | `#646464` | `--color-quiet-grey` | semantic | Secondary copy, metadata, and inactive navigation labels. |

### Semantic aliases

`--color-canvas` → `#eeeeee` (Soft Canvas) · `--color-surface` → `#fdfdfc` (Warm Paper) · `--color-text` → `#080808` (Studio Ink) · `--color-text-muted` → `#646464` (Quiet Grey) · `--color-text-subtle` → `#fdfdfc` (Warm Paper)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#080808` | `#eeeeee` | 17.26:1 | AAA |
| `#080808` | `#fdfdfc` | 19.68:1 | AAA |
| `#646464` | `#eeeeee` | 5.1:1 | AA |
| `#646464` | `#fdfdfc` | 5.81:1 | AA |
| `#fdfdfc` | `#eeeeee` | 1.14:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Suisse Int'l | `--font-body` | webfont | 450, 400 | The sole site-wide typeface for introductions, navigation, card text, captions, and controls. | Inter |

- **Suisse Int'l:** Use the measured regular and 450 weights; keep tracking neutral and casing mostly natural, with compact captions.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 20px | 450 | 1.2 | 0 | — | Suisse Int'l | Introductory studio statement at the top of the homepage. |
| body | 16px | 400 | 1.5 | 0 | — | Suisse Int'l | Studio description and supporting project or article copy. |
| caption | 11px | 450 | 1.2 | 0 | — | Suisse Int'l | Compact project labels, source badges, and card metadata. |
| button | 13px | 450 | 1.2 | 0 | — | Suisse Int'l | Small utility and action labels, including cookie preferences. |
| nav | 20px | 450 | 1.2 | 0 | — | Suisse Int'l | Prominent home and page navigation links. |
| link | 20px | 450 | 1.2 | 0 | — | Suisse Int'l | Project links and calls to view more work. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 4, 8, 10, 11, 16, 20, 24, 32 px.
- Section rhythm 128px · element gap 8px · card padding — · max content width —.

Use a broad desktop composition with a small brand mark and two text blocks aligned across the top. Below, give most of the width to one featured project and reserve a narrow right rail for a motion widget, navigation controls, and stacked project links. Follow the feature with three evenly sized article cards, then a sparse footer. The measured page is spacious; preserve large section pauses and clear alignment rather than inventing a fixed maximum width.

## Shape & elevation

- Radius: button `20px` · card `20px` · nav `16px` · link `20px` · xs `1px` · sm `16px` · md `20px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s cubic-bezier(0.14, 1, 0.34, 1)` on interactive elements.

The interface reads as mostly flat, without measured shadows. Separate cards and controls with changes between the grey canvas and off-white surfaces, plus rounded corners on prominent modules. Allow image content to provide its own depth and contrast; avoid adding decorative borders or extra shadow treatments.

## Imagery

Lead with a large photographic project presentation showing a designed motion identity in an urban display setting. Supporting project thumbnails and article covers bring contrasting graphic compositions, typography, and bright colors. A small motion-oriented module in the right rail reinforces the studio’s specialty. Treat artwork as embedded project content: it supplies color and visual energy while the surrounding interface stays neutral.

## Components

### Introductory header

A compact brand mark sits alongside a short, larger studio statement and a denser explanatory paragraph on the grey canvas.

### Featured project

A wide rounded image panel dominates the main column, with a translucent-looking text overlay visible over the lower image area.

### Right utility rail

A narrow stack combines a circular time-and-place graphic, pill-like navigation controls, a new-business contact link, and a showcase thumbnail.

### Project links

Off-white rounded rows pair compact title and client metadata with small dark image or logo previews.

### Article cards

Three off-white cards use a compact source or category label, a text headline, and a large editorial cover image.

### Footer

A spacious closing area aligns a brief studio statement, navigation and social links, then small legal and back-to-top links.

### Measured component styles

- **Primary button** (“Cookie preferences”): transparent background · text #080808 · radius 0px · padding 0px · 450 13.0004px Suisse Int'l
- **Link** (“Next 2026 Google”): transparent background · text #080808 · radius 20.0006px · padding 0px · 400 16.0005px Suisse Int'l
- **Card** (“Article commarts.com Communication Arts:”): background #fdfdfc · text #080808 · radius 20.0006px · padding 0px · 400 16.0005px Suisse Int'l
- **Badge** (“Article”): background #080808 · text #fdfdfc · radius 0px · padding 8px 10px · 450 11.0003px Suisse Int'l
- **Navigation item** (“Work”): background #eeeeee · text #646464 · radius 16.0005px · padding 0px 20px · 450 11.0003px Suisse Int'l

## Do

- Keep the page canvas consistently #eeeeee.
- Use #080808 for primary text and brand marks.
- Reserve #fdfdfc for cards and pale utility panels.
- Use #646464 for secondary labels and inactive links.
- Let project imagery provide the strongest color.
- Preserve the asymmetric main-column and right-rail composition.
- Use rounded image and card containers sparingly.

## Don't

- Do not introduce unmeasured interface colors.
- Do not make every panel equally prominent.
- Do not crowd the header or footer.
- Do not replace project imagery with generic decoration.
- Do not add heavy borders or prominent shadows.
- Do not apply oversized display typography across the page.

## Agent prompt

Build a new creative-studio page in Vucko’s restrained portfolio style. Use Soft Canvas (#eeeeee) across the page, Studio Ink (#080808) for primary copy and navigation, Warm Paper (#fdfdfc) for card and utility surfaces, and Quiet Grey (#646464) for secondary labels. Set all text in a clean Suisse Int'l-like sans serif with natural casing and restrained weights. Create an asymmetrical desktop layout: a concise intro across the top, a large featured work area, and a narrow utility rail with stacked project links. Follow with a row of editorial image cards and a sparse footer. Keep generous breathing room, use rounded media and surfaces, and make vivid imagery—not interface decoration—the source of contrast. Avoid invented accent colors, heavy shadows, or dense ornament.

## Source CSS custom properties (selected)

```css
--spacing-gutter: calc(.25rem * 8);
--color-bg: #fdfdfc;
--color-bg-alt: #eee;
--color-text: #080808;
--color-text-muted: #646464;
--color-border: #efefef;
--color-accent: #fd4040;
--color-overlay: #08080880;
--color-shadow: #59595933;
--color-shadow-idle: #59595900;
--default-color: #1a1a1a;
--default-bg: #f0f0f099;
--default-text: #1a1a1a;
--default-text-secondary: #6b6b6b;
--default-root-border: 1px solid #0a0a0a1a;
--default-border: 1px solid #0003;
--cc-modal-border-radius: .5rem;
--cc-btn-border-radius: .4rem;
--cc-modal-transition-duration: .25s;
--cc-link-color: #30363c;
--cc-bg: #fff;
--cc-primary-color: #2c2f31;
--cc-secondary-color: #5e6266;
--cc-btn-primary-bg: #30363c;
--cc-btn-primary-color: #fff;
--cc-btn-primary-border-color: #30363c;
--cc-btn-primary-hover-bg: #000;
--cc-btn-primary-hover-color: #fff;
--cc-btn-primary-hover-border-color: #000;
--cc-btn-secondary-bg: #eaeff2;
--cc-btn-secondary-color: #2c2f31;
--cc-btn-secondary-border-color: #eaeff2;
--cc-btn-secondary-hover-bg: #d4dae0;
--cc-btn-secondary-hover-color: #000;
--cc-btn-secondary-hover-border-color: #d4dae0;
--cc-separator-border-color: #f0f4f7;
--cc-toggle-on-bg: #30363c;
--cc-toggle-off-bg: #667481;
--cc-toggle-on-knob-bg: #fff;
--cc-toggle-off-knob-bg: #fff;
```

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