Holographik

# Holographik — Style Reference
> High-contrast monochrome blueprint

**Theme:** dark

Holographik uses a high-contrast, stark visual language built on an uncompromising black and white palette. Typography is large, bold, and tightly tracked for maximum impact, creating a sense of directness. Components are entirely UI-driven, with no decorative elements, relying on sharp edges and a single, extreme radius for interaction cues. The overall impression is one of confident, unornamented clarity.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Absolute Black | `#000000` | `--color-absolute-black` | Page backgrounds, primary text, foundational UI borders, critical information, hero section background |
| Pure White | `#ffffff` | `--color-pure-white` | Hairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color |
| Ash Gray | `#aaaaaa` | `--color-ash-gray` | Subtle background panels and sections; used for lower-prominence content areas |

## Tokens — Typography

### Helvetica Neue — Primary typeface for all content. Its consistent weight and tight letter-spacing across sizes contribute to the direct, industrial feel, serving for both prominent headings and body text. · `--font-helvetica-neue`
- **Substitute:** Arial
- **Weights:** 400
- **Sizes:** 16px, 26px
- **Line height:** 1.00, 1.25
- **Letter spacing:** -0.0200em at all sizes
- **Role:** Primary typeface for all content. Its consistent weight and tight letter-spacing across sizes contribute to the direct, industrial feel, serving for both prominent headings and body text.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body | 16px | 1.25 | — | `--text-body` |
| heading | 26px | 1 | -0.52px | `--text-heading` |

## Tokens — Spacing & Shapes

**Base unit:** 6px

**Density:** compact

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 5 | 5px | `--spacing-5` |
| 10 | 10px | `--spacing-10` |
| 24 | 24px | `--spacing-24` |
| 200 | 200px | `--spacing-200` |

### Border Radius

| Element | Value |
|---------|-------|
| other | 160px |
| buttons | 160px |

### Layout

- **Section gap:** 200px
- **Card padding:** 24px
- **Element gap:** 10px

## Components

### Navigation Link
**Role:** Top-bar navigation and footer links

