❦ ♫ ✦ ♫ ❦

Mozart's Study

A design system composed in candlelight

♩ ♪ ♫ ♪ ♩

Drawn from the warmth of mahogany writing desks, the glow of beeswax candles on manuscript paper, and the quiet discipline of quill on parchment. Every element in this system echoes the precision and beauty of classical composition — measured, deliberate, and rich with history.

Section 01

Color Palette

The palette of an 18th-century study — parchment and ink, mahogany and gold, burgundy wax seals and forest-green baize.

Manuscript & Parchment

Manuscript Cream #f5f0e1
Cream Dark #e8e0cb
Parchment Edge #d9c59c
Card White #faf7f0

Ink & Shadow

Ink Black #1a1410
Ink Faded #3d352e
Staff Gray #8a7e6e
Staff Gray Light #b0a594

Mahogany

Mahogany Dark #2e1212
Mahogany #4a2020
Mahogany Light #6b3030

Antique Gold

Gold Dark #9a7b2e
Antique Gold #c5a24d
Gold Light #e3cf8a
Candlelight #f0d78c
Candlelight Warm #e09d37

Burgundy & Forest

Burgundy Dark #4a1c28
Burgundy #6b2d3e
Burgundy Light #8e3d52
Forest Green #2d4a3e
♫ ❦ ♫
Section 02

Typography

Four voices in harmony — display, accent, heading, and body — each chosen for its affinity with the music and manuscripts of the Classical era.

Cinzel Decorative — Accent

--font-accent · Cinzel Decorative
Allegro con Brio
Eine Kleine Nachtmusik
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Weights: 400, 700 · Use: Titles, hero text, monograms

Cinzel — Display

--font-display · Cinzel
Sonata in C Major
Concerto for Piano and Orchestra
The Marriage of Figaro, K. 492
Section headers, navigation labels, button text
Weights: 400, 600, 700, 900 · Use: Section titles, labels, UI elements

Cormorant Garamond — Heading

--font-heading · Cormorant Garamond
Requiem in D Minor
Symphony No. 40 in G Minor, K. 550
Composed during the final months in Vienna, this work represents the pinnacle of Classical-era orchestral writing.
Subheadings, descriptions, captions, pull quotes
Weights: 300, 400, 600, 700 + italics · Use: Subheadings, descriptions, emphasis

Crimson Pro — Body

--font-body · Crimson Pro
Wolfgang Amadeus Mozart composed over 600 works during his short life, many acknowledged as pinnacles of symphonic, concertante, chamber, operatic, and choral music. His output in every genre was astonishing both in quantity and in consistent quality.
The study where he composed was a modest room, warmed by candlelight, its desk scattered with half-finished manuscripts and a worn quill. It was in this quiet space that some of the most celebrated music in Western history was born.
Small text · Captions · Footnotes · Metadata
Weights: 300, 400, 600 + italics · Use: Body text, paragraphs, UI copy

Type Scale

3.5rem / 56px Opus
2.5rem / 40px Allegro
2rem / 32px Andante
1.5rem / 24px Adagio Cantabile
1.25rem / 20px Menuetto e Trio
1rem / 17px The body text of the composition, where the melody unfolds at a natural reading pace.
0.875rem / 14px Smaller annotations, footnotes, and marginalia
0.75rem / 12px Labels · Overlines · Metadata

Drop Capital

In the tradition of illuminated manuscripts, the drop cap signals the opening of a new movement. Rendered in Cinzel Decorative, it establishes visual gravity at the head of any passage.

Music is the one incorporeal entrance into the higher world of knowledge which comprehends mankind but which mankind cannot comprehend. The study of counterpoint and harmony, of fugue and sonata form, demands the same rigorous discipline as mathematics, yet speaks to the soul in ways that numbers never could. In the quiet hours before dawn, by the light of a single candle, the composer sets quill to paper and begins the careful work of translating the music he hears in his mind into the notation that will preserve it for centuries to come.

♩ ✦ ♪ ✦ ♩
Section 03

Spacing

Like rests in music, spacing gives rhythm and breath to the composition. Built on a 4px base unit, each increment doubles the sense of openness.

Scale

--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-7
--space-8
--space-9
--space-10

Visual Reference

Each box below is sized to its spacing token, demonstrating the proportional relationship between values.

24
32
48
64
96
128

Application

Padding & Margins

Use smaller tokens (--space-1 through --space-3) for tight internal component spacing. Medium tokens (--space-4 through --space-6) suit card padding and element gaps. Larger tokens (--space-7 through --space-10) provide section-level breathing room — the grand rests between movements.

space-2 padding
space-4 padding
space-6 padding
♪ ❦ ♫ ❦ ♪
Section 04

Buttons

Each button is a deliberate act — like pressing a key on the fortepiano. Primary actions glow with antique gold; secondary commands rest in rich mahogany.

Primary — Antique Gold

The principal voice. Use for the most important action on any page.

Secondary — Mahogany

A supporting voice — strong but subordinate to the primary action.

Burgundy

For destructive or emphatic actions — the wax seal on a decisive letter.

Outline

Understated elegance. The outline button steps back, letting the primary voice lead.

Ghost

The pianissimo of buttons — barely there until hovered, ideal for tertiary actions and navigation.

Disabled States

When the ink has run dry. Disabled buttons are muted and unresponsive.

