Paper. Ink. Mineral.
Paper gives the brand space. Ink carries the words and structure. Mineral is the door, water and accent.
The core.
Use the three colours as a family. Pure black and pure white belong only in platform crop checks.
Paper
The default page and post canvas.
Ink
Type, marks and the product surface.
Mineral
The door panel and small areas of colour.
Derived site colours.
Use these for surfaces, rules and secondary text. A colour name does not establish a passing text pair.
Ink soft
Mineral deep
Paper soft
Line
Muted
Seven tones for art.
The ramp belongs to illustration. Quantise artwork to these colours; keep type and diagrams vector sharp.
#F4F2EC#D9DFDF#B8CAD1#8DB1C1#7695A4#57707F#1B2B41| Tone | Role | Token |
|---|---|---|
| 0 | Paper sky, moon and brightest stone | |
| 1 | Light sky and pale dither | |
| 2 | Haze, distant water and light midtone | |
| 3 | Water and the Mineral door | |
| 4 | Middle stone and shaded water | |
| 5 | Deep shade and night texture | |
| 6 | Linework, trees and night sky |
Theme tokens.
Use semantic tokens for the page. The light and dark themes have their own text, surfaces and control boundaries.
Light
- #F4F2EC
- #1B2B41
- #E9EAE4
- #F4F2EC
- #4A5A6E
- #C9D1D4
- #4A5A6E
- #1B2B41
- #F4F2EC
Dark
- #1B2B41
- #F4F2EC
- #24374F
- #2D4361
- #AAB7C4
- #4A5A6E
- #7F90A3
- #B9D2DC
- #1B2B41
Line tokens separate sections. They are decorative. Form controls and interactive outlines use the stronger control border token, which passes 3:1 against the page and first surface.
Product UI stays on Ink.
The wallet and bridge share Ink surfaces in day and night marketing.
Address check
The network, type and checksum must match.
prl1pe…r2ms
Check the recipient address.
| Token | Value | Use |
|---|---|---|
| Product UI card. | ||
| Product UI raise. | ||
| Product UI raise 2. | ||
| Product UI line. | ||
| Product UI text. | ||
| Product UI muted. | ||
| Decorative detail only; use Muted for small text. | ||
| Small text on Card or Raise. Use Accent strong on Raise 2. | ||
| Product UI accent strong. | ||
| Background for the real Pearl asset mark. | ||
| Errors and paused notices only. |
Product rule: rgba(244,242,236,.10) is a decorative divider. Coral #F0A898 is reserved for errors or paused status. It never enters art or decorates a post.
Contrast, measured.
Normal text needs 4.5:1. Large text and meaningful control boundaries need 3:1. Ratios use WCAG relative luminance, without rounding to pass.
| System | Pair | Contrast | Result | Allowed use |
|---|---|---|---|---|
| site light | fg / bg | 12.77:1 | AA | normal text |
| site light | fg / surface | 11.82:1 | AA | normal text |
| site light | fg / surface-2 | 12.77:1 | AA | normal text |
| site light | text-muted / bg | 6.30:1 | AA | normal text |
| site light | text-muted / surface | 5.83:1 | AA | normal text |
| site light | text-muted / surface-2 | 6.30:1 | AA | normal text |
| site light | on-accent / accent | 12.77:1 | AA | normal text |
| site light | control-border / bg | 6.30:1 | AA | control boundary |
| site light | control-border / surface | 5.83:1 | AA | control boundary |
| site dark | fg / bg | 12.77:1 | AA | normal text |
| site dark | fg / surface | 10.82:1 | AA | normal text |
| site dark | fg / surface-2 | 8.99:1 | AA | normal text |
| site dark | text-muted / bg | 7.00:1 | AA | normal text |
| site dark | text-muted / surface | 5.93:1 | AA | normal text |
| site dark | text-muted / surface-2 | 4.92:1 | AA | normal text |
| site dark | on-accent / accent | 9.07:1 | AA | normal text |
| site dark | control-border / bg | 4.37:1 | AA | control boundary |
| site dark | control-border / surface | 3.70:1 | AA | control boundary |
| product UI | text / card | 12.77:1 | AA | normal text |
| product UI | text / raise | 10.82:1 | AA | normal text |
| product UI | text / raise-2 | 8.99:1 | AA | normal text |
| product UI | muted / card | 7.00:1 | AA | normal text |
| product UI | muted / raise | 5.93:1 | AA | normal text |
| product UI | muted / raise-2 | 4.92:1 | AA | normal text |
| product UI | faint / card | 4.37:1 | Restricted | decoration only |
| product UI | faint / raise | 3.70:1 | Restricted | decoration only |
| product UI | faint / raise-2 | 3.08:1 | Restricted | decoration only |
| product UI | accent / card | 6.26:1 | AA | normal text |
| product UI | accent / raise | 5.30:1 | AA | normal text |
| product UI | accent / raise-2 | 4.40:1 | Restricted | decoration only |
| product UI | accent-strong / card | 9.07:1 | AA | normal text |
| product UI | accent-strong / raise | 7.68:1 | AA | normal text |
| product UI | accent-strong / raise-2 | 6.38:1 | AA | normal text |
| product UI | token-chip / card | 10.53:1 | AA | normal text |
| product UI | token-chip / raise | 8.92:1 | AA | normal text |
| product UI | token-chip / raise-2 | 7.41:1 | AA | normal text |
| product UI | error / card | 7.33:1 | AA | normal text |
| product UI | error / raise | 6.20:1 | AA | normal text |
| product UI | error / raise-2 | 5.16:1 | AA | normal text |
Faint is 4.37:1 on the base Ink card and lower on raised surfaces. It is not an AA small text colour. Mineral is 4.40:1 on Raise 2; use Accent strong there. These source tokens remain available for nontext details.
Source: W3C contrast minimum guidance ↗. The kit evaluates normal text without rounding a near miss into a pass.
Core pair matrix.
A failing pair can still be a surface or decorative fill. Do not use it for normal text.
| Foreground | On Paper | On Ink | On Mineral |
|---|---|---|---|
| Ink | 12.77:1 · AA | 1.00:1 · Fails text | 6.26:1 · AA |
| Paper | 1.00:1 · Fails text | 12.77:1 · AA | 2.04:1 · Fails text |
| Mineral | 2.04:1 · Fails text | 6.26:1 · AA | 1.00:1 · Fails text |
| Ink-soft | 9.39:1 · AA | 1.36:1 · Fails text | 4.60:1 · AA |
| Mineral-deep | 2.95:1 · Fails text | 4.32:1 · Fails text | 1.45:1 · Fails text |
| Paper-soft | 1.08:1 · Fails text | 11.82:1 · AA | 1.89:1 · Fails text |
| Line | 1.38:1 · Fails text | 9.23:1 · AA | 1.48:1 · Fails text |
| Muted | 6.30:1 · AA | 2.03:1 · Fails text | 3.09:1 · Fails text |
Give the canvas room.
Start with a dominant neutral, then use the accent where it carries meaning.
The browser wallet
for Pearl.
PEARL on Pearl and wPEARL on Ethereum, in one account.
Your keys stay
on your device.
The browser wallet for Pearl.
Starting proportion for a day layout: about 70% Paper, 20% Ink and 10% Mineral. Art can use the full ramp. Avoid three equally sized colour fields in a finished post.
Charts use the ramp.
On Ink, use Paper, the light midtone and Mineral. Distinguish series by stroke and labels as well as colour.
The specimen is a style example. Use labelled units and a real source whenever publishing data. Do not introduce a new hue for an extra series.