Uses Pure White text (#ffffff) on Absolute Black (#000000) or vice versa, with no underline for a clean, direct appearance. Active states or hover effects are not visibly distinguished through color; interactions rely on inherent link behavior.

### Accent Bordered Element (Ghost/Outlined)
**Role:** Interactive elements, likely buttons/links

Defined by a 1px Pure White border (#ffffff) on a Pure White background, implying an outlined element against a dark canvas. Text color defaults to Absolute Black (#000000). Radii are extreme at 160px, creating a pill-like shape.

### Text Block
**Role:** Descriptive paragraphs and content sections

Body text in Helvetica Neue, weight 400, 16px, line-height 1.25. Text is Absolute Black (#000000) on Pure White (#ffffff) backgrounds or Pure White on Absolute Black backgrounds, maintaining high contrast. Padding is minimal at 24px.

### Hero Headline
**Role:** Main page headline

Large (26px) Helvetica Neue, weight 400, with tight line-height of 1.0 and -0.02em letter-spacing for visual density. Text color is Pure White (#ffffff) on Absolute Black (#000000).

## Do's and Don'ts

### Do
- Maintain a strict monochrome palette, leveraging Absolute Black (#000000) and Pure White (#ffffff) for primary contrast and Ash Gray (#aaaaaa) for subtle variations.
- Apply the extreme 160px border-radius to all interactive components and card-like elements to establish a distinct pill or circular visual cue.
- Use Helvetica Neue (or Arial as substitute) exclusively for all text, maintaining weight 400 and a consistent -0.0200em letter-spacing across all sizes.
- Utilize 200px for vertical section separation to ensure generous breathing room between content blocks.
- Prioritize high contrast pairings of #000000 text on #ffffff backgrounds or vice-versa for all content to maximize readability and visual impact.
- Employ 24px internal padding for card-like elements and similar content containers, with smaller 5px or 10px padding for tighter internal element spacing.

### Don't
- Avoid introducing any additional chromatic colors; limit the palette to black, white, and a single gray.
- Do not use subtle or moderate border radii, as the system mandates an extreme 160px radius for specific components.
- Do not vary font weights beyond 400 for Helvetica Neue; all typography should maintain its consistent visual weight.
- Do not introduce shadows or elevation effects; the design relies on flat, high-contrast surfaces.
- Avoid intricate layout grids or complex component architectures; maintain a direct, block-based composition.
- Do not use generic system link styles; links should be Pure White or Absolute Black text without explicit underlines unless contextualized.

## Imagery

This site features a heavy use of conceptual, abstract graphics composed of tightly cropped, monochromatic or desaturated photography combined with grid patterns and distorted typographic elements. Imagery often appears as overlapping, raw-edged layers without rounded corners, creating a visual collage effect. The role of imagery is primarily decorative atmosphere and brand expression, rather than explanatory content or product showcase. The density is image-heavy in the hero, becoming more text-dominant downwards. Icons are not a prominent feature, with the visual weight carried by the typographic and photographic elements.

## Layout

The page primarily uses a full-bleed layout on an Absolute Black background, creating a vast, immersive canvas. The hero section features large, layered graphic elements and bold typography, breaking traditional content structures. Content below the hero appears to be organized in stacked, high-contrast blocks, potentially alternating between full-bleed black and contained white sections. Vertical rhythm is established by significant section gaps (200px). The overall layout emphasizes density and visual impact in key areas, suggesting a minimal navigation structure (top-header links only). There's no evident constrained max-width for the main content.

## Agent Prompt Guide

Quick Color Reference:
text: #000000
background: #000000
border: #000000
accent: no distinct accent color
primary action: no distinct CTA color

Example Component Prompts:
1. Create a header bar: Absolute Black background (#000000), with 'HOLOGRAPHIK' in Pure White Helvetica Neue 26px, weight 400, line-height 1.0, and 'hello@holographik.co' and 'Instagram↗' as Pure White Helvetica Neue 16px, weight 400, line-height 1.25, both with -0.0200em letter-spacing.
2. Design a hero section with an Absolute Black background (#000000). Title the section 'HOLOGRAPHIK®' using Pure White #ffffff text, Helvetica Neue 26px, weight 400, line-height 1.0, with -0.0200em letter-spacing. Below it, add a descriptive paragraph: 'A DESIGN AND MOTION STUDIO WORKING WITH LIKE-MINDED VISIONARIES TO MAKE AN IMPACT ON THE INDUSTRY THROUGH A CLEAR AND EFFECTIVE VISUAL LANGUAGE.' in Pure White #ffffff text, Helvetica Neue 16px, weight 400, line-height 1.25, -0.0200em letter-spacing. Ensure ample padding of 24px and a 200px section gap before any subsequent content.
3. Create a conceptual grid element: Pure White background (#ffffff), featuring an internal grid pattern in Absolute Black (#000000), using the default element gap of 10px between grid lines. This element should have a 160px border-radius, giving it a soft, pill-shaped edge. Text content on this element should be Absolute Black (#000000) Helvetica Neue 16px, weight 400, line-height 1.25.

## Similar Brands

- **Acme Co.** — Stark black and white color scheme with large, impactful typography.
- **Büro. by Ben Mingo** — Monochrome palette, heavy typographic treatment, and abstract, layered visual elements.
- **Future Fonts** — Minimalist, type-focused approach with high contrast and limited color use.
- **AIGA (certain historical designs)** — Emphasis on typographic hierarchy and strong graphic design principles within a limited color scope.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-absolute-black: #000000;
  --color-pure-white: #ffffff;
  --color-ash-gray: #aaaaaa;

  /* Typography — Font Families */
  --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 16px;
  --leading-body: 1.25;
  --text-heading: 26px;
  --leading-heading: 1;
  --tracking-heading: -0.52px;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 6px;
  --spacing-5: 5px;
  --spacing-10: 10px;
  --spacing-24: 24px;
  --spacing-200: 200px;

  /* Layout */
  --section-gap: 200px;
  --card-padding: 24px;
  --element-gap: 10px;

  /* Border Radius */
  --radius-full: 160px;

  /* Named Radii */
  --radius-other: 160px;
  --radius-buttons: 160px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-absolute-black: #000000;
  --color-pure-white: #ffffff;
  --color-ash-gray: #aaaaaa;

  /* Typography */
  --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 16px;
  --leading-body: 1.25;
  --text-heading: 26px;
  --leading-heading: 1;
  --tracking-heading: -0.52px;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-10: 10px;
  --spacing-24: 24px;
  --spacing-200: 200px;

  /* Border Radius */
  --radius-full: 160px;
}
```