# Look Inc · Design system migration spec

> Source: https://look.inc  ·  Curated by OpenDesign  ·  en

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

## 1. Identity DNA

Look Inc's design system takes its cue from a high-end culture magazine, translating the curation and pacing of print into a digital portfolio. The analogy is precise: this is a publication where the agency's work is the feature story, presented with journalistic clarity and a strict editorial hand.

**One-liner:** A non-traditional agency with journalism roots offering an independent creative look.
**Keywords:** agency · journalism · creative · independent
**Analogy:** A high-end fashion or culture magazine layout for an agency portfolio.

## 2. Color

The color system is a deliberate act of restraint. A strict black-and-white palette functions as a neutral stage, ensuring the full chromatic range of the portfolio photography commands the viewer's attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#000000D9` | secondary text |
| `--line` | `rgba(0, 0, 0, 0.85)` | divider |

**Color principle:** High-contrast monochrome that prioritizes the photography of the portfolio pieces.

Color is ceded to the content, a principle that reinforces the system's focus on showcasing work rather than decorative branding.

## 3. Typography

The typographic voice is split between two deliberate personalities. A transitional serif carries the main narrative, evoking the authority of print journalism, while a bold geometric sans-serif provides the structural punch for case study titles.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -1px | Hero headline |
| h2 | 38px | 1.2 | 700 | 0px | Section case study titles |
| body | 20px | 1.4 | 400 | 0px | Intro paragraph and descriptions |
| caption | 14px | 1.5 | 400 | 0px | Small labels and tags |

**Type rules:**
- 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.

## 4. Spacing

Rhythm is established through generous vertical padding, creating a relaxed, editorial cadence between content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical padding creates a relaxed, editorial rhythm between content blocks.

## 5. Surfaces

Surfaces are defined by sharp, minimal borders rather than depth or shadow. Thin, precise horizontal lines act as the primary structural dividers, maintaining the flat, crisp aesthetic.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Thin, sharp horizontal lines (1px solid rgba(0,0,0,0.85)) separate sections and grid items.

## 6. Layout

The foundational layout is a grid that supports asymmetric column spanning, allowing featured works to break from a rigid structure. This skeleton creates visual hierarchy and directs the eye through the portfolio narrative with purpose.

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

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

## 7. Motion & Interaction

Motion is functional and refined, used to confirm interaction rather than to perform. Smooth, consistent 0.2-second transitions on color and background states maintain the site's premium, understated character.

- **Durations:** micro 220ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background transitions on interactive elements.
  - Page transitions likely smooth to maintain the premium feel.

- **Hover:** Standard pointer cursor; subtle color or underline transitions on text links.
- **Click:** Immediate navigation to detailed case study pages.
- **Transition:** Consistent 0.2s ease-in-out for color, background, and margin adjustments.
- **Keyboard:** Standard tab-based navigation through interactive elements.

## 8. Voice & Don'ts

The editorial voice is sophisticated and authoritative, using short, punchy headlines and direct, minimalist calls to action. The tone avoids urgency and marketing excess, focusing instead on content exploration.

- **Tone:** Sophisticated, understated, and authoritative.
- **Headline style:** Short, punchy, and often stylized (e.g., the inverted 'Look').
- **CTA style:** Minimalist and direct, focusing on content exploration.
- **Avoid:** Loud, neon, or overly saturated color palettes / Heavy drop shadows or soft, rounded UI elements / Dense, cluttered layouts without breathing room / Aggressive, urgent marketing copy

### Don'ts
- ❌ 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.

This system deliberately forgoes vibrant accent colors, rounded UI elements, drop shadows, and dense, cluttered layouts in favor of its core magazine-inspired clarity.

## System Prompt (paste into AI tool)

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