{
  "id": "layers",
  "title": "Layers",
  "url": "https://layers.to",
  "tags": [
    "design",
    "community"
  ],
  "colors": {
    "principle": "Minimalist, high-contrast black and white with subtle gray hierarchy for a clean, gallery-like experience.",
    "bg": "#FFFFFF",
    "bgSoft": null,
    "bgQuiet": null,
    "ink": "#000000",
    "inkSoft": "#64748B",
    "muted": "#94A3B8",
    "mutedSoft": null,
    "accent": null,
    "line": "rgba(229, 231, 235, 1)"
  },
  "typography": {
    "rules": [],
    "scaleUses": [
      "Featured titles and large headings",
      "Main content and descriptions",
      "Metadata and secondary information"
    ],
    "display": "grotesque-sans",
    "body": "grotesque-sans",
    "mono": null,
    "scale": [
      {
        "token": "display",
        "size": 36,
        "lh": 1.1,
        "weight": 500,
        "ls": "-0.5px"
      },
      {
        "token": "body",
        "size": 16,
        "lh": 1.5,
        "weight": 400,
        "ls": "0px"
      },
      {
        "token": "caption",
        "size": 14,
        "lh": 1.4,
        "weight": 400,
        "ls": "0px"
      }
    ]
  },
  "spacing": {
    "rhythm": "Consistent 4px base with 8px, 12px, and 16px increments for spacing and gaps.",
    "base": 4,
    "scale": [
      4,
      8,
      12,
      16,
      24,
      32,
      48,
      64,
      96
    ]
  },
  "surfaces": {
    "shadows": [
      "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.",
    "radius": {
      "sm": 4,
      "md": 8,
      "lg": 12,
      "pill": 9999
    }
  },
  "layout": {
    "skeleton": "Responsive grid layout with a left sidebar, main content area, and right sidebar for jobs and ads.",
    "container": 1280,
    "paragraph": 680,
    "columns": 12,
    "gutter": 24,
    "breakpoints": [
      768,
      1024
    ]
  },
  "motion": {
    "patterns": [
      "Smooth transitions on hover for interactive elements (0.15s)",
      "Fade transitions for modal overlays (0.5s)"
    ],
    "durations": {
      "micro": 150,
      "small": 300,
      "medium": 500
    },
    "easing": "cubic-bezier(0.4, 0, 0.2, 1)"
  },
  "identity": {
    "keywords": [
      "design curation",
      "layers",
      "portfolio",
      "community"
    ],
    "analogy": "A digital gallery for UI/UX designers to showcase and discover layered design assets.",
    "oneLiner": "A curated platform for designers to share and explore layered UI components and portfolios."
  },
  "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."
  },
  "interaction": {
    "hover": "Subtle background color change or border emphasis on interactive elements.",
    "click": "Standard pointer cursor on interactive elements.",
    "transition": "All transitions use cubic-bezier(0.4, 0, 0.2, 1) easing for smooth, natural movement.",
    "keyboard": "Standard focus states for accessibility."
  },
  "voice": {
    "tone": "Professional, clean, and focused on design community and curation.",
    "headlineStyle": "Concise, capitalized for tags, bold for titles.",
    "ctaStyle": "Simple, action-oriented buttons with clear labels.",
    "avoid": [
      "Playful or informal language",
      "Overly decorative elements",
      "Cluttered layouts"
    ]
  },
  "donts": [
    "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."
  ],
  "systemPrompt": "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."
}