# Holographik · Design system migration spec

> Source: https://www.holographik.co  ·  Curated by OpenDesign  ·  en

> The site is a prime example of using massive typography and 3D imagery to create a high-impact, premium brand presence for a design studio.

## 1. Identity DNA

The Holographik identity is built on the principle of strategic clarity, like a masterplan for a high-end studio space where every element is placed with deliberate intent. Its design language is a visual system where boldness and restraint are not opposites, but partners in defining a premium creative presence.

**One-liner:** Strategy-led design studio creating brands and visual systems.
**Keywords:** Strategy-led · Visual Systems · Digital Products · Branding
**Analogy:** A high-end design studio with a bold, clean aesthetic

## 2. Color

The palette operates with the precision of a curated art collection, built on a foundation of stark, high-contrast values. A neutral backdrop of light gray provides the canvas for assertive black ink and a single, vibrant light blue accent that acts as a precise focal point.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F5F5F5` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--ink` | `#111111` | body text |
| `--muted` | `#999999` | placeholder |
| `--accent` | `#66CCFF` | single accent |
| `--line` | `rgba(17, 17, 17, 0.1)` | divider |

**Color principle:** High contrast with a clean, neutral backdrop.

The guiding principle is extreme restraint; color is used as a strategic signal, not a decorative element.

## 3. Typography

Typographic voice is defined by scale and geometric certainty, with the primary display text set in all-caps. The system creates hierarchy through dramatic contrast between the massive, architectural headings and the supporting body text.

- **Display:** geometric-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 0.95 | 700 | -2px | Hero Typography |
| body | 16px | 1.4 | 400 | 0px | Body Text |

**Type rules:**
- All-caps for the primary display text.
- Geometric sans-serif for headings.
- High contrast between display and body text sizes.

## 4. Spacing

The spatial rhythm is founded on a standard 4px base grid, providing an invisible structural order beneath the expressive surface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base grid.

## 5. Surfaces

Surfaces are treated with architectural minimalism, relying on proportion and contrast rather than applied decoration. The approach avoids shadows and borders, letting content and typography define the plane.

- **Radius:** sm 0px · md 0px · lg 0px · pill 160px
- **Borders:** Minimal to none.

## 6. Layout

The layout skeleton is built around a full-viewport hero, where massive typography is anchored to the bottom of the frame. This creates a dynamic tension between the graphic text and the three-dimensional object it overlaps.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed hero with bottom-aligned massive typography.

## 7. Motion & Interaction

Motion philosophy favors subtlety and purpose over flourish, using consistent, short-duration transitions for interactive feedback. The central 3D element likely exists in a state of slow, continuous drift, providing a hypnotic, ambient counterpoint to the static text.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle hover transitions on links.
  - 3D object likely has a slow, looping rotation or drift.

- **Hover:** Color transition on links.
- **Click:** Minimal feedback.
- **Transition:** All properties transition over 0.2s.
- **Keyboard:** Standard focus states.

## 8. Voice & Don'ts

The editorial voice is confident and direct, matching the visual boldness with professional, no-nonsense clarity. The headline style is integral to the composition, treated as a graphic element that merges with the imagery.

- **Tone:** Confident, professional, and bold.
- **Headline style:** All-caps, massive, and integrated with 3D imagery.
- **CTA style:** Minimalist, likely a simple link or pill button.
- **Avoid:** Clichéd corporate jargon / Overly complex navigation

### Don'ts
- ❌ Don't use small, timid typography — the screenshot shows massive, bold display text.
- ❌ Don't use a busy or dark background — the screenshot shows a clean, light gray background.
- ❌ Don't use many different colors — the screenshot shows a very limited palette of black, white, light gray, and a single light blue accent.
- ❌ Don't use rounded corners on primary elements — the screenshot shows sharp edges or pill shapes only.
- ❌ Don't use a complex navigation menu — the screenshot shows only two text links in the top right.
- ❌ Don't use subtle, low-contrast typography — the screenshot shows high-contrast, black-on-light-gray text.

The system deliberately rejects visual noise, complex navigation, and timid scale to maintain its focused, strategic impact.

## System Prompt (paste into AI tool)

```
This is a bold, high-end design studio website. It features massive, all-caps geometric sans-serif typography (using Helvetica Neue) as the primary design element, often interacting with 3D abstract objects. The color palette is extremely restrained, primarily using light gray (#F5F5F5), black (#111111), and a single light blue accent (#66CCFF). The layout is clean and full-bleed. Critical don'ts: Don't use small, timid typography — the hero text is massive. Don't use a busy background — keep it clean and light. Don't use many colors — stick to a monochrome-plus-one-accent palette.
```