---
name: Basedesign
description: "This site is an excellent example of a bold, type-driven agency portfolio that uses restraint and scale to achieve a high-impact, cultural aesthetic."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#212121"
  neutral: "#ABABAB"
  line: "rgba(0,0,0,0.12)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 120px
    lineHeight: 0.9
    fontWeight: 700
    letterSpacing: "-1px"
  headline:
    fontFamily: geometric-sans
    fontSize: 60px
    lineHeight: 1.17
    fontWeight: 300
    letterSpacing: "0px"
  body:
    fontFamily: geometric-sans
    fontSize: 18px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.12px"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "0.3px"

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

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

---

## Overview

A brutalist design agency that uses massive typography and stark contrast to create cultural impact.

*A high-impact cultural gallery meets a modern design manifesto.*

## Colors

High-contrast monochrome with occasional blue accents for interactive elements.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#212121`)** — uses `ink-soft` token
- **Muted (`#ABABAB`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.12)`)** — uses `line` token

## Typography

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

- Use extreme size differences to create visual hierarchy.
- Maintain tight leading for display text.
- Ensure all text is left-aligned for a clean, structured look.

## Layout

Full-width typographic hero followed by high-contrast editorial sections.

*Rhythm:* Generous whitespace is used to frame bold typographic elements.

## Elevation & Depth

- Borders: Thin black underlines are used for interactive elements and section dividers.

## Shapes

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

## Components

- **button:** Simple text-based links with minimal decoration.
- **card:** Typographic cards that highlight bold headlines and project imagery.
- **hero:** A massive typographic hero that uses a single word or phrase to dominate the viewport.

## Do's and Don'ts

**Don't:**
- Don't use rounded corners on main containers — screenshot shows strictly sharp edges or very subtle 2px radius.
- Don't add drop shadows to cards — screenshot shows flat, high-contrast surfaces with no elevation.
- Don't use multiple colors in a single section — screenshot shows a strict monochrome palette.
- Don't center all text — screenshot shows a strong preference for left-aligned typography.
- Don't use small, cramped layouts — screenshot shows expansive whitespace and massive typography.
- Don't use decorative icons — screenshot shows a minimal, type-driven interface.

---

## System Prompt (paste into AI agent)

```
This is a high-impact design agency website characterized by massive typography, stark black-and-white contrast, and a minimal, editorial layout. The primary font category is geometric-sans, used at extreme scales (up to 120px) to create a bold visual identity. The palette is almost entirely monochrome, using only #FFFFFF, #000000, and #212121. Do not use rounded corners, soft shadows, or any decorative elements that would dilute the bold, direct aesthetic. Focus on sharp edges, generous whitespace, and powerful typographic statements. The layout should feel like a gallery or manifesto, with clear hierarchy and deliberate pacing.
```