---
title: "IORAMA — Chantlings design system"
variant: extended
source: https://www.iorama.studio/chantlings
captured_at: 2026-10-12
theme: dark
industry: entertainment
generator: Design DNA (https://four.wiralomi.com/style/iorama-studio-chantlings)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# IORAMA — Chantlings · Design System

> A quiet, cinematic stage for playful music-making.

**Theme:** dark · **Industry:** entertainment · **Source:** https://www.iorama.studio/chantlings · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Chantlings uses a near-black canvas, restrained white typography, and sparse amber accents to frame an atmospheric music app. Organic dark backdrop shapes, character artwork, and generous negative space make the long page feel like a quiet visual journey.

## North star

Keep the page almost entirely black, using delicate white type, generous breathing room, and imagery as the main source of colour.

## Overview

The visual strategy is built around a true black canvas (#000000), letting white (#ffffff) typography and luminous product imagery emerge from the dark. Warm amber (#ffaa20) is reserved for a small inline collaboration link, while orange (#ff8800) marks the compact “NEW!” badge; neither colour becomes a broad background system. Mija webfont supplies a light, distinctive voice: oversized, delicate serif-like display lettering contrasts with clean, small supporting copy. The hero places text to the left of a tall phone mock-up, with the app artwork providing the page’s richest colour. Farther down, centered explanatory passages alternate with offset feature copy, photography, and a hand-drawn system diagram. A recurring, low-contrast organic silhouette texture gives continuity without competing with content. The layout is intentionally spacious and vertically paced, with sparse controls, no card-heavy UI, and a restrained footer.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Stage Black | `#000000` | `--color-stage-black` | brand | Dominant page canvas and backdrop behind the hero, feature content, imagery, and footer. |
| Soft White | `#ffffff` | `--color-soft-white` | neutral | Primary headings, body copy, navigation marks, and the foreground of the orange NEW badge. |
| Amber Note | `#ffaa20` | `--color-amber-note` | accent | Small inline Heart of Noise link; keep it rare and text-led. |
| Signal Orange | `#ff8800` | `--color-signal-orange` | accent | The NEW! pill beside the welcome feature; a tiny, high-visibility badge accent. |

### Semantic aliases

`--color-canvas` → `#000000` (Stage Black) · `--color-text` → `#ffffff` (Soft White) · `--color-accent` → `#ff8800` (Signal Orange) · `--color-accent-2` → `#ffaa20` (Amber Note) · `--color-on-accent` → `#ffffff` (Soft White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ff8800` | `#000000` | 8.77:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Mija webfont | `--font-body` | webfont | 100, 300 | Used across headings, body copy, links, buttons, and navigation. | Cormorant Garamond |

- **Mija webfont:** Measured weights are 100 and 300. Keep the page’s light, airy lettering; use mixed case and avoid heavy, uppercase styling.

### Type scale — Minor Third (ratio ≈ 1.17, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 100 | 1.06 | 0 | — | Mija webfont | Large, light Chantlings hero title. |
| h2 | 25px | 100 | 0.8 | 0 | — | Mija webfont | Light section headings for the main content narrative. |
| h3 | 24px | 100 | 1.42 | 0 | — | Mija webfont | Supporting feature headings such as Harmonious and Connected. |
| body | 20px | 300 | 1 | 0 | — | Mija webfont | Introductory and explanatory paragraphs. |
| button | 25px | 100 | 0.8 | 0 | — | Mija webfont | NEW! badge and prominent button-like labels. |
| link | 24px | 100 | 1.5 | 0 | — | Mija webfont | Inline collaboration link and text navigation. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 10, 12, 15, 18, 22, 23, 24, 38, 40, 46, 65, 86, 100, 105, 108, 140 px.
- Section rhythm 100px · element gap 10px · card padding — · max content width 1250px.

A spacious, single-column scroll with a measured page max width of 1250px. The opening hero balances left-aligned title and copy against a tall phone mock-up on the right; subsequent sections use centered text, alternating offset feature blocks, and centered media or diagrams. The measured section gap is 100px and element gap is 10px, producing an unhurried vertical rhythm. Keep the overall density low and let the dark canvas separate each content moment.

## Shape & elevation

- Radius: button `9999px`
- No box shadows measured: the page is flat.

The measured system has no shadows or gradients, and no general border palette. Keep the page predominantly flat; the phone frame and small outlined App Store badge are the notable edge treatments. Organic background silhouettes sit behind content at low contrast, adding depth through imagery rather than UI elevation.

## Imagery

A tall phone mock-up is the hero’s central product proof, showing colorful character artwork against the dark page. Later content includes a cinematic photo of a person interacting with a device and a thin, hand-drawn technical diagram. Maintain dark framing and subdued contrast; the bright colour belongs mainly inside the app artwork, not in decorative page UI.

## Components

### Hero

Left-aligned Chantlings title and short introduction paired with a tall phone showcase; preserve substantial negative space.

### App Store badge

Compact outlined download badge below the hero copy, presented as a crisp white-on-dark asset.

### NEW badge

Small rounded orange pill with white text; measured background #ff8800 and white foreground.

### Feature narrative

Sparse text-led blocks for Harmonious, Lyrical, and Connected, offset across the page rather than contained in cards.

### Collaboration link

Inline Heart of Noise link in amber #ffaa20 within centered white copy.

### Process diagram

Thin, low-contrast hand-drawn flow diagram on black, used as an editorial media element rather than a boxed card.

### Footer

Minimal row of social icons, Newsletter/Press/Terms/Contact links, and copyright on the black canvas.

### Measured component styles

- **Primary button** (“NEW!”): background #ff8800 · text #ffffff · radius 50px · padding 18px 23px · 100 25px Mija webfont
- **Link** (“Newsletter”): transparent background · text #222222 · radius 0px · padding 0px · 100 14px Mija webfont
- **Navigation item**: transparent background · text #333333 · radius 0px · padding 0px · 100 14px Mija webfont

## Do

- Use #000000 as the dominant canvas.
- Set primary text in #ffffff.
- Reserve #ffaa20 for rare inline links.
- Use #ff8800 only for small badge emphasis.
- Place product imagery within large areas of negative space.
- Keep feature copy light, short, and vertically paced.

## Don't

- Do not introduce broad coloured section bands.
- Do not turn the layout into a card grid.
- Do not add unmeasured shadows or gradients.
- Do not use saturated colours outside product artwork.
- Do not crowd the hero with navigation or controls.
- Do not make typography heavy or shouty.

## Agent prompt

Build a new page in the Chantlings visual style: use Stage Black (#000000) for the dominant canvas and Soft White (#ffffff) for nearly all text. Keep Amber Note (#ffaa20) for occasional inline links and Signal Orange (#ff8800) for a rare small badge only. Use a light, expressive display face paired with restrained supporting copy; Mija webfont is the measured family, with Cormorant Garamond as a free substitute. Compose a spacious hero with text beside a tall product visual, then create a slow vertical sequence of centered narrative, offset feature copy, and editorial media. Keep a subtle organic dark backdrop behind content, but let product imagery supply the colour. Prefer flat surfaces, sparse outlines, and generous negative space over cards, shadows, or decorative UI.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Spacious dark hero with left-aligned title and copy beside a tall phone mock-up. | App Store download, product preview, scroll-led storytelling | black canvas, light display title, organic backdrop, outlined download badge |
| 2 | footer | Minimal horizontal footer row on the continuing black canvas. | social links, site navigation, copyright | small white labels, compact icon row, flat dark background |

## Source CSS custom properties (selected)

```css
--_apps---typography--heading-font: "Mija webfont",sans-serif;
--_apps---typography--body-font: "Mija webfont",sans-serif;
--_apps---typography--button-font: "Mija webfont",sans-serif;
--_apps---sizes--radius: 20px;
--_apps---colors--background: #fff;
--_apps---colors--foreground: #333;
--_apps---colors--card: #fff;
--_apps---colors--card-foreground: #060606;
--_apps---colors--popover: #f2f2f2;
--_apps---colors--popover-foreground: #060606;
--_apps---colors--primary: #ccab29;
--_apps---colors--primary-foreground: #100d04;
--_apps---colors--secondary: #fff5ca;
--_apps---colors--secondary-foreground: #0f0d08;
--_apps---colors--muted: #f8f8f8;
--_apps---colors--muted-foreground: #7d797a;
--_apps---colors--accent: #e4e4e4;
--_apps---colors--accent-foreground: #0d0d0d;
--_apps---colors--destructive: #d5455f;
--_apps---colors--border: #000;
--_apps---colors--input: #000;
--_apps---colors--ring: #f7df8b;
--_apps---sidebar--sidebar-foreground: #060606;
--_apps---sidebar--sidebar-primary: #ccab29;
--_apps---sidebar--sidebar-primary-foreground: #100d04;
--_apps---sidebar--sidebar-accent: #e4e4e4;
--_apps---sidebar--sidebar-accent-foreground: #0d0d0d;
--_apps---sidebar--sidebar-border: #000;
--_apps---colors--background-dark: #030303;
--_apps---colors--foreground-dark: #f8f8f8;
--_apps---colors--card-dark: #141414;
--_apps---colors--card-foreground-dark: #f8f8f8;
--_apps---colors--popover-dark: #141414;
--_apps---colors--popover-foreground-dark: #f8f8f8;
--_apps---colors--primary-dark: #ffde66;
--_apps---colors--primary-foreground-dark: #080601;
--_apps---colors--secondary-dark: #211400;
--_apps---colors--secondary-foreground-dark: #faf8f1;
--_apps---colors--muted-dark: #010101;
--_apps---colors--muted-foreground-dark: #868686;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/iorama-studio-chantlings