DIGITAL AGENCY / MANUAL
Color
#111111--ink#777774--muted#f5f5f2--paper#fff--white#d9d9d4--line#ff00c8--accent#c20099--accent-text#e500b4--accent-hover#62625e--body-text#aaa--dark-body-text#999992--dark-mutedGuidelines & specifications
Use the following digital sRGB colors. tokens.css contains the reusable definitions.
| Token | Value | Role |
|---|---|---|
--ink | #111111 | Main text on light surfaces; dark section background |
--paper | #f5f5f2 | Warm off-white page and section background |
--white | #ffffff | White services surface; text on dark surfaces |
--muted | #777774 | Secondary phrases in large light-surface headings |
--line | #d9d9d4 | Quiet separators and light-surface control borders |
--accent | #ff00c8 | Brand mark, logo dot, title dot, decoration, filled actions and focus ring |
--accent-text | #c20099 | Small accent text and links on light surfaces |
--accent-hover | #e500b4 | Hover background for the main filled action |
Additional existing text colors are #62625e for supporting copy on light surfaces, #aaaaaa for supporting copy on dark surfaces, and #999992 for muted dark-surface heading phrases. The token file names these --body-text, --dark-body-text, and --dark-muted; those names are introduced here for colors currently written inline in the website CSS.
Use magenta deliberately for identity, actions, and selected details. Keep the surrounding interface neutral. Image colors and muted decorative greens, pinks, and lilacs are artwork colors; they do not create additional interactive accents or status meanings.
Text contrast
Choose color pairs for the actual text size. Normal text needs at least 4.5:1 contrast; large text needs 3:1. Large means at least 24 CSS pixels, or approximately 18.67 CSS pixels when bold. See W3C's contrast guidance.
The following ratios were calculated from the solid source colors, without transparency or imagery; displayed ratios are rounded.
| Pair | Ratio | Use |
|---|---|---|
Accent text #c20099 on paper | 5.12:1 | Small links and labels |
Supporting text #62625e on paper | 5.61:1 | Body copy |
| Ink on magenta | 5.47:1 | Contrast reference; filled actions use white labels |
| White on magenta | 3.45:1 | Large text only; the website CTA uses 22px bold, 20px bold on mobile |
| White on accent hover | 4.21:1 | Large text only |
Muted #777774 on paper | 4.11:1 | Large heading phrases; avoid for small body text |
Use white labels on filled magenta buttons, following the owner's preference recorded on 4 October 2026. Keep labels at least 20px / 700 so they meet the large-text contrast requirement on both the accent and hover fills. If a control requires smaller text, use a darker magenta fill that provides at least 4.5:1 contrast with white. Check text over imagery against the actual frame and overlay. These pairing checks are not a complete accessibility audit.