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

# Mike Matas · Design System

> Quiet typography lets the work take center stage.

**Theme:** light · **Industry:** portfolio · **Source:** https://mikematas.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 restrained personal portfolio pairs a compact name-and-year masthead with a wide showcase of digital product work. A white canvas, quiet gray links, and black typography keep attention on the work imagery.

## North star

Keep the portfolio shell nearly invisible so the showcased product work provides the page’s color and visual weight.

## Overview

The page uses a pure white canvas as an uninterrupted backdrop, with black reserved for the portfolio title and muted gray for the small navigation links. The measured palette contains no decorative brand accent; saturated greens, reds, and warm photographic tones are confined to the product interfaces pictured within the work. Lab Grotesque carries both the large, regular-weight name and the very light body text, creating a quiet typographic hierarchy without relying on display treatments. Content sits in a centered, constrained composition with broad open margins and generous vertical separation. The first view places a small identity block and stacked links above a large laptop image, accompanied by phone mockups to its right. The imagery is shown as crisp product documentation rather than framed cards. Keep surfaces flat and edges clean; let the scale and color within each project image supply contrast.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Full-page canvas and the open negative space around portfolio content. |
| Quiet Gray | `#999999` | `--color-quiet-gray` | neutral | Muted navigation links, including About, Twitter, and Instagram. |
| Portfolio Ink | `#000000` | `--color-portfolio-ink` | neutral | Name, year, headings, and primary text against the white canvas. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Portfolio Ink) · `--color-text-muted` → `#999999` (Quiet Gray)

### Contrast (WCAG 2.x)

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

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Lab Grotesque | `--font-body` | webfont | 100, 600, 400 | Identity heading, page text, and navigation | Inter |

- **Lab Grotesque:** Use regular weight for the 40px heading and very light weight for 18px body text; natural case and zero measured tracking.

### Type scale — Custom (ratio ≈ 2.222, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 400 | 1.2 | 0 | — | Lab Grotesque | The two-line name and year identity at the top of the page. |
| body | 18px | 100 | normal | 0 | — | Lab Grotesque | Light supporting text and understated navigation labels. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 1, 2, 9, 36 px.
- Section rhythm 263px · element gap — · card padding — · max content width 914px.

Use a centered portfolio composition with a measured maximum content width of 914px and a 12-column structural grid. Align the identity block to the left and a compact vertical link group to the right. The opening work image spans broadly below this header, with smaller device imagery alongside it. The page is intentionally sparse, with a measured section gap of 263px and a spacious overall density; preserve large areas of uninterrupted white rather than adding panels or filler.

## Shape & elevation

- No box shadows measured: the page is flat.

The measured design has no shadows, gradients, or card surfaces. Keep the page visually flat, with devices appearing as image assets rather than elevated interface panels. Do not introduce borders or decorative frames around the work; the device mockups themselves provide their own outlines and depth.

## Imagery

Show product work through large, crisp device mockups: a laptop displaying a plant-classification interface, paired with phone screens. Keep the images unframed against the page’s white canvas. Green foliage, interface colors, and photographic subjects belong to the project imagery, not the site’s core brand palette.

## Components

### Identity masthead

Left-aligned, two-line name and year in black Lab Grotesque; the measured h1 is 40px, regular weight, with a 1.2 line height.

### Social navigation

A short vertical stack of About, Twitter, and Instagram links set in quiet gray at the upper right of the content.

### Portfolio showcase

A broad, unframed work image leads with a laptop interface and companion phone mockups, arranged directly on the white canvas.

### Measured component styles

- **Primary button**: transparent background · text #000000 · radius 0px · padding 0px · 400 18px Arial

## Do

- Use pure white as the page canvas.
- Set identity text in black and navigation in muted gray.
- Keep the header small and aligned to opposite sides.
- Give project imagery generous breathing room.
- Show work as direct, unframed product imagery.
- Preserve a sparse, spacious page rhythm.

## Don't

- Do not add decorative brand colors to the site shell.
- Do not place work inside cards or bordered panels.
- Do not use shadows or gradients.
- Do not crowd the header with extra controls.
- Do not mistake colors inside project screenshots for site palette colors.
- Do not use heavy display type or all-caps styling.

## Agent prompt

Build a new portfolio page using the same quiet visual language. Set the canvas to Gallery White (#ffffff), use Portfolio Ink (#000000) for the identity and primary text, and Quiet Gray (#999999) for secondary links. Use Lab Grotesque or a close free sans-serif substitute, keeping headings regular and supporting text light. Constrain the content to a centered composition with broad margins and generous vertical pauses. Place a compact identity block opposite a simple stacked navigation, then let large product imagery dominate the page without card backgrounds, borders, or shadows. Keep colors visible inside project screenshots true to those assets; do not promote them into the page’s brand palette. Favor clean alignment, natural case, and open whitespace over decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | product-showcase | Centered, spacious composition with a left-aligned identity, right-side stacked links, and wide device imagery below. | Portfolio navigation, Visual project browsing | Minimal masthead, Muted text links, Unframed device mockups |

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