# Sirup Online · Design system migration spec

> Source: https://sirup.online/5th  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

The design language of Sirup Online operates as a high-fashion magazine cover for a music artist's milestone, treating the 5th anniversary not as a UI problem but as an editorial event. Its identity DNA is defined by dramatic scale, asymmetric composition, and a deliberate tension between typography and photographic layers.

**One-liner:** A premium, editorial-style artist showcase celebrating a 5th anniversary with bold typography and dramatic photography.
**Keywords:** artist · anniversary · premium · editorial · bold
**Analogy:** A high-fashion magazine cover for a music artist's milestone.

## 2. Color

Color is not a applied palette but a condition of contrast. The system mandates monochromatic text—white or black—over complex photographic or gradient backdrops, with a muted blue accent serving as the sole chromatic signature.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#4554ac` | placeholder |
| `--line` | `rgba(255, 255, 255, 0.88)` | divider |

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

The principle is legibility through scale and contrast, not color separation.

## 3. Typography

The typographic voice is defined by a stark contrast between a massive, high-contrast transitional serif for display headlines and a neutral humanist sans-serif for body text. This pairing creates a hierarchy where the display font performs, and the body font informs.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 1.0 | 700 | -2px | Hero anniversary headline |
| body | 16px | 1.6 | 400 | 0px | Body text |

**Type rules:**
- 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.

## 4. Spacing

Spacing follows an asymmetric, layout-driven rhythm, defined not by a uniform grid but by the deliberate overlap of photographic and typographic layers.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Asymmetric, layout-driven spacing defined by overlapping elements.

## 5. Surfaces

Depth and borders are achieved through compositional layering, not decorative elements. The system avoids box shadows and visible borders, relying instead on the physical overlap of photographic planes and text to create separation.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Minimal, relying on overlapping photographic layers.

## 6. Layout

The layout skeleton is a full-bleed photographic hero, treated as a canvas for layered typography and absolute positioning. Elements are placed with editorial intent, often overlapping or oriented vertically, breaking from standard grid-based card arrangements.

- **Container max:** 1920px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy is one of subtle reinforcement, not spectacle. Transitions are smooth and purposeful, using linear timing for scroll-based reveals and cubic-bezier easing for interactive feedback, aligning with the site's confident, editorial tone.

- **Durations:** micro 125ms · small 250ms · medium 500ms
- **Easing:** `cubic-bezier(0.215, 0.61, 0.355, 1)`
- **Patterns:**
  - Linear transitions for scroll-based reveals.
  - Cubic-bezier easing for interactive elements.

- **Hover:** Cursor changes to pointer on interactive elements.
- **Click:** Standard navigation links.
- **Transition:** Smooth linear and cubic-bezier transitions on properties.
- **Keyboard:** Standard link navigation.

## 8. Voice & Don'ts

The editorial voice is confident, sophisticated, and celebratory, expressed through bold, dramatically scaled headlines and subtle, integrated calls to action. The system deliberately avoids generic or playful typography, cluttered layouts, and standard UI components.

- **Tone:** Confident, sophisticated, and celebratory.
- **Headline style:** Bold, expressive, and dramatically scaled.
- **CTA style:** Subtle, integrated as text links or minimal icons.
- **Avoid:** Avoid generic or overly playful sans-serif headlines. / Avoid cluttered layouts that obscure the central imagery. / Avoid standard button components.

### Don'ts
- ❌ 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.

It deliberately rejects friendly, rounded aesthetics and standard grid layouts in favor of a sharp, premium editorial style.

## System Prompt (paste into AI tool)

```
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.
```