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

# Grafik · Design System

> Expressive typography meets a quiet, image-led portfolio

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

Grafik presents its work through a restrained portfolio grid, with oversized orange typography setting the tone. A warm gray canvas, black navigation, and expansive white project panels let varied client imagery lead.

## North star

Let one oversized typographic gesture introduce a quiet, asymmetric portfolio where the work—not interface decoration—commands attention.

## Overview

Grafik’s portfolio pairs a warm gray page canvas (#dad9d5) with a narrow black navigation bar and white project-information panels. The hero’s oversized condensed headline in vivid orange (#ff4f00) overlays a monochrome photograph, creating the page’s clearest point of emphasis. Most interface text is black; white is used for project surfaces and reversed navigation text. A vivid violet (#6320ee) appears as a small floating circular control rather than a dominant brand field. Die Grotesk handles the compact body copy and navigation, while Founders Grotesk X Condensed gives the hero its tall, tightly stacked uppercase character. The long portfolio uses an asymmetric, image-led arrangement: project media occupies shifting grid positions while concise descriptions sit in a consistent white column. Thin black horizontal rules divide entries. The overall effect is deliberately flat and spacious, with striking typography and varied project imagery doing more work than decorative UI.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#000000` | `--color-studio-ink` | neutral | Black navigation bar, primary text, project captions, and thin horizontal dividers. |
| Warm Cement | `#dad9d5` | `--color-warm-cement` | brand | Main portfolio canvas and broad section backgrounds behind the project imagery. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Project-description panels, image surrounds, and reversed text on the black navigation. |
| Violet Signal | `#6320ee` | `--color-violet-signal` | accent | Small floating circular control; keep it isolated rather than using it for large areas. |
| Studio Orange | `#ff4f00` | `--color-studio-orange` | accent | Oversized orange hero headline; a rare typographic accent rather than a section background. |

### Semantic aliases

`--color-canvas` → `#dad9d5` (Warm Cement) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-accent` → `#6320ee` (Violet Signal) · `--color-accent-2` → `#ff4f00` (Studio Orange) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#dad9d5` | 14.87:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#ffffff` | `#dad9d5` | 1.41:1 | fail |
| `#6320ee` | `#dad9d5` | 5:1 | AA |
| `#6320ee` | `#ffffff` | 7.07:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Die Grotesk A Regular | `--font-body` | webfont | 700, 400 | Primary interface and project text, including body copy, buttons, and links. | Inter |
| Die Grotesk A Medium | `--font-die-grotesk-a-medium` | webfont | 700, 400 | Uppercase navigation labels and the Grafik wordmark treatment. | Inter |
| Founders Grotesk X Condensed Semibold | `--font-display` | webfont | 700 | Oversized display headline in the hero. | Roboto Condensed |

- **Die Grotesk A Regular:** Measured mostly bold for body and buttons; use compact, straightforward sentence case for copy.
- **Die Grotesk A Medium:** Medium-weight sans; navigation is uppercase, compact, and unembellished.
- **Founders Grotesk X Condensed Semibold:** Heavy, tall condensed uppercase, stacked tightly across multiple lines.

### Type scale — Custom (ratio ≈ 7.2, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 108px | 700 | 0.75 | 0 | uppercase | Founders Grotesk X Condensed Semibold | Oversized uppercase hero statement layered across the opening image. |
| body | 15px | 700 | 1.25 | 0 | — | Die Grotesk A Regular | Compact project descriptions and supporting portfolio text. |
| button | 15px | 700 | 1.25 | 0 | — | Die Grotesk A Regular | Short, bold labels on the small floating action control. |
| nav | 15px | 400 | 1.25 | 0 | uppercase | Die Grotesk A Medium | Uppercase menu label and compact navigation text. |
| link | 15px | 400 | 1.25 | 0 | — | Die Grotesk A Regular | Project names and concise linked portfolio labels. |

OpenType features in use: `"calt", "dlig", "liga", "ss03"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 12, 24, 180 px.
- Section rhythm 55px · element gap 12px · card padding — · max content width 1048px.

The page uses a comfortable, asymmetric portfolio grid, with project media spread across broad areas and descriptions aligned in a narrow white column. The measured page max width is 1048px. A full-width black navigation strip anchors the top; the hero sets a large photo against the gray canvas, then project entries continue as varied image arrangements. Thin horizontal rules mark transitions. Measured spacing uses a 4px base unit, 55px section gap, and 12px element gap; generous blank canvas keeps the dense media sequence from feeling crowded.

## Shape & elevation

- Radius: button `50%`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is essentially flat: measured shadows are absent and the dominant structure comes from canvas changes, white project panels, media blocks, and black hairline rules. Avoid floating cards or glossy effects. Keep the violet circular control as the exception, with its rounded silhouette clearly distinct from the square-edged portfolio layout.

## Imagery

Photography, video, and website mockups dominate the portfolio. The hero pairs a monochrome cycling image with orange type, while later projects mix architectural photography, portraits, brand objects, and screen-based work. Media is presented in varied rectangular crops and sizes, often with minimal framing. Treat project images as client work: preserve their own color and contrast rather than imposing a uniform filter.

## Components

### Top navigation

A narrow black full-width strip with the Grafik mark at left, centered uppercase MENU label, and a small utility icon at right; use white text.

### Hero statement

Large condensed uppercase orange copy overlaps a monochrome hero photograph and extends across the gray canvas.

### Project media grid

Asymmetric arrangement of rectangular client imagery, site mockups, and occasional video, with varied image sizes and open canvas between items.

### Project information panel

White text area paired with project media, containing a compact black project title, description, services, and date.

### Section divider

Thin black horizontal rule spanning the portfolio width to separate successive project entries.

### Floating action control

Small vivid-violet circular control placed over the portfolio canvas, with a simple white icon.

### Measured component styles

- **Primary button**: background #6320ee · text #ffffff · radius 50% · padding 0px · 400 15px Die Grotesk A Regular
- **Link** (“Impossible Toronto”): transparent background · text #ffffff · radius 0px · padding 0px · 400 15px Die Grotesk A Regular
- **Card**: background #ffffff · text #000000 · radius 0px · padding 0px · 400 15px Die Grotesk A Regular
- **Navigation item** (“GRAFIK® MENU”): transparent background · text #000000 · radius 0px · padding 0px · 400 15px Die Grotesk A Regular

## Do

- Use Warm Cement (#dad9d5) as the broad portfolio canvas.
- Reserve Studio Orange (#ff4f00) for a striking display-text moment.
- Keep the navigation black with white, uppercase labels.
- Arrange project media asymmetrically and let images retain their own treatment.
- Pair project imagery with compact white information panels.
- Separate project entries with thin black rules.
- Use generous open canvas around the media.

## Don't

- Do not turn the page into a uniform card grid.
- Do not use gradients or decorative shadows.
- Do not spread Violet Signal (#6320ee) across large surfaces.
- Do not recolor project images to create a false brand treatment.
- Do not use oversized body copy to compete with the hero.
- Do not add rounded corners to the main portfolio panels.
- Do not crowd the project descriptions with extra interface chrome.

## Agent prompt

Build a new digital-studio portfolio page in Grafik’s visual language. Use Warm Cement (#dad9d5) as the dominant canvas, Studio Ink (#000000) for the top navigation, copy, and divider rules, and Gallery White (#ffffff) for project-information panels. Set a compact black navigation strip with reversed white uppercase labels. Introduce the page with a large, tightly stacked condensed uppercase headline in Studio Orange (#ff4f00), layered across monochrome or restrained photography. Continue into an asymmetric, image-led project sequence: vary rectangular media placements and pair them with concise project details in white panels. Keep the layout open and flat, using thin black rules instead of shadows or card borders. Use Violet Signal (#6320ee) only for a small isolated circular control. Preserve each project image’s original character.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Full-width black strip with the wordmark left, menu centered, and a small utility icon right. | Persistent site navigation, Centered menu access | Black background, White uppercase labels, Minimal wordmark |
| 2 | gallery | Long asymmetric image-led portfolio on a warm gray canvas, with project details in white panels and rules dividing entries. | Sequential project browsing, Linked project entries, Mixed media showcase | Oversized orange hero type, Monochrome opening image, Asymmetric media grid, White detail panels, Thin black dividers |

## Source CSS custom properties (selected)

```css
--color-background: #fff;
--color-text: #000;
--color-border: #17171780;
--color-reverse: #fff;
--color-background-reverse: #000;
--color-text-reverse: #fff;
```

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