Brandbook
01. Logo
Primary P
Icon · 48 px
Favicon · 16 px
Use the same P across Pulse, Finance and Pump. Keep one quarter of the mark’s height clear on each side. Scale proportionally.
Spline construction and downloads
Construction
Cubic Bézier curves share tangents at their joins. Straight cuts define the flag sections.
02. Colors
Canvas#F8F7F3 / #101114Page background
Surface#FFFFFF / #1D1F23Panels and controls
Ink#191B20 / #F4F4F2Text and icons
Primary action#FFD84APrimary buttons and active navigation
Graphic accent#E7B900Decorative accents
Text accent#806500 / #FFD84AAccessible accent text
Paired values: light / dark. Primary buttons use dark text. Status feedback must include a text label.
03. Fonts
Headings and body
Arial
Arial, Helvetica, sans-serif. Regular body text; bold product headings and primary actions.
Metadata
Monospace
ui-monospace, monospace. Labels, coordinates and technical values.
| Role | Specification | Sample |
|---|---|---|
| Product heading | 34–54 px · 700 · 1.02 line height | Swap |
| Product section | 22 px · 500 | Liquidity pools |
| Body | 16 px · 400 · 1.6 line height | ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 |
| Field label | 13 px · 400 | Amount |
| Metadata | 11 px · monospace · uppercase | Market order |
04. Graphics
| Corners | 2 px radius on buttons, fields and panels. |
|---|---|
| Lines | 1 px borders and dividers. Product headers use a full-width bottom border with no side borders. |
| Icons | 24 px control icons. Use the primary P only for brand marks. |
| Images | Preserve aspect ratios. The decorative wave background spans the viewport behind the swap form. |
| Motion | Static artwork. Theme changes and tab selection do not require animation. |
| Spacing | Use 8, 12, 16, 24 and 32 px gaps. Keep form labels close to their fields. |
| Buttons and panels | Yellow primary actions; outlined secondary actions. Panels use a surface fill and 1 px border. Controls have at least 44 px touch targets and visible keyboard focus. |