---
name: Sirup Online
description: "This site is a strong example of a premium, editorial design language applied to a music artist showcase, using bold typography and dramatic photography to create impact."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  neutral: "#4554ac"
  line: "rgba(255, 255, 255, 0.88)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 120px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-2px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

A premium, editorial-style artist showcase celebrating a 5th anniversary with bold typography and dramatic photography.

*A high-fashion magazine cover for a music artist's milestone.*

## Colors

Monochromatic text on complex photographic or gradient backgrounds, relying on contrast and scale for hierarchy.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#4554ac`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.88)`)** — uses `line` token

## Typography

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

- Display font is a high-contrast transitional serif used in massive scale.
- Body font is a neutral humanist sans-serif.
- Vertical text uses sans-serif for readability.
- Kerning is tight on display text.

## Layout

Full-bleed photographic hero with layered typography and absolute positioning.

*Rhythm:* Asymmetric, layout-driven spacing defined by overlapping elements.

## Elevation & Depth

- Borders: Minimal, relying on overlapping photographic layers.

## Shapes

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

## Components

- **button:** No distinct button components visible; interactions are via links or icons.
- **card:** Overlapping image cards with no background, featuring artist portraits.
- **chip:** No chips visible.
- **input:** No input fields visible.
- **hero:** Massive typographic anniversary hero with a central portrait and overlapping text.

## Do's and Don'ts

**Don't:**
- Don't use small, tight display text — screenshot shows massive, overlapping typography.
- Don't use flat, solid backgrounds — screenshot shows complex photographic and gradient backdrops.
- Don't use standard grid-based card layouts — screenshot shows overlapping, asymmetrical photo placements.
- Don't use subtle color palettes — screenshot shows high-contrast text over vibrant imagery.
- Don't use standard, centered UI components — screenshot uses absolute positioning and vertical text.
- Don't use friendly, rounded aesthetics — screenshot shows a sharp, premium editorial style.

---

## System Prompt (paste into AI agent)

```
This is a premium, editorial-style artist website celebrating a 5th anniversary. It features massive, high-contrast transitional serif display typography (like 'Glodok' or 'Termina') layered over dramatic photographic and gradient backgrounds. The primary colors are black and white text over complex backdrops, with muted blue accents (#4554ac). Body text uses a neutral humanist sans-serif. Key critical don'ts: don't use standard grid layouts, don't use friendly or rounded UI elements, and don't use small display text. The layout is highly asymmetrical with overlapping elements and vertical text, creating a sophisticated, magazine-like experience.
```