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

# Thomas Vimare · Design System

> Quiet monochrome framing for vivid creative work

**Theme:** dark · **Industry:** portfolio · **Source:** https://thms.works/ · **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 dark, minimal portfolio presents Thomas Vimare’s design work in a spacious, image-led project grid. Restrained typography and subdued navigation keep attention on the colorful project imagery.

## North star

Keep the interface nearly monochrome and let the project images provide the page’s color and visual variety.

## Overview

The page uses a black canvas as a continuous frame, with white text for primary content and muted gray for secondary labels and navigation details. A near-black media surface gives selected archive imagery a subtle lift without introducing decorative card treatments. Helvetica Now Display Light creates a fine, understated typographic voice: large introductory copy reads like an editorial statement, while project names and captions stay small and quiet. The main work area is a two-column gallery of broad rectangular images, with consistent alignment and clear breathing room between rows. Project artwork supplies almost all saturated color, so the surrounding interface stays neutral and does not compete. The archive continues the same dark language, including a prominent oversized title tile and simpler portfolio-link tiles. Overall, the design relies on scale, whitespace, image variety, and restrained contrast rather than shadows, ornament, or bright interface accents.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Black | `#000000` | `--color-canvas-black` | brand | Continuous page background behind navigation, introduction, project gallery, and footer. |
| Quiet Gray | `#9a9a9a` | `--color-quiet-gray` | neutral | Muted headings and secondary copy, including subdued navigation and project captions. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Primary headings and text, links, and fine white borders. |
| Media Charcoal | `#171717` | `--color-media-charcoal` | surface | Subtle dark surface visible behind media and archive tiles; not a general card fill. |

### Semantic aliases

`--color-canvas` → `#000000` (Canvas Black) · `--color-surface` → `#171717` (Media Charcoal) · `--color-text` → `#ffffff` (Paper White) · `--color-text-muted` → `#9a9a9a` (Quiet Gray) · `--color-border` → `#ffffff` (Paper White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#171717` | 17.93:1 | AAA |
| `#9a9a9a` | `#000000` | 7.46:1 | AAA |
| `#9a9a9a` | `#171717` | 6.37:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| HelveticaNowDisplay-Light | `--font-body` | webfont | 400 | Navigation, introductory display copy, headings, project names, captions, and links. | Inter |

- **HelveticaNowDisplay-Light:** Use a light sans-serif voice with tight, slightly negative tracking; sentence case and restrained weights.

### Type scale — Perfect Fourth (ratio ≈ 1.294, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 400 | 1.2 | -0.003em | — | HelveticaNowDisplay-Light | Large introductory statement above the selected-project gallery. |
| h1 | 32px | 400 | 1.5 | -0.005em | — | HelveticaNowDisplay-Light | Primary page or section headings, including archive content. |
| h2 | 28px | 400 | 1.4 | -0.006em | — | HelveticaNowDisplay-Light | Secondary section headings and larger project-related titles. |
| h3 | 24px | 400 | 1 | -0.007em | — | HelveticaNowDisplay-Light | Compact headings for individual content blocks or project items. |
| body | 20px | 400 | 1.4 | -0.008em | — | HelveticaNowDisplay-Light | Introductory and descriptive text accompanying portfolio content. |
| link | 20px | 400 | 1.2 | -0.008em | — | HelveticaNowDisplay-Light | Navigation and text links such as Biography and Instagram. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 5, 10, 20, 48, 60, 120, 160 px.
- Section rhythm 60px · element gap — · card padding — · max content width 1320px.

The page follows a centered portfolio canvas with a measured maximum width of 1320px. The top navigation sits on one horizontal line, followed by a left-aligned introductory statement and a two-column project gallery. Project imagery forms broad, consistent rectangles with captions beneath. Sections retain a comfortable rhythm, with a measured 60px section gap and generous whitespace around the opening statement and archive. Keep the overall density low; align titles, images, and captions consistently rather than adding decorative modules.

## Shape & elevation

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

The page is fundamentally flat: no measured shadows, gradients, or rounded-card system. The black canvas separates content through whitespace, while occasional near-black media surfaces add slight tonal distinction. White borders are present in the measured palette but do not define a pervasive boxed-card interface; avoid invented elevation or ornamental layering.

## Imagery

Use large rectangular project images as the main visual content. The gallery mixes campaign photography, product interfaces, identity work, and colorful motion or illustrative artwork; the screenshots show varied project-specific color rather than a unified image filter. Keep images crisp, naturally framed, and paired with quiet text captions. Archive tiles use simpler graphic treatments against dark surfaces.

## Components

### Top navigation

Single horizontal row of text links on black; active Work is underlined, while other links stay subdued and the designer name sits at the far right.

### Intro statement

Large, light-weight, left-aligned text introduces the designer and current work, followed by a muted Selected projects cue.

### Project gallery

Two-column layout of large rectangular project images, each followed by a compact title and subdued descriptive caption.

### Archive feature tile

A large dark media tile featuring an oversized Archives title and a small date label within the artwork.

### Archive links

Simple image-led tiles for Dribbble and Behance, with restrained labels and supporting text below.

### Footer links

Compact version and update details align opposite a short row of social and publishing links.

### Measured component styles

- **Link** (“Instagram”): transparent background · text #ffffff · radius 0px · padding 0px · 400 20px HelveticaNowDisplay-Light

## Do

- Use black as the uninterrupted page canvas.
- Keep primary interface text white and secondary text muted gray.
- Let project artwork carry saturated color.
- Align gallery images and captions to a consistent two-column grid.
- Use light, tightly tracked sans-serif typography.
- Preserve generous whitespace between the introduction and gallery.

## Don't

- Don’t add colorful interface accents absent from the measured palette.
- Don’t place every project inside a bordered or rounded card.
- Don’t add shadows or gradients to create artificial depth.
- Don’t let captions compete with the project imagery.
- Don’t replace the calm layout with dense dashboards or stacked panels.
- Don’t apply a uniform color filter to varied project artwork.

## Agent prompt

Build a new designer-portfolio page in Thomas Vimare’s restrained visual style. Use Canvas Black (#000000) as the page background, Paper White (#ffffff) for primary text and links, Quiet Gray (#9a9a9a) for secondary labels, and Media Charcoal (#171717) only where a subtle media surface is useful. Use a light, clean sans-serif close to Helvetica Now Display Light, with tight tracking and quiet sentence-case labels. Create a simple horizontal text navigation, a left-aligned editorial introduction, and an image-led two-column gallery with consistent rectangular crops and captions beneath. Let project imagery provide the color; keep the interface neutral. Use generous whitespace, measured alignment, and flat surfaces. Avoid shadows, gradients, rounded cards, bright UI accents, and decorative framing.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned introductory statement above a two-column project gallery on a black canvas. | Text navigation, Selected-projects cue, Image-led browsing | Light display typography, Muted supporting text, Rectangular project thumbnails, Two-column grid |
| 2 | gallery | Dark archive feature tile followed by paired portfolio-link tiles and a compact footer. | Archive discovery, External portfolio links, Social links | Oversized archive title, Dark media surface, Simple image tiles, Low-key footer |

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