# Brand Kit
### Introduction
This brand book sets out the core elements that define WLTH and how they should be used across every touchpoint. More than a logo or color palette, the brand reflects values, mission, and identity.
These guidelines ensure WLTH is always communicated with clarity, consistency, and purpose which creates an expression that is authentic, meaningful, and memorable.
### Colour System
The WLTH colour palette is built for trust, clarity, and energy. These guidelines define how our brand colours are applied across all public-facing contexts.
#### Midnight Purple — `#211F44`
The foundational brand colour. Used for all body text, headings, and key labels at full opacity. Pairs with Electric Purple in gradient contexts to create depth in hero and header areas. Apply to icon fills where a solid, high-contrast treatment is needed. The WLTH wordmark always appears in Midnight Purple on light backgrounds.
***
#### Electric Purple — `#674AFA`
The primary accent and secondary brand colour. Appears in header and hero gradients blended with Midnight Purple, and as the fill for prominent CTAs where Neon Teal is not used. Also the standard colour for inline text links and action-triggering copy across brand contexts. Used for decorative wave and curve elements in hero sections.
***
#### Neon Teal — `#01FEBF`
The primary action colour. Reserved for the most important call-to-action on any given surface — buttons, status indicators signalling availability, and elements that demand immediate attention. Use sparingly. One primary action treatment per composition is the rule. Overuse dilutes its impact.
***
#### Glow Teal — `#39DAC4`
A supporting teal for secondary indicators, progress elements, and contexts where Neon Teal would be too intense. Suitable for subtle iconography, secondary badges, and data visualisation accents that sit alongside the primary teal without competing with it.
***
#### White — `#FFFFFF`
Used for content surfaces and text-on-dark contexts. All primary content areas sit on white. Text and labels appearing over purple gradients or dark fills should be set in white to maintain legibility. Also used as button text on dark-filled CTAs.
***
#### Midnight Purple 60% — `#211F44` at 60% opacity
Used for secondary and supporting text — subheadings, captions, and descriptive copy that sits below a primary value or heading. Establishes typographic hierarchy without introducing a new hue. Never substitute a different grey; always derive from Midnight Purple.
***
#### Electric Purple 10% — `#674AFA` at 10% opacity
A tint fill for inactive or secondary UI elements, light card backgrounds, and subtle hover states. Keeps the purple family present without competing with active elements. This is the go-to "selected but soft" treatment for interactive surfaces.
***
#### Neon Teal 15% — `#01FEBF` at 15% opacity
A light tint fill for subtle background highlights, success state containers, and soft emphasis areas where full Neon Teal would be too dominant. Use for surfaces that need to signal a positive or active status without competing with primary Neon Teal CTAs.
***
#### Light Grey BG — `#EEEFF1`
The global background colour behind all cards and content. Never used for text or interactive elements — purely structural. Provides the contrast layer that lifts white surfaces off the background.
### Typography
**Headings**
* Typeface: Funnel
* Light backgrounds: use Midnight Purple for headings; Electric Purple for highlights or emphasis.
* Dark backgrounds: use WLTH White for headings; Electric Purple may be used sparingly for highlights.
**Body Copy**
* Typeface: Montserrat
* Light backgrounds: use Midnight Purple for body copy and subheadings; Electric Purple for highlights.
* Dark backgrounds: use WLTH White for body copy and subheadings; Electric Purple for selective highlights.
### Logo Usage
**Horizontal logo**
For all public-facing communication, the WLTH logo and icon with the **“.XYZ” extension** is the default.
The WLTH logo and icon form the core brand identity. They may be used interchangeably depending on context.
The **horizontal logo** is the standard full logo. Maintain clear spacing: the gap between the logomark and wordmark must equal the width of the vertical lines in the “L” and “T” at any size.
**Vertical Logo**
The vertical logo is reserved for portrait or tall aspect ratio layouts.
* Spacing: the gap between the logomark and wordmark equals the height of two stacked vertical strokes of the “L” and “T,” rotated 90°.
* Proportion: the width of the logomark must always be double the width of the “W” in the wordmark.
Use the vertical logo only when the horizontal format does not fit the layout. Consistency in spacing and proportion is non-negotiable.
**Vertical Logo + .xyz**
The vertical logo with the “.XYZ” extension is the default mark for all public-facing communication.
* Spacing: the gap between logomark and wordmark equals the height of two stacked vertical strokes of the “L” and “T,” rotated 90°.
* Proportion: the logomark must always be double the width of the “W” in the wordmark.
Use this version when brand presence must be explicit and tied directly to WLTH’s domain.
### **Icon Colours**
Correct icon usage ensures clarity and recognizability across all contexts.
* **Default:** Flat *Midnight Purple* with *Neon Teal*.
* **Light backgrounds:** Both flat and gradient icons are acceptable.
* **Dark backgrounds:** Use the flat *Connector* icon.
* **Vibrant backgrounds or images:** Use only flat *Midnight Purple* or *White*.
### **$WLTH Token**
The $WLTH Token is represented by the **logo icon mark** inside a circle.
* Use only the **Neon Teal** circle with the **Midnight Purple** icon.
* No alternative color treatments are permitted.
This mark signals token identity and must remain consistent across all applications.
