Colour
The palette is deliberately narrow and most of it is spoken for. The website gets four: ash for the page, ink for the band, ember for every accent, and lamp for the gold that may only appear on a band. The apps get clay and sepia, which are warm, because a page of scripture held at six in the morning wants warm paper and a landing page does not. Everything else carries a product meaning that would be spent if it were borrowed to look attractive.
Raw values. Never referenced from component code on any platform.
Warm neutral ramp. Paper, ink and chrome for every theme.
Printed paper ramp. Used only by the Paper reader theme, which imitates a warm book page rather than a screen.
Near neutral ramp with only a trace of warmth left in it, used by the public website. It exists because the website base is pure white and the clay ramp is decidedly warm: on a white page clay reads as beige rather than as a neutral. The residual warmth, a maximum channel spread of twelve at the middle of the ramp, is deliberate, so that ember still looks like it belongs on the page instead of being the only warm thing on a cold one. The apps and the reader themes do not use this family: a page of scripture held at six in the morning wants warm paper, and a landing page does not.
The brand ground. A deep warm near black with real chroma in it, used for the dark editorial bands on the website and for the whole Evening web theme. It is a brand colour rather than a neutral: ash is what the site is printed on, ink is what it is printed with. The warmth is the point. Gold on a cold black looks like a technology company; gold on a warm ink looks like the gilt edge of a bound Bible, which is the one ornament this product has actually earned.
The Ardent brand hue. A warm fired clay. Primary actions, accents, chapter numerals, the Emmaus margin mark.
Warm gold. The reading lamp: the verse currently being spoken, caution states, and the amber highlight.
Calm teal. Reserved for the safety help card and the teal highlight. It never carries a marketing or navigation meaning.
Growing green. Success, completion, answered prayer, the olive highlight.
Deep red. Danger, destruction and failure in chrome only. It is never used inside the verse column.
Words of Christ only. A dedicated family so that tuning the danger palette can never change the appearance of scripture.
Cool slate blue. Information, offline and sync states, the slate highlight.
Warm pink. Used only by the rose highlight.
Each row names a purpose and resolves to a primitive. Component code only ever asks for one of these.
| surface.canvas | ash.0 | |
| surface.raised | ash.0 | |
| surface.sunken | ash.50 | |
| surface.inverse | ink.950 | |
| surface.inverseRaised | ink.900 | |
| surface.accentSubtle | ember.50 | |
| surface.scrim | ink.1000 | |
| surface.band | ink.950 | |
| surface.bandRaised | ink.900 | |
| text.primary | ash.900 | |
| text.secondary | ash.700 | |
| text.muted | ash.600 | |
| text.accent | ember.700 | |
| text.overline | ember.700 | |
| text.onAccent | ash.0 | |
| text.onInverse | clay.50 | |
| text.onInverseMuted | clay.300 | |
| text.onBand | clay.50 | |
| text.onBandMuted | clay.300 | |
| text.onBandSubtle | clay.400 | |
| border.subtle | ash.100 | |
| border.default | ash.200 | |
| border.strong | ash.500 | |
| border.accent | ember.600 | |
| border.onInverse | ink.400 | |
| border.onBand | ink.400 | |
| accent.fill | ember.600 | |
| accent.fillHover | ember.700 | |
| accent.fillPressed | ember.800 | |
| accent.onFill | ash.0 | |
| accent.quiet | ember.50 | |
| accent.focusRing | ember.600 | |
| accent.gold | lamp.300 | |
| accent.onGold | ink.950 |
| surface.canvas | ink.950 | |
| surface.raised | ink.900 | |
| surface.sunken | ink.1000 | |
| surface.inverse | clay.50 | |
| surface.inverseRaised | ash.0 | |
| surface.accentSubtle | ember.800 | |
| surface.scrim | ink.1000 | |
| surface.band | ink.950 | |
| surface.bandRaised | ink.900 | |
| text.primary | clay.50 | |
| text.secondary | clay.300 | |
| text.muted | clay.400 | |
| text.accent | ember.300 | |
| text.overline | ember.300 | |
| text.onAccent | ink.950 | |
| text.onInverse | clay.900 | |
| text.onInverseMuted | clay.700 | |
| text.onBand | clay.50 | |
| text.onBandMuted | clay.300 | |
| text.onBandSubtle | clay.400 | |
| border.subtle | ink.850 | |
| border.default | ink.800 | |
| border.strong | ink.400 | |
| border.accent | ember.400 | |
| border.onInverse | clay.500 | |
| border.onBand | ink.400 | |
| accent.fill | ember.400 | |
| accent.fillHover | ember.300 | |
| accent.fillPressed | ember.500 | |
| accent.onFill | ink.950 | |
| accent.quiet | ember.800 | |
| accent.focusRing | ember.300 | |
| accent.gold | lamp.300 | |
| accent.onGold | ink.950 |
Computed here with the same WCAG 2.1 maths the CI gate uses. Across the whole system 478 pairs are declared and none fails.
| Pair | Ratio | Grade |
|---|---|---|
| Body text on the pagetext.primary on surface.canvas | 16.99 | AAA |
| Supporting texttext.secondary on surface.canvas | 8.01 | AAA |
| Captions and metadatatext.muted on surface.canvas | 5.38 | AA |
| Links and the accent word in a headingtext.accent on surface.canvas | 8.34 | AAA |
| A label inside a primary buttontext.onAccent on accent.fill | 5.90 | AA |
| The same button, hoveredtext.onAccent on accent.fillHover | 8.34 | AAA |
| Text in a dark sectiontext.onInverse on surface.inverse | 17.21 | AAA |
| Supporting text in a dark sectiontext.onInverseMuted on surface.inverse | 9.87 | AAA |
| A control boundaryborder.strong on surface.canvas | 3.53 | 3:1 |
| The focus ringaccent.focusRing on surface.canvas | 5.90 | AA |
| Pair | Ratio | Grade |
|---|---|---|
| Body text on the pagetext.primary on surface.canvas | 17.21 | AAA |
| Supporting texttext.secondary on surface.canvas | 9.87 | AAA |
| Captions and metadatatext.muted on surface.canvas | 6.83 | AA |
| Links and the accent word in a headingtext.accent on surface.canvas | 8.46 | AAA |
| A label inside a primary buttontext.onAccent on accent.fill | 6.09 | AA |
| The same button, hoveredtext.onAccent on accent.fillHover | 8.46 | AAA |
| Text in a dark sectiontext.onInverse on surface.inverse | 15.94 | AAA |
| Supporting text in a dark sectiontext.onInverseMuted on surface.inverse | 8.27 | AAA |
| A control boundaryborder.strong on surface.canvas | 3.52 | 3:1 |
| The focus ringaccent.focusRing on surface.canvas | 8.46 | AAA |
Borders named border.subtle and border.default are decorative rules and are exempt from 1.4.11 on purpose. Any boundary that delimits an interactive control uses border.strong, which is measured above.
Rendered from the reader tokens themselves rather than approximated, so what is below is exactly what the app puts on a phone. These belong to the apps; the website does not use them and may not.
24
32Did not our heart burn within us while He talked with us on the road?
The words of Christ, in their own family.
24
32Did not our heart burn within us while He talked with us on the road?
The words of Christ, in their own family.
24
32Did not our heart burn within us while He talked with us on the road?
The words of Christ, in their own family.
24
32Did not our heart burn within us while He talked with us on the road?
The words of Christ, in their own family.
24
32Did not our heart burn within us while He talked with us on the road?
The words of Christ, in their own family.
Gold on a warm ink measures 9.83 to 1, which is why it can carry a heading rather than only an ornament. On the white page it measures far less and means something else entirely.
Gold on the band
Did not our heart burn within us?
surface.band
ink.950
surface.bandRaised
ink.900
accent.gold
lamp.300
text.onBand
clay.50
A band is dark in both themes on purpose. A photographic band that inverted with the theme would put light text on a light ground, so surface.band resolves to the same value in Morning and Evening and is declared twice in the checker anyway.
Rule
There is no purple at any step, and there is no decorative gradient in the system. The brand accent is a warm orange rather than the blue every other product reaches for, it belongs to the Ardent name, and it sits far enough from both the scripture red and the danger red that nobody has to work out which red they are looking at. Gold is the only second accent, it is confined to the band, and it earns its place by measuring 9.83 to 1 there rather than by being pretty.