---
name: Guste
description: "This site is a strong example of a bold, minimalist studio portfolio that uses structured line art and strict borders to create a memorable and highly functional identity."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#1E1E1E"
  neutral: "#6B7280"
  bg-soft: "#FAFAFA"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 32px
    lineHeight: 1.125
    fontWeight: 400
    letterSpacing: "0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

A studio portfolio for graphic design and illustration services, emphasizing bold line art and curated art collections.

*A digital canvas showcasing bold, playful, and illustrative creative work.*

## Colors

High-contrast black and white with a functional palette of distinct colors for interactive elements.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#1E1E1E`)** — uses `ink-soft` token
- **Muted (`#6B7280`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

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

- All text is uppercase for navigation and labels.
- Geometric sans-serif font family used consistently throughout.
- Light font weight (400) is standard for most text elements.

## Layout

Boxy, grid-based layout with prominent 2px black borders separating sections.

*Rhythm:* Standard 4px grid with generous 64px padding for section containers.

## Elevation & Depth

- Borders: Solid 2px black borders define all major containers and sections.

## Shapes

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

## Components

- **button:** Circular outline button for primary actions (CONNECT).
- **card:** Grid-based display of artwork images without borders.
- **chip:** Color swatches in a horizontal row for selection.
- **hero:** Large, interactive line-art illustration with color selection tools.

## Do's and Don'ts

**Don't:**
- don't use drop shadows — screenshot shows flat, border-defined surfaces instead
- don't use rounded corners on containers — screenshot shows sharp, 0px radius boxes
- don't use gradient backgrounds — screenshot shows solid white or light gray
- don't use a third font for accents — screenshot shows consistent use of a single geometric sans
- don't use subtle 1px borders — screenshot shows prominent 2px black borders
- don't use multi-column text blocks in the hero — screenshot shows single, large headline

---

## System Prompt (paste into AI agent)

```
A portfolio website for a graphic design and illustration studio, utilizing a stark, high-contrast black-and-white aesthetic with a clean geometric sans-serif typeface. The design is anchored by solid 2px black borders that define sections and containers, creating a structured, grid-like layout. Key colors are #FFFFFF for the background, #000000 for ink and borders, and #1E1E1E for secondary text, with a small functional palette of bright swatches for interactive color selection. Critical don'ts: avoid using drop shadows, rounded corners on containers, or gradient backgrounds, as the design strictly uses flat surfaces and sharp edges. The tone is professional yet playful, relying on bold line-art illustrations and curated gallery displays.
```