---
name: Holographik
description: "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."
version: alpha

colors:
  background: "#F5F5F5"
  primary: "#111111"
  tertiary: "#66CCFF"
  neutral: "#999999"
  bg-soft: "#FFFFFF"
  line: "rgba(17, 17, 17, 0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 120px
    lineHeight: 0.95
    fontWeight: 700
    letterSpacing: "-2px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 160px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Strategy-led design studio creating brands and visual systems.

*A high-end design studio with a bold, clean aesthetic*

## Colors

High contrast with a clean, neutral backdrop.

- **Background (`#F5F5F5`)** — uses `bg` token
- **Primary text (`#111111`)** — uses `ink` token
- **Accent (`#66CCFF`)** — uses `accent` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(17, 17, 17, 0.1)`)** — uses `line` token

## Typography

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

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

## Layout

Full-bleed hero with bottom-aligned massive typography.

*Rhythm:* Standard 4px base grid.

## Elevation & Depth

- Borders: Minimal to none.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 160px

## Components

- **button:** Minimal, likely pill-shaped with high contrast.
- **card:** None visible.
- **chip:** None visible.
- **input:** None visible.
- **hero:** Full-viewport with a 3D abstract object and massive overlaid text.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```