A little color.
A lot of curiosity.
A visual language for music, learning, and the ideas that connect them.
The article header
Every post opens the same way: a large solid-color title, an optional italic subheading, and an optional author bio. These styles live in the design system, so a post's header needs content only.
The Science of Music Education
An interview with Chuan C. Chang
About the author
Chuan C. Chang is the author of Fundamentals of Piano Practice, a guide to learning piano more efficiently. Read the full interview.
Title uses --ds-text-title, the subheading uses --ds-text-subtitle, and the bio heading is a sentence-case heading rather than an uppercase label. No outline or background panel surrounds the header.
Every hue has a place.
All 27 palette colors. These swatches stay fixed when the theme changes; they are the source palette, not automatic text and background pairings. Deep Periwinkle is the light-mode link color.
Blush
#FFC9C1
Accent Hot
#FF3D6E
Stage Orange
#F15A24
Orange
#FF7238
Signal Yellow
#FFCD06
Forest
#085C34
Session Green
#2ECF76
Bright Mint
#00F5C4
Soft Mint
#9FC5B8
Accent Electric
#4DE6FF
Blue Note
#57B6E8
Periwinkle
#9FA8FF
Deep Periwinkle
#4E55B8
Electric Indigo
#4D49FD
Electric Purple
#8A45E8
Mid Purple
#B97BFF
Light Purple
#D4AAFF
Smoke
#8A8AA8
Almost Black
#1F2020
Deep Indigo
#17133F
Deep Smoke
#2A2A3D
Dark Grey
#2C2C2C
Pure White
#FFFFFF
Cream
#FFF9EE
White Violet
#F0EEFF
Warm Paper
#F6F1E8
Bone
#EEEAE7
Same story. Different light.
Dark mode applies the right-hand palette; light mode restores the left. Background, type, links, and controls change together. The blue and orange artwork accents intentionally stay fixed.
| Role | Light | Dark |
|---|---|---|
| Page background | Warm Paper #F6F1E8 |
Almost Black #1F2020 |
| Boxes, cards and surfaces | Cream #FFF9EE |
Deep Smoke #2A2A3D |
| Primary and outlined-button text | Deep Indigo #17133F |
Cream #FFF9EE |
| Secondary text | Dark Grey #2C2C2C |
Bone #EEEAE7 |
| Borders, button outlines and focus | Deep Indigo #17133F |
Periwinkle #9FA8FF |
| Links and hover states | Deep Periwinkle #4E55B8 |
Periwinkle #9FA8FF |
| Optional title gradient / start | Forest #085C34 |
Bright Mint #00F5C4 |
| Optional title gradient / middle | Deep Indigo #17133F |
Light Purple #D4AAFF |
| Optional title gradient / end | Stage Orange #F15A24 |
Orange #FF7238 |
| Artwork / cool | Blue Note #57B6E8 |
Blue Note #57B6E8 |
| Artwork / warm | Orange #FF7238 |
Orange #FF7238 |
Clear voice. Comfortable reading.
Benigne Sans is reserved for the Modern Musicology wordmark. Lexend gives headings their character. Montserrat carries paragraphs, captions, and interface text.
Wordmark · Benigne Sans 700
Modern Musicology
Brand wordmark only. Keep its natural letterforms and casing.
Headings · Lexend 700
Ideas worth
listening to.
Aa Bb Cc 0123456789
Bold, open forms. Responsive sizing. Clear hierarchy.
Paragraphs · Montserrat 400
Exploring how research, practice, and real-world teaching come together to help every musician learn more effectively.
Body: 18px · Line height: 1.75
Small text: 14px · Paragraphs run the full content width
Type scale
Each size is a design token, so changing a token resizes that level across the whole site.
Article title
An italic subheading under the title
Section heading
Subsection heading
Body text for comfortable long-form reading.
Small text for captions, sources, and notes.
Give each idea room.
Related elements sit together. Larger gaps separate new ideas. Article copy runs the full width of the shared site container, while captions and attributions stay close to the content they describe.
An interview with Chuan C. Chang
His unique scientific approach to learning the piano stems from the frustration he experienced as a piano student and the longing for more effective learning methods.
“Mental play is not difficult, and everybody does it.”
Chuan C. Chang · The Science of Music Education
Quotes are set in Lexend with a small citation beneath and no colored rule. In interviews, questions are smaller and italic, answers are larger, and exchanges are separated by space rather than divider lines.
Useful, quiet, consistent.
Buttons use simple rectangular outlines with no animation or offset fills, and a visible focus ring marks keyboard focus. Links use Deep Periwinkle in light mode and Periwinkle in dark mode.
Buttons and links
Resource and book boxes
Used for resource lists, book lists, and product links. The whole box is the link; the border and title shift to the link color on hover.
Table of contents
A single surface box with a two-column list of links, spanning the full content width. Items are not numbered.
Video embeds
Modern Musicology style guide · light and dark