---
name: Embacy
description: "The site is worth including as a prime example of a clean, sophisticated agency portfolio that uses scale and negative space to create visual impact."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  secondary: "#000000"
  tertiary: "#ff5319"
  neutral: "#999999"
  bg-soft: "#f7f7f7"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  heading:
    fontFamily: geometric-sans
    fontSize: 43px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "-0.16px"
  caption:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 10px
  pill: 999px

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

---

## Overview

A clean, sophisticated design agency portfolio featuring bold typography and a high-contrast black-and-white base.

*A high-end design agency portfolio focused on global tech brands.*

## Colors

High-contrast monochrome base with a single vibrant orange accent used sparingly for emphasis and calls-to-action.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#000000`)** — uses `ink-soft` token
- **Accent (`#ff5319`)** — uses `accent` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

- Use tight negative letter spacing for headlines.
- Maintain generous vertical whitespace between sections.
- Avoid heavy font weights; rely on size and spacing for hierarchy.

## Layout

Standard 12-column grid that collapses to a 2-column grid on mobile.

*Rhythm:* Generous whitespace with clear separation between grid items.

## Elevation & Depth

- Borders: Minimal to no visible borders; structure is defined by spacing and background contrast.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 10px
- `pill`: 999px

## Components

- **button:** Pill-shaped primary CTA with a pencil emoji; secondary options are text links.
- **card:** Project cards consisting of a full-width image, project name, and country.
- **chip:** None visible.
- **input:** None visible.
- **hero:** Massive left-aligned typography introducing the agency.

## Do's and Don'ts

**Don't:**
- Don't use multiple bright accent colors — screenshot shows only one dominant orange.
- Don't use heavy font weights like bold or black — screenshot shows predominantly 400-weight text.
- Don't add decorative borders to cards — screenshot shows structure through spacing and image content.
- Don't use wide letter spacing for headlines — screenshot shows tight, negative tracking.
- Don't clutter the interface with many UI components — screenshot shows a very clean, minimal layout.
- Don't use drop shadows for depth — screenshot shows a flat design aesthetic.

---

## System Prompt (paste into AI agent)

```
This is a design agency portfolio for Embacy, a 'Design Partner for Global Tech Brands'. The design relies on a high-contrast monochrome palette with a single vibrant orange (#FF5319) accent. Typography uses a geometric sans-serif (Haffer) with large, tightly tracked headlines and generous whitespace. Critical donts include avoiding heavy font weights, multiple accent colors, decorative borders, wide tracking, cluttered UIs, and drop shadows. The layout is clean and editorial, focusing on large imagery and bold text.
```