---
name: Diogoakio Com Br
description: "This site is a strong example of using extreme restraint and high contrast to create a premium, focused portfolio experience."
version: alpha

colors:
  background: "#151515"
  primary: "#FFFFFF"
  neutral: "#999999"
  bg-soft: "#1C2763"
  line: "rgba(255, 255, 255, 0.15)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 34px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.32px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.32px"

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

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 30px
  3xl: 48px

---

## Overview

A refined portfolio site for an independent designer & art director, focusing on bold typography and a dark, immersive gallery experience.

*A digital gallery with curated, high-contrast exhibitions.*

## Colors

High contrast and restraint, using a dark backdrop to let photography and typography stand out.

- **Background (`#151515`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.15)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

- All text uses a 400 weight.
- Display uses negative letter-spacing, body uses positive letter-spacing.
- Typography is the primary structural element.

## Layout

A full-bleed dark canvas with a prominent top-aligned hero statement and a grid-based portfolio gallery.

*Rhythm:* A consistent 30px gap defines major section separations.

## Elevation & Depth

- Borders: Minimal to non-existent; separation is achieved through spacing and background contrast.

## Shapes

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

## Components

- **button:** Minimalist text links or buttons with high contrast against dark backgrounds.
- **card:** Content presented as large photographic cards or clean text blocks within a grid.
- **chip:** Simple, unadorned text elements.
- **input:** Not visible in the provided screenshots.
- **hero:** A massive, full-width typographic statement that anchors the entire page.

## Do's and Don'ts

**Don't:**
- Don't use a white background — the screenshot shows a dominant dark theme.
- Don't use bold font weights — the screenshot shows a consistent 400 weight.
- Don't add drop shadows — the screenshot shows flat, surface-level depth.
- Don't use a wide variety of colors — the screenshot shows a strictly monochrome palette.
- Don't use rounded corners on elements — the screenshot shows sharp, square edges.
- Don't use complex decorative borders — the screenshot relies on spacing for separation.

---

## System Prompt (paste into AI agent)

```
Design DNA for Diogo Akio's portfolio site. This is a refined, high-contrast portfolio for an independent designer and art director. The design is anchored by a dark theme (bg #151515) and white typography (ink #FFFFFF), with a muted accent color (#1C2763) and gray text (#999999). Typography is a humanist sans-serif (HelveticaNeueLTPro-Roman) used in a 400 weight. The layout is a full-bleed dark canvas with a prominent typographic hero and a grid-based gallery. Critical donts: Never use a white background, never use bold font weights, and never use rounded corners or drop shadows. The site prioritizes editorial clarity and a cinematic gallery feel.
```