---
name: Layers
description: "This site is worth including as a prime example of minimalist, gallery-focused design systems that prioritize content curation and clean visual hierarchy over decorative elements."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#64748B"
  neutral: "#94A3B8"
  line: "rgba(229, 231, 235, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

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

---

## Overview

A curated platform for designers to share and explore layered UI components and portfolios.

*A digital gallery for UI/UX designers to showcase and discover layered design assets.*

## Colors

Minimalist, high-contrast black and white with subtle gray hierarchy for a clean, gallery-like experience.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#64748B`)** — uses `ink-soft` token
- **Muted (`#94A3B8`)** — uses `muted` token
- **Borders (`rgba(229, 231, 235, 1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

## Layout

Responsive grid layout with a left sidebar, main content area, and right sidebar for jobs and ads.

*Rhythm:* Consistent 4px base with 8px, 12px, and 16px increments for spacing and gaps.

## Elevation & Depth

- rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset
- rgba(0, 0, 0, 0.03) 0px 0px 0px 1px inset
- Borders: 1px solid rgb(229, 231, 235) for subtle separation and card borders.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Minimal, rounded corners (12px), often with border and hover state. Primary uses solid black, secondary uses white with border.
- **card:** Clean white cards with 12px border-radius, subtle 1px inset border, and image previews.
- **chip:** Tag-like elements with rounded corners (9999px), used for filtering categories.
- **input:** Search bar with rounded corners and subtle border.
- **hero:** Grid of content cards showcasing various design projects and assets.

## Do's and Don'ts

**Don't:**
- Don't use complex gradients — screenshot shows clean, solid backgrounds with minimal color.
- Don't implement dark mode — screenshot shows exclusively light theme with white backgrounds.
- Don't use decorative serif fonts — screenshot shows consistent use of sans-serif typography.
- Don't add heavy drop shadows — screenshot shows subtle inset borders instead of prominent shadows.
- Don't use vibrant accent colors — screenshot maintains a strictly monochromatic palette with occasional brand colors in content.
- Don't create cluttered layouts — screenshot demonstrates generous white space and clear visual hierarchy.

---

## System Prompt (paste into AI agent)

```
Layers.to is a curated design gallery platform for UI/UX designers. The visual system uses a minimalist black and white palette with #000000 ink on #FFFFFF background, supplemented by subtle gray hierarchy (#64748B, #94A3B8). Typography is exclusively grotesque-sans (Inter family) at 16px base with 400 weight. Layout follows a 12-column grid with 24px gutters and 1280px max container width. Critical donts: Never use dark mode (screenshot shows only light theme), avoid decorative serifs (only sans-serif used), and prevent heavy shadows (uses subtle inset borders instead). The interface prioritizes clean card-based layouts with 12px border-radius and minimal interactive states.
```