Composition

Buttons in context, as they might appear in a toolbar or dialog.

Publish Manuscript?

This will send your composition to the publisher in Leipzig. This action cannot be undone.

❦ ♫ ♪ ♫ ❦
Section 05

Forms

Every field is a line on the manuscript — waiting to receive the composer's notation. Inputs rest on parchment; focus brings the warm glow of candlelight.

Text Inputs

✓ Valid Köchel number
✗ Please enter a valid opus number (e.g. Op. 15)

Textarea

Written in the hand of the composer, for the benefit of the audience.

Select

Checkboxes & Radios

Instrumentation

Tempo

Complete Form — “Compose a New Work”

Compose a New Work
Complete the manuscript details below to begin your composition

Instrumentation

♩ ✦ ♪ ✦ ♩
Section 06

Cards & Panels

Manuscript pages, each bearing a distinct passage. Stacked like the loose leaves on a composer's writing desk, rich with the texture of parchment and the gleam of gold leaf.

Accent Cards

Topped with a colored accent border — gold for principal themes, mahogany for secondary, burgundy for emphasis.

Opus I
Sonata in C Major
An opening statement of confidence and clarity. The first subject announces itself with a bright, unadorned melody over a simple Alberti bass.
K. 545 · 1788 · 3 movements
Opus II
Requiem in D Minor
The final, unfinished work — a meditation on mortality composed in deepening shadow, its Lacrimosa breaking off after only eight bars.
K. 626 · 1791 · Incomplete
Opus III
Don Giovanni
A dramma giocoso of unmatched dramatic power. The overture plunges the listener into a world where comedy and tragedy are inseparable.
K. 527 · 1787 · 2 acts

Stacked Paper Cards

The layered-page shadow evokes a sheaf of manuscript pages, loose on the desk.

Manuscript
The Jupiter Symphony
The culminating orchestral work, its finale a five-voice fugue of astonishing complexity woven from the simplest of themes.
K. 551 · Symphony No. 41
Manuscript
Eine Kleine Nachtmusik
A serenade of effortless grace — composed, tradition holds, in a single evening. Its opening theme is among the most recognized melodies in all of Western music.
K. 525 · Serenade No. 13

Score Cards

Decorated with faint staff lines across the top, evoking a page of orchestral score.

Piano Concerto No. 21
The slow movement's Elvira Madigan theme floats above murmuring strings — a melody of such serene beauty that it has transcended its concert origins entirely.
K. 467 · Andante · 1785
Clarinet Concerto in A
Written for Anton Stadler, this concerto exploits the clarinet's full range with an autumnal warmth that suggests farewell — it was among the last works Mozart completed.
K. 622 · Adagio · 1791

Horizontal Cards

A wider format for featured content, with an icon panel at left.

The Magic Flute
A singspiel of Masonic symbolism and fairy-tale wonder, blending the sublime Queen of the Night coloratura with Papageno's earthy comedy.
K. 620 · Opera · 1791
The Marriage of Figaro
An opera buffa of intricate ensemble writing — the Act II finale builds for twenty minutes through seven distinct sections without a single seam.
K. 492 · Opera · 1786
❦ ♫ ✦ ♫ ❦
Section 07

Alerts & Notifications

Marginal annotations in the composer's hand — notes of guidance, caution, and emphasis written in the margins of the score.

♩ Nota Bene
A point of information
The development section modulates through three remote keys before returning to the tonic. Pay close attention to the enharmonic pivot in bar 94.
♫ Da Capo
Composition saved successfully
Your manuscript has been preserved in the archive. The cataloguer has assigned it K. 614 and noted the dedication to Count Walsegg.
♪ Fortissimo
Attention required
The horn part in the third movement exceeds the range of the natural horn in E♭. Consider revising bars 142–156 or specifying the use of crooks.
✖ Sforzando
Critical error in the score
Parallel fifths detected between the soprano and bass voices in bars 28–30. This contravenes the strict counterpoint rules established in the exposition.
♪ ❦ ♫ ❦ ♪
❦ ♫ ♪ ♫ ❦
Section 09

Design Principles

Five movements that govern every decision in this system — drawn from the language of musical composition itself.

Principle I
Harmony

Colors must work in concert, never in isolation. As voices in a chorale resolve to consonance, so must every hue on the page support its neighbours. Test combinations in context; a gold that gleams beside mahogany may clash against burgundy if the proportions are wrong.

Principle II
Counterpoint

Contrast is the engine of clarity. Light against dark, serif against sans-serif, ornament against white space — each element gains meaning through opposition. Without counterpoint, a composition dissolves into monotony; without contrast, a design becomes invisible.

Principle III
Tempo

Spacing sets the pace at which the eye reads the page. Tight spacing creates urgency and density — the presto of a final movement. Generous margins and breathing room invite contemplation — the adagio that lets a melody unfold. Match the tempo to the content's purpose.

Principle IV
Dynamics

Visual hierarchy is the art of controlled loudness. A fortissimo headline commands the stage; a pianissimo caption recedes to its supporting role. Every element should occupy its proper dynamic level, ensuring the eye is drawn first to what matters most.

Principle V
Coda

Every composition needs a considered ending. Footers, closing states, and final interactions should resolve the experience with the same care as an opening. The coda is not an afterthought — it is the last impression, and it must satisfy.