---
name: Look Inc
description: "Worth including as a masterclass in how a restrictive, monochrome palette and editorial typography can elevate a standard agency portfolio into a premium brand experience."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#000000D9"
  line: "rgba(0, 0, 0, 0.85)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  h2:
    fontFamily: transitional-serif
    fontSize: 38px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0px"
  body:
    fontFamily: transitional-serif
    fontSize: 20px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: transitional-serif
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

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

A non-traditional agency with journalism roots offering an independent creative look.

*A high-end fashion or culture magazine layout for an agency portfolio.*

## Colors

High-contrast monochrome that prioritizes the photography of the portfolio pieces.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#000000D9`)** — uses `ink-soft` token
- **Borders (`rgba(0, 0, 0, 0.85)`)** — uses `line` token

## Typography

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

- Use a transitional serif for main narrative text to evoke a journalistic feel.
- Use a bold geometric sans for case study titles to provide contrast.
- Keep font weights mostly regular (400) for a sophisticated, editorial tone.

## Layout

A grid-based portfolio layout with asymmetric column spanning for featured works.

*Rhythm:* Generous vertical padding creates a relaxed, editorial rhythm between content blocks.

## Elevation & Depth

- Borders: Thin, sharp horizontal lines (1px solid rgba(0,0,0,0.85)) separate sections and grid items.

## Shapes

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

## Components

- **button:** Text-only links with a simple underline on hover.
- **card:** Minimalist project cards defined by the image and typography rather than visible containers.
- **chip:** None visible; relies on text hierarchy.
- **input:** None visible; purely a portfolio showcase.
- **hero:** A two-column editorial layout with a large typographic treatment and a concise brand statement.

## Do's and Don'ts

**Don't:**
- Don't use heavy drop shadows or blurred backgrounds — screenshot shows flat, crisp image presentations.
- Don't use bright, saturated neon accent colors — screenshot shows a strict monochrome palette with images providing color.
- Don't use a bubbly or rounded UI — screenshot shows sharp corners and straight, thin divider lines.
- Don't use playful, script, or decorative fonts — screenshot shows a clear mix of transitional serif and geometric sans.
- Don't use complex, multi-layered gradients — screenshot shows solid white backgrounds and flat color blocks within images.
- Don't clutter the interface with many UI controls — screenshot shows a minimal top navigation and focus on content.

---

## System Prompt (paste into AI agent)

```
This is a premium agency portfolio for Look Inc, a non-traditional agency with journalism roots. The visual language is defined by a strict black-and-white palette (#FFFFFF background, #000000 ink) that lets high-quality editorial photography stand out. The typography relies on a mix of transitional-serif and bold geometric-sans to create a magazine-like hierarchy. Critical constraints: avoid any vibrant accent colors or multi-colored gradients; never use rounded corners or drop shadows, maintaining a sharp, clean grid; and avoid dense, cluttered layouts, ensuring generous white space between sections to preserve the sophisticated, editorial tone.
```