---
name: Starface
description: "A defining example of Gen Z 'ugly-cute' aesthetics, blending brutalist layout principles with hyper-playful pop colors."
version: alpha

colors:
  background: "#FDFF00"
  primary: "#000000"
  tertiary: "#FF00D3"
  neutral: "#000000"
  line: "rgba(0,0,0,0.2)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 40px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: monospace
    fontSize: 16px
    lineHeight: 1.8
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

A high-energy, playful e-commerce experience for skincare that treats products like fun collectibles.

*A loud, energetic teen magazine meets a pop-art candy store.*

## Colors

High-saturation color blocking using a signature electric yellow, vibrant magenta, and bright green against stark black borders.

- **Background (`#FDFF00`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#FF00D3`)** — uses `accent` token
- **Muted (`#000000`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.2)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** monospace
- **Mono:** monospace

- Text is consistently lowercase.
- Monospace is used for almost all functional and descriptive text.
- Heavy, bold, rounded sans-serif is used for impactful headers.

## Layout

A rigid, full-bleed grid of solid color blocks separated by thick black lines.

*Rhythm:* Consistent internal padding (25px) within cards maintains a uniform rhythm despite varied card sizes.

## Elevation & Depth

- none
- Borders: Bold, 2px black borders or solid black structural gaps define every element and separate color blocks.

## Shapes

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

## Components

- **button:** Black border, transparent background with text, or solid black background.
- **card:** Vibrant, solid-colored rectangles with rounded corners (24px), thick borders, and clear image/text separation.
- **chip:** Pill-shaped or small rectangular color-coded tags for categories.
- **input:** Standard bordered inputs matching the bold outline aesthetic.
- **hero:** Large, colorful, image-heavy blocks that dominate the viewport.

## Do's and Don'ts

**Don't:**
- don't use serif fonts — screenshot shows exclusively monospace and geometric rounded sans-serif types.
- don't use uppercase text — screenshot shows text is entirely lowercase.
- don't use subtle gray borders — screenshot shows bold, solid black structural lines.
- don't use complex shadows — screenshot shows flat color blocks with no depth effects.
- don't use muted or pastel color palettes — screenshot shows highly saturated, neon-like primary colors.
- don't use dense text blocks — screenshot shows short, punchy, and highly scannable copy.

---

## System Prompt (paste into AI agent)

```
This is a playful, high-energy DTC e-commerce site for a Gen Z skincare brand. It uses a vibrant, high-contrast color palette centered around a signature electric yellow (#FDFF00), bold magenta (#FF00D3), and stark black (#000000). The typography combines a heavy, geometric rounded sans-serif for impactful headings with a clean monospace font for all descriptive body text, always rendered in lowercase. The layout is a rigid grid of solid color blocks separated by thick black lines or gaps, creating a bold, graphic aesthetic. Critical donts: never use serif fonts, never use uppercase text, and never use subtle gray borders or soft drop shadows; the brand relies on thick black outlines and flat color for all structural definition.
```