---
name: Ilovecreatives
description: "This site is an excellent example of a premium editorial layout that uses bold typography and generous whitespace to create a strong, community-focused brand identity."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#222222"
  tertiary: "#489442"
  neutral: "#757575"
  line: "rgba(34,34,34,0.2)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.2px"
  heading:
    fontFamily: humanist-sans
    fontSize: 30px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.36px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.4
    fontWeight: 100
    letterSpacing: "-0.36px"
  caption:
    fontFamily: humanist-sans
    fontSize: 13px
    lineHeight: 1.4
    fontWeight: 100
    letterSpacing: "-0.36px"

rounded:
  sm: 4px
  md: 8px
  lg: 20px
  pill: 450px

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

---

## Overview

A stylish, editorial platform serving as a digital trade school and community for creative professionals.

*A modern, stylish community hub and digital trade school for multi-passionate creatives.*

## Colors

High-contrast monochrome base with a single muted green accent for promotional banners.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#222222`)** — uses `ink` token
- **Accent (`#489442`)** — uses `accent` token
- **Muted (`#757575`)** — uses `muted` token
- **Borders (`rgba(34,34,34,0.2)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** geometric-sans

- Display typography is set in a high-contrast transitional serif with tight tracking.
- Body text is set in a light-weight humanist sans-serif.
- Buttons use a pill shape with uppercase or capitalized styling.

## Layout

Full-bleed hero section transitioning into a structured, multi-column grid for products and community listings.

*Rhythm:* Consistent 4px base grid with generous padding in large container blocks.

## Elevation & Depth

- rgba(121,121,121,0.17) 2px 2px 20px 0px
- Borders: 1px solid #222222

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 20px
- `pill`: 450px

## Components

- **button:** Pill-shaped with 1px solid borders and transparent backgrounds, transitioning to solid on hover.
- **card:** Clean white cards with rounded corners (20px) and light shadows for product and job listings.
- **chip:** Small, rounded pill tags for categories (e.g., Physical Goods, Clothing).
- **input:** Minimal text inputs with subtle bottom borders or pill shapes.
- **hero:** Full-bleed photographic background with massive, overlapping serif typography and floating text elements.

## Do's and Don'ts

**Don't:**
- Don't use heavy drop shadows — screenshot shows minimal, soft shadows like rgba(121,121,121,0.17) 2px 2px 20px 0px.
- Don't use bright, saturated accent colors — screenshot shows a muted, earthy green (#489442) only for specific banners.
- Don't use bold font weights for body text — screenshot shows a consistent use of font-weight: 100 for standard copy.
- Don't use sharp, square corners for cards or buttons — screenshot shows consistent use of pill shapes (radius: 450px) and large rounded corners (radius: 20px).
- Don't use complex gradients for backgrounds — screenshot shows solid white backgrounds and photographic hero overlays.
- Don't use wide, sprawling line heights — screenshot shows tight, controlled line-heights (1.2 to 1.4) for a dense, editorial feel.

---

## System Prompt (paste into AI agent)

```
This site is a creative community platform and digital trade school for 'slashies' (multi-passionate creatives). The visual identity is built on a clean, monochromatic base using #222222 ink on #FFFFFF backgrounds, accented by a muted #489442 green specifically for promotional banners. Typography relies on a bold, high-contrast transitional serif for massive display headlines and a light-weight humanist sans-serif (Suisse Regular at 100 weight) for body copy, creating a sophisticated editorial feel. Critical donts: avoid using saturated or neon colors, never use bold font weights for body text, and always use rounded pill shapes for primary buttons and tags. The layout combines full-bleed photographic hero sections with structured, card-based grids for products and community listings, all using tight letter-spacing and generous padding.
```