---
name: Ayakaito
description: "This site is a masterclass in blending high-end photography with refined typography to create a sophisticated, gallery-like portfolio experience."
version: alpha

colors:
  background: "#FEFDF8"
  primary: "#35472C"
  neutral: "#35477C"
  line: "rgba(53, 71, 44, 1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 62px
    lineHeight: 1.04
    fontWeight: 400
    letterSpacing: "-1.3px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.67
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

A refined editorial portfolio showcasing high-end branding and typography through rich, photographic still lifes.

*A high-end design studio gallery showcasing a refined mix of photography, print, and type.*

## Colors

Earth-toned, organic palette dominated by deep olive greens and warm neutrals.

- **Background (`#FEFDF8`)** — uses `bg` token
- **Primary text (`#35472C`)** — uses `ink` token
- **Muted (`#35477C`)** — uses `muted` token
- **Borders (`rgba(53, 71, 44, 1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** monospaced

- Navigation links use a humanist sans-serif at 18px.
- Project descriptions use a refined transitional serif.
- Captions and metadata often use an uppercase sans-serif.

## Layout

Immersive full-bleed photography with split-screen editorial layouts.

*Rhythm:* generous, with large typographic scale and intentional negative space

## Elevation & Depth

- Borders: thin 1px solid dark olive (#35472C) for interactive elements

## Shapes

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

## Components

- **button:** Minimal text link with a thin border and rounded pill shape.
- **card:** Split panel layout pairing large typography blocks with full-bleed project photography.
- **chip:** Small uppercase labels for project categories.
- **input:** None visible.
- **hero:** Immersive full-screen photographic still life with an overlay of primary navigation.

## Do's and Don'ts

**Don't:**
- Don't use bright, neon accent colors — screenshot shows a muted, earth-toned palette.
- Don't use heavy drop shadows on elements — screenshot shows flat, photographic depth instead.
- Don't use tight, cluttered grids — screenshot shows expansive, breathing layouts.
- Don't use playful, rounded UI components — screenshot shows refined, pill-shaped buttons.
- Don't use bold, heavy sans-serif display fonts — screenshot shows elegant, high-contrast serifs.
- Don't use rigid, card-based layouts — screenshot shows immersive, full-bleed editorial spreads.

---

## System Prompt (paste into AI agent)

```
This is a refined editorial portfolio for a high-end design studio, focusing on branding, typography, and illustrations. The core palette relies heavily on deep olive green (#35472C) and warm off-white (#FEFDF8), occasionally using soft pinks for section backgrounds. Typography mixes elegant transitional serifs for large headlines with humanist sans-serifs for navigation and metadata. It prioritizes immersive, full-bleed photography and generous whitespace over dense UI. Critical donts: avoid neon accent colors, avoid heavy drop shadows, and avoid rigid card-based layouts. The system must maintain a sophisticated, quiet, and gallery-like visual hierarchy.
```