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

# Hyper Tria · Design System

> Bold editorial typography meets immersive brand imagery

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

Hyper Tria presents its branding work through a restrained editorial canvas, oversized typography, and immersive campaign imagery. A vivid green contact band and black footer punctuate the mostly white portfolio flow.

## North star

Use a quiet white-and-black editorial framework to make oversized type, project imagery, and a single green contact moment feel unmistakable.

## Overview

The page balances a mostly white canvas and black typography with striking, full-bleed project photography. The measured greens—#409b3f and #0fa64b—act as vivid brand punctuation, most clearly in the contact band; other saturated hues in the screenshots belong to project imagery rather than the core interface palette. Aeonik Regular carries the identity across large, tightly tracked display headlines and calm supporting copy. Portfolio stories alternate generous white space, sparse text, and prominent images, creating an editorial rhythm rather than a dense agency directory. The opening is an immersive video or image-led hero with navigation laid directly over it. Project compositions vary in alignment and scale, while the oversized “CONTACT US” treatment turns the transition to the footer into a clear call to action. Keep surfaces flat and corners square; let photography, scale, and whitespace provide the drama.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas for the portfolio, navigation areas, and open space around project stories. |
| Ink Black | `#000000` | `--color-ink-black` | neutral | Headlines, body copy, links, inverse footer surface, and high-contrast marks. |
| Studio Green | `#409b3f` | `--color-studio-green` | accent | Measured green section band behind the repeated contact call to action. |
| Signal Green | `#0fa64b` | `--color-signal-green` | accent | Secondary measured brand accent; use sparingly, not as a general page background. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Ink Black) · `--color-text` → `#000000` (Ink Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-accent` → `#409b3f` (Studio Green) · `--color-accent-2` → `#0fa64b` (Signal Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#409b3f` | `#ffffff` | 3.51:1 | AA-large |
| `#409b3f` | `#000000` | 5.98:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Aeonik Regular | `--font-body` | webfont | 400, 300, 500 | Display headlines, project titles, navigation, and supporting text throughout the page. | DM Sans |

- **Aeonik Regular:** Use light weights for tight oversized headlines, regular for copy, and medium for smaller headings; keep casing mixed.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 90px | 400 | 1 | 0 | — | Aeonik Regular | Oversized statements and prominent contact display text. |
| h1 | 75px | 300 | 0.9 | -0.053em | — | Aeonik Regular | Primary project or portfolio headline. |
| h2 | 35px | 400 | 1.11 | 0.01em | — | Aeonik Regular | Project section heading or supporting statement. |
| h3 | 30px | 500 | 1 | 0 | — | Aeonik Regular | Compact project and content headings. |
| h4 | 27px | 400 | 1.48 | -0.02em | — | Aeonik Regular | Secondary explanatory headings. |
| body | 20px | 400 | 1.45 | -0.01em | — | Aeonik Regular | Agency description and project supporting copy. |
| caption | 13px | 400 | 2.23 | 0.02em | — | Aeonik Regular | Small project labels, metadata, and footer details. |
| nav | 27px | 400 | 1.48 | -0.02em | — | Aeonik Regular | Top-level navigation and menu labels. |
| link | 90px | 400 | 1 | 0 | — | Aeonik Regular | Large contact link or prominent project link. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 2, 5, 8, 9, 10, 15, 20, 23, 25, 26, 28, 42, 44, 45, 50, 59 px.
- Section rhythm 100px · element gap — · card padding — · max content width 1148px.

The page uses a spacious, predominantly single-column portfolio flow within a measured maximum width of 1148px, interrupted by full-bleed media. Project content alternates image and text placement rather than repeating a rigid card grid. Large left-aligned headlines and open white areas keep each case study distinct. The contact band spans the content width, followed by a compact, two-column black footer. Maintain generous section separation and low information density; use the measured spacing scale without adding unmeasured dimensions.

## Shape & elevation

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

The interface reads as flat: the measured data reports no shadows, gradients, or radius scale. White project sections sit directly on the canvas, with imagery providing depth and visual contrast. Keep edges square and use the green band and black footer as clear color blocks rather than raised cards.

## Imagery

Large campaign photography and video lead the experience, including a full-viewport opening image and broad project imagery. Project visuals retain their own art direction, color, and product treatment; do not mistake their oranges, greens, or other saturated colors for interface tokens. Frame images boldly, often at large scale, and pair them with minimal project naming and directional arrow marks.

## Components

### Overlay navigation

Place the Hyper Tria wordmark and compact links over the immersive opening media; use dark type where the image allows.

### Project feature

Pair a prominent project image with a short label and oversized black headline on white, varying image and text alignment.

### Project arrow link

Use a thin, minimal directional arrow beside project copy as a restrained cue to explore the case study.

### Contact band

Set a repeated, oversized contact phrase on the measured #409b3f green strip, creating a high-contrast transition.

### Inverse footer

Use a black footer with white agency description, compact social and legal links, and a prominent brand mark.

### Measured component styles

- **Link** (“Your Breakfast Box AN OUT OF THE BOX CON”): transparent background · text #000000 · radius 0px · padding 0px · 400 30px -apple-system
- **Navigation item** (“Hyper Branding Agency Works Contact Blog”): transparent background · text #666666 · radius 0px · padding 0px · 400 14px -apple-system

## Do

- Keep the main canvas white and the type predominantly black.
- Let full-bleed campaign imagery lead the opening and selected portfolio moments.
- Use oversized Aeonik-style headlines with tight tracking.
- Alternate project image and text placement to create editorial rhythm.
- Reserve #409b3f for a distinct contact moment.
- Preserve generous whitespace around project labels and headlines.

## Don't

- Do not turn the portfolio into a dense, uniform card grid.
- Do not use illustration colors as interface palette tokens.
- Do not add gradients, shadows, or rounded card treatments.
- Do not make every section a full-bleed image.
- Do not compete with project artwork using extra interface accents.
- Do not shrink the contact call to action into a conventional button.

## Agent prompt

Build a new creative-agency page in Hyper Tria’s editorial portfolio style. Use Gallery White (#ffffff) as the main canvas and Ink Black (#000000) for typography and the inverse footer. Keep Studio Green (#409b3f) as a restrained, prominent contact-band accent; treat Signal Green (#0fa64b) as secondary, not a general surface. Use Aeonik Regular or a close sans-serif substitute such as DM Sans, pairing oversized tightly tracked headlines with clean supporting copy. Start with immersive, full-bleed campaign media and understated overlay navigation. Structure the work as spacious, asymmetric project features with large images, short labels, and minimal arrow links. Finish with a bold contact moment and compact black footer. Keep surfaces flat, corners square, and whitespace generous; let the imagery supply its own colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-viewport media with navigation overlaid near the top. | immersive media, persistent brand navigation | full-bleed video, dark overlay text, compact nav |
| 2 | gallery | Spacious white portfolio flow with large images and left-aligned project headings. | project exploration links, alternating content emphasis | oversized black headlines, project labels, minimal arrow marks |
| 3 | cta | Full-width green band with a repeated oversized contact phrase. | high-visibility contact link, repeating marquee-style text | #409b3f background, large black type, inline arrow motif |
| 4 | footer | Black, two-column footer with agency description, links, and logo. | social navigation, legal links | white copy, compact metadata, prominent brand mark |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
```

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