Brandbook

01. Logo

P + ULSE

Icon · 48 px

Favicon · 16 px

Use the chequered P with the outlined italic ULSE and integrated speed dashes. The P alone is used for icons and favicons. Preserve the vector geometry and proportions; do not recreate ULSE with live text. Keep one quarter of the P’s height clear around the lockup.

P + ULSE SVG · P icon SVG · Font artwork license

02. Colors

Canvas
#F8F7F3 / #101114Page background

Surface
#FFFFFF / #1D1F23Panels and controls

Ink
#191B20 / #E8E9E6Text and icons

Primary action
#FFD84APrimary buttons and active navigation

Graphic accent
#E7B900Decorative accents

Text accent
#806500 / #FFD84AAccessible accent text

Heading accent
#EFAA11 / #FFD84ALarge heading 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.

Type sizes use the shared CSS tokens below. Mobile sizes apply at 600 px and below. Use metadata sizing only for secondary labels; trading prices and controls have their own roles.

Role	Specification	Sample
Wordmark	Outlined DejaVu Sans Bold Oblique with integrated speed dashes; use the SVG lockup
Landing hero	34–54 px · 700 · 1.02 line height	Swap
Product page heading	32 px desktop / 28 px mobile · 600 · 1.15 line height · `--text-page-heading` / `--weight-page-heading` Left-aligned to content; 8 px subtitle gap; 24 px before content.	Moonlight Bridge
Product section	18 px desktop / 14 px mobile · 600 · `--text-section` / `--weight-section`	Price chart · Recent launches · Explore tokens · Trades
Body	16 px · 400 · 1.6 line height · `--text-body`	ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Field label	14 px · 600 (semibold) · 1.6 line height · ink color `--text-field-label` / `--weight-field-label` Same on desktop and mobile	Sell / Buy Cardano / Midnight
Control	14 px · 600 · `--text-small`	Market order
Trading label	16 px desktop / 14 px mobile · 400 · `--text-trading`	Trading at
Price	18 px desktop / 16 px mobile · 600 · `--text-price`	0.01753 NIGHT
Amount	30 px desktop / 27 px mobile · `--text-amount`	0.00
Metadata	13 px · monospace · uppercase	Token ID

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. Navigation links have 32 px gaps (24 px at widths up to 1050 px), 44 px targets and a 2 px active underline close to the text.
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.
Artwork cards	Soft shadows, a lightly shaded caption surface and prominent token artwork. Trading labels: 16 px desktop / 14 px mobile; prices: 18 px / 16 px. Social links over the artwork and the trade action beside the caption share 44 px neutral controls with 22 px icons.
Motion	Static artwork. Theme changes and tab selection do not require animation.
Content width	1440 px maximum inner width. Header contents and horizontal card rows share centered edges. Side gutters: 32 px; 24 px at widths up to 1050 px; 16 px at widths up to 560 px. Header borders remain full width.
Spacing	Use shared spacing tokens. Swap and Bridge outer form padding/gaps use 17 px, or 12 px at widths up to 560 px. Inner amount-field and token-control padding/gaps use exactly half: 8.5 px, or 6 px on mobile. The reversal control overlays the gap between amount fields.
Buttons and panels	Primary actions use a subtle yellow fill gradient without a colored border; secondary actions are outlined. Form panels use a soft shadow, a shallow surface gradient and a fine upper-left border highlight. Light: warm metallic edge (#AFA58D → #D0C4A2) with a white inset highlight. Dark: brighter edge (#92928B → #665F43). Fields use a subtle inset shadow. Controls have at least 44 px touch targets and visible keyboard focus.
Token selectors	Custom dropdowns show a 28 px token logo to the left of each ticker, in both the selected control and its options. Balance appears only when a wallet is connected, above the control and aligned right. Support keyboard navigation, Escape and outside dismissal.
Trading controls	Buy/Sell controls use 14 px semibold text, neutral selected surfaces and 44 px targets. Charts use the heading accent with 13 px axis labels that retain their size on mobile. Token prices use the shared price role. Trading forms use the same outer/inner spacing as other amount forms.
Amounts	USD equivalent directly below each amount. Initial value: $0.00. Numeric entry has no visible stepper buttons.