Use when adding new error messages to React, or seeing "unknown error code" warnings.
npx skills add way-platform/skills --skill "way-brand-identity"
Install specific skill from multi-skill repository
# Description
Write copy and use colors according to the Way brand.
# SKILL.md
name: way-brand-identity
description: Write copy and use colors according to the Way brand.
Way Brand Identity Guidelines
Abstract
This document serves as the source of truth for Way's brand identity. It contains the strategic positioning, tone of voice, and visual system guidelines.
Goal: Ensure all generated content—text, UI design, and code—aligns with Way's "trustworthy yet approachable" personality.
1. Strategy
Industry context
Fleet data is critical, but fragmented or untapped
Way operates in a traditionally conservative fleet management and transportation data industry. Existing solutions often rely on hardware installations, fragmented data sources, or API-only approaches that require significant customer-side development.
There is no clear category for unified fleet data management today, especially for mixed vehicle types and brands. At the same time, electrification, emissions reporting, and automation are increasing the need for reliable, flexible vehicle data.
Way exists to simplify this landscape by providing a dependable, future-ready foundation for managing and using commercial vehicle data.
Positioning context
Serious enough to trust, light enough to enjoy.
Way gives operators confidence without pressure, and capability without intimidation. It removes friction, uncertainty, and the sense of wrestling with systems that were never designed to work together.
Emotionally, Way sits in a rare space: serious enough to trust, light enough to enjoy. It feels calm, clear, and capable, but also light and down to earth. The kind of product you rely on daily without it becoming a burden.
Way turns fleet data from something stressful and opaque into something understandable, usable, and reassuring.
Brand personality
Trustworthy & Capable
Trust is built through clarity, simplicity, consistency, clear hierarchy and calm confidence. Way shows capability by how the product works and how information is presented. We communicate with restraint, avoid overpromising, and let real data and real workflows speak for themselves.
- This doesn’t mean:
- Being corporate, cold, or overly serious
- Proving expertise through complexity
- Making claims without showing how things work
- How this looks and sounds:
- Clear hierarchy and predictable layouts
- Real product screens shown clearly
- Precise, measured language
- Proof through structure, not hype
- What to avoid:
- Vague explanations that leave people guessing
- Flashy or attention-seeking visuals
- Sales-heavy or overconfident language
- Inconsistent patterns or unclear data
Approachable & Fun
Way makes a boring industry feel human and easy to engage with.
Approachable and fun means lowering friction without lowering standards. Lightness comes from tone, pacing, and subtle personality, never at the expense of clarity or credibility.
- This doesn’t mean:
- Casual or careless communication
- Jokes or gimmicks that undermine trust
- Cute or childish visuals
- How this looks and sounds:
- Plain, human language
- Breathable layouts and generous spacing
- Subtle illustration and mascot use
- Friendly, confident copy
- What to avoid:
- Forced humour or cleverness
- Visual noise or distraction
- Talking down to the user
Modern & connected
Way feels current, coherent, and built to scale.
Modern and connected means everything feels intentional and unified. Way presents a clear system where vehicles, data, and operations are connected and easy to understand. It feels new, not old-school.
- This doesn’t mean:
- Chasing trends or novelty
- Abstract or futuristic visuals
- Overemphasising technology
- Confusing layouts
- How this looks and sounds:
- Clean, contemporary design
- Consistent components and layouts
- Clear connections between data and systems
- Grounded, forward-looking language
- What to avoid:
- Trend-led visuals that date quickly
- Abstract graphics that hide function
- Fragmented storytelling
Tone of voice
Way’s tone is confident, clear, and grounded in reality. We speak to fleet operators and transportation businesses as capable partners who need dependable systems, not big promises.
Whether we’re addressing a small family-run fleet or a large enterprise, our language stays clear and accessible to both, unless a page is explicitly written for a specific audience.
We always write with our ideal customer in mind. Our language reflects real operational challenges and the business outcomes they care about. We avoid generic claims and focus on specific, tangible results that organisations can rely on.
Requirement: Way uses American English across all communication.
Examples
| Type | Examples |
|---|---|
| We’re (Do) | • Clear: “Single view for your entire fleet.” • Concrete: “Track vehicles, calculate emissions, and monitor vehicle health without installing hardware.” • Our ICP’s language: “Manage vans and trucks in the same interface.” • Outcome-focused: “Turn fleet insights into measurable savings.” • Grounded in reality: “Respond to vehicle issues without driver involvement.” |
| We're not (Don't) | • Abstract or vague: “Powering the future of mobility.” • Generic: “All-in-one solution for modern businesses.” • Interchangeable: “Built for scale and innovation.” • Exaggerated: “Transform your operations instantly.” • Buzzword-heavy: “AI-driven optimisation frameworks.” |
2. Typography
Font Strategy
Way uses a two-typeface system designed for clarity, approachability, and precision.
Season Mix (Headings)
Season Mix is used for headings and expressive moments. Its serif character adds contrast and personality, supporting an approachable and confident brand tone.
* Google font substitute: Merryweather
Inter (Body & UI)
Inter is used for body copy, UI, and functional text. It is highly legible across sizes and screens, making it ideal for product and interface use.
Together, the two typefaces create a balanced system that feels modern, clear, and approachable.
3. Color
Brand Colors
Way’s color palette is intentionally restrained and high-contrast. Neutrals do the heavy lifting, while green is used sparingly to create focus and recognition.
Beige and gray form the core of the system. They are used for backgrounds, surfaces, typography, and layout structure, creating a calm, grounded base that feels dependable and unobtrusive.
Green is an accent color
It appears in contained areas such as headers, panels, highlights, and graphic moments. Green is never used as a default background for entire experiences, but as a deliberate layer to signal emphasis and add energy.
The result is a visual language where most of the interface stays quiet, and moments of importance are instantly recognisable.
Core Palette
| Color | Shade | Hex | Usage |
|---|---|---|---|
| Green | 100 | #baf5ae |
Highlights, subtle accents |
| Green | 500 | #acff9a |
Primary Accent |
| Beige | 100 | #fefcf0 |
Secondary Background |
| Beige | 200 | #f8f5e6 |
Tertiary Background |
| Beige | 300 | #ede8d3 |
|
| Beige | 400 | #e2dbbf |
|
| Beige | 500 | #cbc6a7 |
Borders |
| Gray | White | #ffffff |
Primary Background |
| Gray | 50 | #fafafb |
|
| Gray | 100 | #d4d3d3 |
|
| Gray | 200 | #d1d1d1 |
|
| Gray | 300 | #a3a3a3 |
|
| Gray | 400 | #79797a |
|
| Gray | 500 | #424245 |
Secondary Text |
| Gray | 600 | #353535 |
|
| Gray | 700 | #262525 |
Primary Text |
| Gray | 800 | #202021 |
|
| Gray | 900 | #1d1d1d |
|
| Gray | 950 | #19191a |
Alternate Background |
Extended color palette (Data Viz)
The extended color palette is intended for product use and data visualisation.
These colors support charts, maps, statuses, comparisons, and system feedback where additional differentiation is required. They are not part of the core brand expression and should not be used for general layout, marketing surfaces, or decorative purposes.
- Yellow: 50-950 (Tailwind defaults)
- Indigo: 50-950 (Tailwind defaults)
- Blue: 50-950 (Tailwind defaults)
- Green: 50-950 (Custom)
- Red: 50-950 (Tailwind defaults)
Semantics for website and marketing
Way uses a semantic color system to ensure consistency, clarity, and accessibility across the website and marketing materials.
| Context | Semantic Role | Reference | Hex |
|---|---|---|---|
| Background | Primary | Gray/White | #ffffff |
| Secondary | Beige/100 | #fefcf0 |
|
| Tertiary | Beige/200 | #f8f5e6 |
|
| Alternate | Gray/950 | #19191a |
|
| Accent | Green/500 | #acff9a |
|
| Text | Primary | Gray/700 | #262525 |
| Secondary | Gray/500 | #424245 |
|
| Tertiary | Gray/400 | #79797a |
|
| Alternate | Gray/White | #ffffff |
|
| Alternate Secondary | Gray/300 | #a3a3a3 |
|
| Alternate Tertiary | Gray/200 | #d1d1d1 |
4. Icons
Untitled UI
We use the Untitled UI icon set as our base icon library. It’s an open-source collection of consistent, well-designed interface icons that we adapt to each product, ensuring visual coherence while staying flexible.
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.