---
name: ToyFight
description: "This site masterfully balances playful, retro-gaming inspired aesthetics with high-end creative agency positioning, making it an excellent reference for expressive studio designs."
version: alpha

colors:
  background: "#F1E7E7"
  primary: "#0D0D0E"
  secondary: "#FAF6EF"
  neutral: "#E9E3F3"
  bg-soft: "#FAF6EF"
  bg-quiet: "#E9E3F3"
  muted-soft: "#E9E3F3"
  line: "rgba(13,13,14,1)"

typography:
  display:
    fontFamily: monospaced
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-8.59px"
  heading:
    fontFamily: condensed-sans
    fontSize: 46.21px
    lineHeight: 0.97
    fontWeight: 400
    letterSpacing: "-0.64px"
  body:
    fontFamily: condensed-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: condensed-sans
    fontSize: 14px
    lineHeight: 1.41
    fontWeight: 500
    letterSpacing: "0.4px"
  micro:
    fontFamily: condensed-sans
    fontSize: 10px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "0.4px"

rounded:
  sm: 2px
  md: 4px
  lg: 16px
  pill: 999px

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

---

## Overview

A playful yet premium creative agency website with a retro-gaming inspired aesthetic.

*A design studio that blends 8-bit gaming nostalgia with high-end creative services.*

## Colors

Warm, soft neutral backgrounds contrasted with high-contrast dark ink.

- **Background (`#F1E7E7`)** — uses `bg` token
- **Primary text (`#0D0D0E`)** — uses `ink` token
- **Secondary text (`#FAF6EF`)** — uses `ink-soft` token
- **Muted (`#E9E3F3`)** — uses `muted` token
- **Borders (`rgba(13,13,14,1)`)** — uses `line` token

## Typography

- **Display:** monospaced
- **Body:** condensed-sans
- **Mono:** monospaced

- Use monospaced font for major headings to reinforce the retro-tech aesthetic.
- Use condensed sans-serif for body and UI text.
- Uppercase small labels with wide tracking.

## Layout

Asymmetric, scattered layout with overlapping elements and generous padding.

*Rhythm:* Generous whitespace to allow bold typography and 3D elements to breathe.

## Elevation & Depth

- 0 4px 12px rgba(0,0,0,0.05)
- Borders: 1px solid #0D0D0E

## Shapes

- `sm`: 2px
- `md`: 4px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Pill-shaped or rounded-rectangle buttons with light backgrounds and dark borders.
- **card:** Dark background cards showcasing portfolio work.
- **chip:** Small pill-shaped labels for tags and categories.
- **input:** Clean text inputs with bottom borders.
- **hero:** Large 3D interactive object paired with scattered, bold typography blocks.

## Do's and Don'ts

**Don't:**
- Don't use generic sans-serif fonts for display text — screenshot shows monospaced and condensed faces.
- Don't apply rigid, symmetrical layouts — screenshot shows scattered, overlapping elements.
- Don't use cold, clinical color palettes — screenshot shows warm, soft neutrals like #F1E7E7.
- Don't avoid 3D and playful elements — screenshot prominently features a 3D game console.
- Don't use thin, delicate borders — screenshot shows solid, confident 1px borders.
- Don't make typography uniform in size — screenshot shows extreme variation from 10px to 56px.

---

## System Prompt (paste into AI agent)

```
This is a premium creative agency website blending retro-gaming nostalgia with high-end design services. The palette centers on warm, soft neutrals (#F1E7E7, #FAF6EF) contrasted with deep ink (#0D0D0E). Typography uses monospaced faces for display headlines and condensed sans-serif for body text, creating a distinct retro-tech feel. The layout is asymmetric and playful, featuring scattered text blocks, 3D interactive elements, and generous whitespace. Critical constraints: Never use generic sans-serif fonts for display text; always embrace scattered, overlapping layouts instead of rigid grids; maintain the warm, soft color palette and avoid cold, clinical tones. The design balances playfulness with premium craftsmanship.
```