---
version: alpha
name: Idyllic
description: Irreverent New Plymouth creative studio — warm off-white cream canvas with heavy black ink, an electric-blue primary and a hot-red secondary accent, oversized condensed display type, scrolling marquee patterns, and playful dual-state hover imagery (skulls, dice, records).

colors:
  # Canvas + ink
  background: "#f4efe6"
  surface: "#ffffff"
  surface-soft: "#faf7f0"
  ink: "#141414"
  ink-pure: "#000000"

  # Accents
  primary: "#1f3df0"        # electric blue CTA
  primary-hover: "#1730c4"
  secondary: "#e8362a"      # hot red
  secondary-hover: "#c42a20"

  # On-color
  on-primary: "#ffffff"
  on-secondary: "#ffffff"
  on-ink: "#f4efe6"

  # Neutral scale
  ink-secondary: "#3a3a3a"
  ink-muted: "#6b6b6b"
  border: "#1f1f1f"
  border-soft: "#d8d2c5"
  surface-tint: "#ebe5d8"

typography:
  display-hero:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -1px
  display:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -0.5px
  section-heading:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  marquee:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  card-title:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.3px
  body-large:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.4px
  caption:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.6px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 144px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"

  badge:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-feature:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    rounded: "{rounded.lg}"
    padding: 32px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 32px
    borderColor: "{colors.border-soft}"

  marquee-bar:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.marquee}"
    padding: 12px 0px
---

# Idyllic Design System

## Overview

Idyllic is a New Plymouth creative studio whose website wears its irreverence on its sleeve. The design rejects sterile tech minimalism in favor of something warmer and louder: a cream-paper canvas (`{colors.background}`) printed with heavy black ink (`{colors.ink}`), punctuated by an electric-blue primary (`{colors.primary}`) and a hot-red secondary (`{colors.secondary}`). The result reads like a riso-printed gig poster that learned to scroll — playful, physical, and unafraid to be ugly-on-purpose.

The typographic move is the loudest signal. Oversized condensed display type (Anton, an Oswald cousin) stacks tight, near-touching lines at display sizes with line-heights below 1.0, creating dense blocks of headline that feel shouted rather than spoken. Body copy drops to Archivo — a grotesque sans with enough character to stay on-brand but enough neutrality to stay readable. The contrast between the two is the system: condensed-loud for impact, grotesque-clean for everything you actually read.

Motion and imagery carry the personality. Horizontal marquee bars scroll text across the page in repeating loops, and editorial imagery (skulls, dice, vinyl records, a black duck mascot) swaps to a hover variant on interaction — a dual-state image pair baked into the brand. The palette stays disciplined under all this noise: warm cream and black do almost all the work, and the two saturated accents are deployed like exclamation points, never as wallpaper.

**Key Characteristics:**
- Warm cream paper canvas (`{colors.background}`) instead of clinical white — the page feels printed
- Heavy black ink (`{colors.ink}`) with `{colors.border}` 1–2px outlines on cards and buttons
- Oversized condensed display type (Anton) with sub-1.0 line-height — shouted headlines
- Archivo grotesque for readable body and UI copy
- Two saturated accents used sparingly: electric blue primary, hot red secondary
- Scrolling marquee bars as a recurring structural device
- Dual-state hover imagery (normal + `-hvr` variants) — skulls, dice, records
- Pill-shaped buttons and badges, square-ish bordered cards

## Colors

### Canvas & Ink
- **Cream** (`{colors.background}`): The signature paper canvas behind nearly everything.
- **White** (`{colors.surface}`): Light card surfaces that lift off the cream.
- **Ink Black** (`{colors.ink}`): Headlines, body text, borders, dark feature panels.
- **True Black** (`{colors.ink-pure}`): Reserved for logo and high-contrast iconography.

### Accents
- **Electric Blue** (`{colors.primary}`): Primary CTA fills and "view all" actions.
- **Hot Red** (`{colors.secondary}`): Secondary accent, footer marks, attention pulls.

