---
name: Notreal Tv
description: "A prime example of a high-end agency portfolio that uses typography and layout to convey prestige without relying on excessive decoration."
version: alpha

colors:
  background: "#f2f2f2"
  primary: "#292a2c"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 80px
    lineHeight: 0.9
    fontWeight: 400
    letterSpacing: "-2px"
  h2:
    fontFamily: geometric-sans
    fontSize: 25px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 18px
    lineHeight: 1.67
    fontWeight: 400
    letterSpacing: "0.5px"

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

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

---

## Overview

An independent creative house combining craft, storytelling, and technology for global brands.

*A curated gallery of a high-end creative studio.*

## Colors

Minimal, high-contrast canvas where the portfolio imagery provides the color.

- **Background (`#f2f2f2`)** — uses `bg` token
- **Primary text (`#292a2c`)** — uses `ink` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** geometric-sans

- Use the transitional serif for the main logo and artistic accents.
- Use the geometric sans for all navigation, descriptions, and body text.

## Layout

Asymmetrical, grid-based layout with large, prominent media blocks and concise, left-aligned text captions.

*Rhythm:* Spacious and airy, with large margins between portfolio items and generous padding around text blocks.

## Elevation & Depth

- 0px 0px 5px 0px rgb(128, 128, 128)
- Borders: Minimal, occasionally a 2px solid black for subtle structural divisions.

## Shapes

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

## Components

- **button:** Simple text links for navigation.
- **card:** Full-width or half-width media blocks with captions directly below.
- **hero:** Massive serif logo on the left, descriptive text on the right, and a large featured portfolio image below.

## Do's and Don'ts

**Don't:**
- Don't use rounded corners — screenshot shows sharp, square edges.
- Don't use bright, saturated UI colors — screenshot shows a neutral, off-white background.
- Don't use sans-serif for the main logo — screenshot shows a transitional serif.
- Don't clutter the layout — screenshot shows a very clean, airy grid with plenty of whitespace.
- Don't use drop shadows on primary elements — screenshot shows flat imagery with only minimal, subtle shadows on specific elements.
- Don't use all-caps for body text — screenshot shows sentence case or title case.

---

## System Prompt (paste into AI agent)

```
This is the design DNA for NotReal, an independent creative house. The site features a clean, editorial layout on an off-white (#f2f2f2) background with deep charcoal (#292a2c) text. Typography contrasts a refined transitional serif for the logo and accents with a clean geometric sans-serif for navigation and descriptions. The layout is grid-based but asymmetrical, giving significant visual weight to large, high-quality portfolio images. Critical design constraints: Do not use rounded corners or bright UI colors; the aesthetic is sharp, flat, and professional. Do not clutter the interface; ample whitespace is a core feature. Do not use sans-serif for the main 'NotReal' brand mark; it must remain a serif.
```