Kata colors and gradients
==========================

The same palette is in colors.json (data) and kata-colors.ase (swatches).

Ink and ground
--------------
Ink              #2d3233   Mineral Black, text and letterforms, never pure black
Ground           #fafaf8   the one continuous paper ground
Panel            #ffffff   raised surfaces
Panel 2          #f2f4f0   soft fills, a breath of sage
Line             #e7eae4   hairline borders
Line strong      #dde1da   stronger borders
Ink dim          #5c6360   secondary text
Ink faint        #8a918c   tertiary text and labels

Brand gradients
---------------
Kata sage        #96a48d -> #dae3cf   THE MARK, on its own supplied axis,
                                      verbatim. Since gradients v2 the
                                      sage fill pair is the same two hexes.
Mineral Black    #000000 -> #2d3233   the black pair, and the default
                                      filled button.

THE ONE GEOMETRY: every gradient fill is vertical, bottom to top. The
STRONG colour sits at the bottom edge (0%), ramps upward, and the LIGHT
colour is fully reached at 72%, holding light from there to the top:

    linear-gradient(0deg, STRONG 0%, LIGHT 72%)

Light falls from above. Buttons follow the same rule with the same pair:
no sheen, no inset edge, no shadow, no lift. Hover deepens, never
brightens. The label on a filled button is always white and never black.
The one exception is the mark and the supplied icon art, which keep
their own gradient axis and are never re-axised.

Area gradients (STRONG 0% -> LIGHT 72%, bottom to top)
------------------------------------------------------
kata     Brand         #96a48d -> #dae3cf
train    Train         #87a266 -> #c5dba5
water    Focus, water  #4e6391 -> #a1b1ce
sleep    Sleep         #9e79d3 -> #bba6dd
fuel     Nutrition     #9e6a7f -> #ccaebe
today    Today         #e2845a -> #f2dac9
mind     Mind          #4b8599 -> #a3c5ce
coach    Coach         #000000 -> #2d3233
alert    Alert         #cd7966 -> #f3d5c9

The control tiers, gradients v2
-------------------------------
A coloured surface is one of three things and each gets a different
treatment. Only the thing you press is saturated.

TIER 1, the primary action (the pair itself, white label at body scale)
------------------------------------------------------------------------
A filled pill carries its family's pair on the one geometry: strong at
the foot, light fully reached at 72%. White, measured against the
vertical MIDPOINT of that fall (where a centred label sits), then the
strong and light ends, against #ffffff:

mineral     #000000 -> #2d3233   mid 15.87   strong 21.00   light 13.00
water       #4e6391 -> #a1b1ce   mid  2.87   strong  5.97   light  2.17
fuel        #9e6a7f -> #ccaebe   mid  2.52   strong  4.36   light  2.03
sleep       #9e79d3 -> #bba6dd   mid  2.50   strong  3.43   light  2.18
mind        #4b8599 -> #a3c5ce   mid  2.31   strong  4.11   light  1.84
train       #87a266 -> #c5dba5   mid  1.79   strong  2.84   light  1.49
alert       #cd7966 -> #f3d5c9   mid  1.76   strong  3.22   light  1.38
today       #e2845a -> #f2dac9   mid  1.65   strong  2.73   light  1.34
sage        #96a48d -> #dae3cf   mid  1.60   strong  2.63   light  1.32

STATED HONESTLY: only mineral clears 4.5, which is why the DEFAULT
button everywhere is the black pair and small pills stay black. A page
that owns a colour runs its own pair and accepts the softer number.
Record the numbers; never call this set AA, and never solve it with
type size or by darkening the pair: the pair is the pair.

TIER 2, state not action (pale wash, family ink)
-------------------------------------------------
Kickers, segmented controls, language pills, tags. A pretitle tag is not
a button, so the no-black-label rule does not reach it: this is coloured
ink on a pale wash, recomputed from the v2 light ends.

sage        #626f59 on #eef2e9   4.70
train       #5b6e43 on #e5efd7   4.70
water       #4a5e8a on #d5dce9   4.68
sleep       #743fc0 on #e0d7f0   4.71
fuel        #815466 on #e8dbe2   4.62
today       #b24c1f on #f9eee7   4.67
mind        #3b6978 on #d6e5e9   4.67
alert       #a5503a on #faece7   4.78

An active segment may take the filled-pill treatment with a white label
so the selected one stands out from its pale siblings. That is the only
place the two tiers meet.

TIER 3, grounds, washes and charts
-----------------------------------
The area gradients above. Do not move this layer to fix a tier 1 or
tier 2 problem.

Charts
------
Series      #87a266  #4e6391  #9e79d3  #9e6a7f  #e2845a  #4b8599  + ink
Positive    #87a266
Negative    #cd7966

Type
----
Articulat CF   one family, three roles
               Medium 500     titles
               Regular 400    body and interface
               DemiBold 600   emphasis, figures, buttons
Titles track tight: -0.032em at hero size, easing to -0.012em at 18px.
The font files are not in this pack: see fonts.txt.