### Neutrals
- **Ink Secondary** (`{colors.ink-secondary}`): Sub-copy on cream.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata.
- **Border** (`{colors.border}`): The near-black 1–2px outline on cards/buttons.
- **Border Soft** (`{colors.border-soft}`): Subtle dividers on cream.
- **Surface Tint** (`{colors.surface-tint}`): Slightly deeper cream for section banding.

### On-Color
- **On Primary** (`{colors.on-primary}`): White text on blue.
- **On Ink** (`{colors.on-ink}`): Cream text on black panels and marquee bars.

## Typography

### Font Family
- **Display**: `Anton` (condensed grotesque), fallbacks `Oswald, Arial Narrow, sans-serif`
- **Text/UI**: `Archivo`, fallbacks `Helvetica Neue, Arial, sans-serif`

### Hierarchy

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 96px Anton hero — shouted, sub-1.0 line-height |
| `display` | Large section statements |
| `section-heading` | Standard section titles |
| `marquee` | Scrolling marquee text |
| `card-title` | Archivo bold card headings |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-medium` | Emphasized inline text |
| `button-ui` | Buttons, nav links (tracked, bold) |
| `caption` | Metadata, eyebrows (uppercase-friendly) |

### Principles
- **Condensed vs grotesque**: Anton for loud display, Archivo for everything readable — the contrast is the identity.
- **Tight display leading**: Headlines run line-heights of 0.92–1.0 to stack into dense blocks.
- **Tracked UI labels**: Buttons and captions add positive letter-spacing for a stamped, poster feel.

## Layout

### Spacing System
Base rhythm is 8px, scaling up to generous `{spacing.3xl}`–`{spacing.4xl}` gaps between sections so the loud type has room to breathe.

### Grid & Container
- Wide content blocks with full-bleed marquee bars
- 2–3 column project grids that collapse to single column on mobile
- Bordered cards (`{colors.border}`) sit directly on the cream canvas

### Whitespace Philosophy
- **Poster density**: Headline blocks are dense, but section-to-section spacing is wide and confident.
- **Banding**: Alternating cream tints (`{colors.surface-tint}`) and full-black panels segment the page.
- **Marquees as seams**: Scrolling bars often mark transitions between sections.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Marquee bars, full-bleed panels |
| `sm` | 4px | Small chips |
| `md` | 8px | Inputs, small cards |
| `lg` | 16px | Standard cards, feature panels |
| `pill` | 9999px | Buttons, badges |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Electric-blue pill, white text, tracked bold label.
- **`button-secondary`** — Hot-red pill variant for secondary emphasis.
- **`button-outline`** — Cream fill with near-black border for low-emphasis actions.

### Badges
- **`badge`** — Black pill, cream text, uppercase caption.

### Cards
- **`card`** — White surface, near-black border, 16px radius.
- **`card-feature`** — Inverted black panel with cream text for hero/feature blocks.

### Inputs
- **`input`** — White surface, bordered; focus switches the border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Cream header with a soft bottom border, tracked bold links.

### Distinctive Components
- **`marquee-bar`** — Full-width black bar scrolling Anton text in cream, used as a recurring structural seam.
- **Dual-state imagery** — Editorial images swap to a `-hvr` hover variant (skulls, dice, records) on interaction.

## Do's and Don'ts

### Do
- Keep the cream canvas (`{colors.background}`) as the default surface
- Use Anton condensed at display sizes with sub-1.0 line-height
- Deploy blue and red as sparing accents, never as backgrounds
- Outline cards and buttons with the near-black `{colors.border}`
- Use marquee bars to mark section transitions

### Don't
- Don't replace the cream with clinical pure white as the page canvas
- Don't set body copy in Anton — use Archivo for readable text
- Don't flood sections with the saturated accents
- Don't use blue or red as the page background (keep CTAs legible)
- Don't soften the personality into generic minimalism

## Responsive Behavior

| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero type scales down, marquees keep scrolling |
| Tablet | 600–1024px | 2-column project grids |
| Desktop | >1024px | Full multi-column layout, max display type |

- Display hero scales from 96px down while keeping its tight leading
- Project grids collapse 3 → 2 → 1 column
- Marquee bars remain full-bleed at every size
- Nav collapses to a toggle on mobile

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Idyllic. Brand names and trademarks belong to their respective owners.