Foundations
Colors
Surface
One surface, not two. Every screen sits on the same warm brown ground with the carved pattern behind it. Cards are a step lighter than the ground, never darker.
Background
The ground. Every screen sits on this.
Theme.groundasset catalog1.0:1 on groundPatternBackground
The carved motif drawn over the ground, just off it.
Theme.patternasset catalog1.1:1 on groundCard
Cards, panels, wells, the loading bar's track.
Theme.deepasset catalog1.3:1 on groundText
Gold on brown is the whole family. There is no light text: what used to be cream is the title gold, and supporting text is the description brown.
TitleText
Titles, primary text, outlines and accents.
Theme.gold · Theme.creamasset catalog6.0:1 on groundDescriptionText
Descriptions, metadata, captions. Was #7A5E4E, which failed contrast.
Theme.description · Theme.stoneasset catalog4.4:1 on groundAction
The filled button is the one place in the app where dark type sits on a light slab; the two colors are a pair and move together. The secondary slab is darker than the ground, so it reads as a control rather than another card. The glass button has no color of its own: it takes it from what is behind it.
Tertiary
The filled button's slab.
Theme.buttonFillasset catalog11.2:1 on groundLaunchBackground
Type on the button fill. Only correct on Tertiary.
Theme.onButtonFillasset catalog1.0:1 on groundButtonSecondary
The secondary button's slab, with gold type.
Theme.buttonSecondaryasset catalog1.1:1 on groundLoadingBar
Progress: the splash's loading line.
Theme.progressasset catalog1.9:1 on groundInstrument
The gangsa on the splash and landing screens. The bilah are bronze; a struck key lights, and the one before it is damped.
Bronze
The bilah themselves.
Theme.bronzeTheme.swift7.0:1 on groundKeyHighlight
A bilah as it is struck.
Theme.keyHighlightasset catalog10.9:1 on groundKeyDampened
A bilah the free hand has just stopped ringing.
Theme.keyDampenedasset catalog2.7:1 on groundPelawah
The carved frame and the mallet.
gangsa-table.svg · mallet.svgartwork2.0:1 on groundRail
The red line the bilah rest on.
gangsa-table.svgartwork1.9:1 on groundThe two halves
Polos and sangsih keep their own color wherever they appear (the score, the picker cards, the mixer chips) so the interlock reads at a glance. The designed note tiles use a deeper pair; see Note tile.
Polos
The steady half, on the beat.
Theme.polosVoiceTheme.swift6.0:1 on groundSangsih
The answering half, between the beats.
Theme.sangsihVoiceTheme.swift4.9:1 on groundPlay screen
The bilah on the play screen, as designed. Each state is a fill, a lighter ring and an inner strip; these are the fills. There are two verdicts, Great and Miss, shown as an aura of the key's color with the word inside. There is no separate wrong-key state for now.
Great
A strike on time, on the right bilah.
ring #DEFEE5 · inner #4CC294designed, not built10.7:1 on groundNext
The bilah to strike next.
ring #FFE2B6 · inner #C2975Adesigned, not built8.3:1 on groundMiss
A note that was not struck in time.
ring #B43D54 · inner #BD5267designed, not built2.0:1 on groundDamped
A bilah at rest, stopped ringing.
ring #2B211C · inner #7B5F39designed, not built1.8:1 on groundJudgement (current)
What the app colors a strike with today. Warmed towards the palette, but kept clearly green, red and amber to read at a glance mid-stroke. The play-screen states above replace these when they are built, and Wrong goes.
Hit
A correct strike.
Theme.hitTheme.swift6.2:1 on groundMiss
A missed note. Also destructive actions.
Theme.missTheme.swift3.2:1 on groundWrong
The wrong bilah.
Theme.wrongTheme.swift7.0:1 on groundColotomic
Gong, kempur and kajar frame the cycle rather than carry a part, so they belong to the ground: one quiet warm family underneath the voices.
Gong
The gong at the end of each cycle.
Theme.gongTheme.swift11.7:1 on groundKempur
The kempur's mid-cycle stroke.
Theme.kempurTheme.swift7.0:1 on groundKajar
The kajar's steady pulse.
Theme.kajarTheme.swift5.4:1 on groundIn the catalog, not in use
Defined in the asset catalog but not read by any code yet. Use them or remove them before they become a second, unofficial palette.
Text
A light text color.
—unused13.6:1 on groundSubtle
A light supporting color.
—unused8.2:1 on groundContrast
WCAG asks 4.5:1 for body text and 3:1 for large text (24px, or 19px bold) and interface parts. The description color was raised from #7A5E4E (last row) to pass large text everywhere; at 4.4:1 on the ground it is still a hair under 4.5:1, so keep it for supporting text at 15pt and up, not for long body copy.
| Pair | Sample | Ratio | Result |
|---|---|---|---|
| Title text on the ground | Kotekan | 6.05:1 | AA |
| Title text on a card | Kotekan | 4.77:1 | AA |
| Title text at 75%, as descriptions are set | Kotekan | 4.05:1 | AA Large |
| Title text at 62%, on a settings card | Kotekan | 2.76:1 | Fail |
| Description text on the ground | Kotekan | 4.41:1 | AA Large |
| Description text on a card | Kotekan | 3.47:1 | AA Large |
| Label on the filled button | Kotekan | 11.21:1 | AAA |
| Secondary button label | Kotekan | 6.87:1 | AA |
| Previous description #7A5E4E on the groundreplaced | Kotekan | 2.66:1 | Fail |