---
name: Frog
description: "This site is worth including as a prime example of a premium agency portfolio that uses restraint and typography to create impact."
version: alpha

colors:
  background: "#000000"
  primary: "#000000"
  neutral: "#888888"
  bg-soft: "#ffffff"
  line: "rgba(136,136,136,1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

A premium design studio website featuring a high-contrast dark hero, clean white content sections, and a distinct serif display typeface.

*A high-end design agency portfolio that balances stark minimalism with immersive photographic case studies.*

## Colors

Strict monochromatic palette relying on absolute black and white with neutral grays for secondary text.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#888888`)** — uses `muted` token
- **Borders (`rgba(136,136,136,1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** grotesque-sans

- Use transitional-serif for display and headlines.
- Use grotesque-sans for all body and UI text.

## Layout

Full-bleed hero image followed by stacked content sections.

*Rhythm:* Consistent 4px base grid with larger section padding of 56px.

## Elevation & Depth

- 0px 0px 0px 0px rgba(0,0,0,0.6)
- Borders: Subtle 1px or 2px borders using white or black for contrast.

## Shapes

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

## Components

- **button:** Solid black rectangle with white text, minimal radius.
- **card:** Image-focused layout with overlay or adjacent text, clean edges.
- **chip:** Rounded pill shape with outline border.
- **input:** Minimal underline or outline style.
- **hero:** Full-viewport photographic background with centered serif display text.

## Do's and Don'ts

**Don't:**
- Don't use vibrant neon accents — screenshot shows strict black-and-white palette.
- Don't use rounded corners for main elements — screenshot shows sharp, squared edges.
- Don't use playful sans-serif for headlines — screenshot uses a distinct serif font.
- Don't clutter the hero section — screenshot shows a clean, single image with minimal text.
- Don't use grey backgrounds for main sections — screenshot relies on pure black and white.
- Don't use complex shadows — screenshot uses mostly flat surfaces.

---

## System Prompt (paste into AI agent)

```
Frog is a premium design studio website characterized by a stark, high-contrast monochromatic palette of pure black and white. Typography features a distinct serif display face paired with a clean grotesque sans-serif for body text. The layout is spacious and editorial, prioritizing large-scale photography and minimal UI elements to let work speak for itself. Key hex colors are #000000 for dark backgrounds and #FFFFFF for light text, with #888888 for secondary information. Critical design constraints: avoid rounded corners on primary components, avoid vibrant accent colors, and do not use decorative gradients. Maintain a professional and authoritative tone throughout.
```