ChordSketch — Design System

Brand

A white quill on a crimson field. Writing and notation.

Wordmark · Noto Sans JP 700

ChordSketch

Crimson appears as a large color field only inside the mark itself. Clearspace ≥ ¼ of mark height, or ≥ 24px next to the wordmark. Minimum 24px (mobile) / 32px (print). The mark sits on white or --ink-50; never on crimson.

Color

Crimson is the only accent. Ink — warm, slightly red — carries everything else.

Crimson

--crimson-50

#FDF2F5

--crimson-100

#FBE1E8

--crimson-300

#EC8AA3

--crimson-500 ★

#BD1642

--crimson-600

#A30F37

--crimson-700

#87092C

--crimson-900

#480418

Ink

--ink-0

#FFFFFF

--ink-50

#FAFAF7

--ink-100

#F6F4F7

--ink-200

#E8E6EA

--ink-300

#D4D1D6

--ink-500

#8A8790

--ink-600

#67646D

--ink-700

#44424A

--ink-1000

#0A0A0B

Semantic

Saved · 12:04

success#E8F3EC / #1A6B3A

Unsaved changes

warning#FBF1D9 / #8A5A07

Save failed. Check connection.

danger#FBE1E8 / #A30F37

Tip · ⌘K to search

info#E6EEF7 / #1F4F8A

Contrast

--ink-1000 on --ink-50 — 18.7:1 ✓
#fff on --crimson-500 — 6.2:1 ✓
--ink-500 is for supporting copy only.

Typography

Noto Sans JP for body and display. Inter for Latin metadata and eyebrow labels. JetBrains Mono for chord glyphs and source.

DisplayNoto Sans JP 900 · 60–72 / 1.05 · -0.03em

A library
for chord sheets.

H1Noto Sans JP 700 · 48 / 53 · -0.02em

Chapter 1 — Introduction

H2Noto Sans JP 700 · 36 / 40 · -0.02em

Section heading

H3Noto Sans JP 700 · 30 / 36 · -0.02em

Subsection heading

H4Noto Sans JP 700 · 24 / 32 · -0.01em

Small heading

H5Noto Sans JP 600 · 18 / 26

Helper heading

BodyNoto Sans JP 400 · 16 / 27

ChordSketch is a tool for searching, editing, and sharing chord sheets with lyrics for ChordPro and iReal Pro. From amateurs through professionals, every step of working with charts becomes smoother.

SmallNoto Sans JP 400 · 13 / 22

Last updated 2026-05-08 · 14 songs in this setlist

EyebrowInter 600 · 12 / 16 · +0.12em UPPER

Verse · Section A

MonoJetBrains Mono 600 · 14 / 26

{title: Country Roads}
{key: G}
[G]Almost heaven, [Em]West Virginia

MetaInter 500 · 13 / 22 · tabular-nums

BPM 82 · Key G · Capo 0 · 4/4

Chord-sheet typesetting

The heart of the product. Chord above, lyric below, both vertically stacked inside .pair — pairs flow as inline-flex.

Verse 1 · Country Roads

Country Roads

Key: G
Capo: 0
BPM: 82
Time: 4/4

Verse 1

GAlmost heaven, EmWest Virginia

DBlue Ridge Mountains, CShenandoah GRiver

Chorus

GCountry roads, Dtake me home

EmTo the place CI belong, GWest Virginia

Space

4pt baseline. Tokens scale from --sp-1 to --sp-32.

--sp-14 px

--sp-28 px

--sp-312 px

--sp-416 px

--sp-520 px

--sp-624 px

--sp-832 px

--sp-1040 px

--sp-1248 px

--sp-1664 px

--sp-2080 px

--sp-2496 px

--sp-32128 px

Radius

Restrained. Buttons 4px, cards 8px, modals 12px.

--r-1 · 2px

--r-2 · 4px

--r-3 · 8px

--r-4 · 12px

--r-full

Motion

A single curve, four durations. prefers-reduced-motion collapses durations to 0ms.

--dur-1

120ms · hover / focus

--dur-2

200ms · state

--dur-3

280ms · dialog

--dur-4

400ms · page

Easing — cubic-bezier(.2, .8, .2, 1) · --ease-out. No bounce.

Voice & Tone

Capable musicians. Strip ornament; be precise. No emoji. No exclamation marks.

Avoid	Use
Oops! Couldn't save your song… 🥲	Save failed. Check your connection.
Let's create a new song!	New song
Try adding your very first song now!	Add your first song