Tokens and filters

§08 · Copy-ready. Names match the rest of this section. The code copy is packages/design-tokens/src/tokens.css in fuisl/coipe; fuisl/ceo-of-little-people and this repository keep verbatim copies in design-tokens/.

CSS tokens

/* core */
--paper:#F2F4F7; --card:#FFFFFF; --rule:#D3DAE6; --ink:#1F3FD6; --text:#0E1A3A;
--text-2:#2A3554; --muted:#6B7896; --muted-2:#5A5F6B; --grid:#E6EBFD; --tile:#E6EAF1; --graphite:#3A3F4B; --tape:#FFF7D6;
/* A · cyanotype ramp */
--prussian:#0B2380; --cobalt:#4561EE; --cornflower:#8FA2F5; --haze:#C6D1FB; --frost:#E6EBFD;
/* B · crayon pairs (line / fill) */
--coral:#E2553A; --peach:#FFC9B5;  --marigold:#C98A00; --butter:#FFE896;  --leaf:#2E9E5B; --mint:#BDEBD0;
--berry:#D63C84; --rose:#F8C6DD;   --grape:#6A4FD8; --lilac:#D3CCF8;     /* ink #1F3FD6 / haze #C6D1FB */
--lcd-low:#FF8A73;
/* lines */
--line-object:1.5px; --line-pencil:1.6px; --line-crayon:3-4px; --limb:4.5px; --shoe:9px;
--dash-hidden:4 3; --dash-center:10 3 2 3; --dash-guide:6 4; --dash-path:6 5;
/* shadows */
--shadow-hard:2px 3px 0 rgba(14,26,58,.22); --shadow-card:3px 4px 0 rgba(14,26,58,.18); --shadow-overlay:4px 6px 0 rgba(14,26,58,.2);
--shadow-paper: feDropShadow(dx 1.5, dy 2.5, σ 1.8, #0E1A3A @30%);
/* radii */
--r-a:0; --r-b2:4-6px; --r-tile:14px; --r-card:18px; --r-overlay:24px; --r-pill:h/2;

--line-crayon, --r-b2, --r-pill and --shadow-paper are documented ranges or filter specs, not usable CSS values. Read them; don't var() them.

SVG filters

<!-- B · paper shadow -->
<filter id="sh"><feDropShadow dx="1.5" dy="2.5" stdDeviation="1.8" flood-color="#0E1A3A" flood-opacity=".3"/></filter>
<!-- B · crayon -->
<filter id="cr"><feTurbulence type="fractalNoise" baseFrequency="1.4" numOctaves="2" seed="2" result="t"/>
 <feColorMatrix in="t" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 1.9" result="m"/>
 <feComposite in="SourceGraphic" in2="m" operator="in" result="c"/>
 <feTurbulence type="fractalNoise" baseFrequency=".05" numOctaves="2" seed="9" result="w"/>
 <feDisplacementMap in="c" in2="w" scale="4" xChannelSelector="R" yChannelSelector="G"/></filter>
<!-- B · watercolor wash -->
<filter id="wc"><feTurbulence type="fractalNoise" baseFrequency=".02" numOctaves="3" seed="8" result="n"/>
 <feDisplacementMap in="SourceGraphic" in2="n" scale="26" result="d"/><feGaussianBlur in="d" stdDeviation="2.4" result="b"/>
 <feTurbulence type="fractalNoise" baseFrequency=".6" numOctaves="2" seed="2" result="g"/>
 <feColorMatrix in="g" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.2 1.4" result="ga"/>
 <feComposite in="b" in2="ga" operator="in"/></filter>
<!-- B · grain (overlay rect, mix-blend-mode:multiply) -->
<filter id="gr"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="3" seed="7"/>
 <feColorMatrix type="matrix" values="0 0 0 0 .05 0 0 0 0 .1 0 0 0 0 .23 0 0 0 .12 0"/></filter>
<!-- C · pencil -->
<filter id="pc"><feTurbulence type="fractalNoise" baseFrequency="2" numOctaves="1" seed="3" result="t"/>
 <feColorMatrix in="t" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2 1.7" result="m"/>
 <feComposite in="SourceGraphic" in2="m" operator="in" result="c"/>
 <feTurbulence type="fractalNoise" baseFrequency=".03" numOctaves="2" seed="6" result="w"/>
 <feDisplacementMap in="c" in2="w" scale="3"/></filter>

Puzzle block clip

/* puzzle block outer clip */
clip-path: polygon(0 0,14px 0,18px 6px,30px 6px,34px 0,100% 0,100% 38px,34px 38px,30px 44px,18px 44px,14px 38px,0 38px);