Trusted West Brand Kit

A complete UI design system for building Trusted West apps. This guide shows AI models how to implement consistent, high-impact interfaces using our brand language.

📖 AI Implementation Guide 🎨 Design Tokens (JSON) ⚙️ Cursor Rules

For AI Models

If you're an AI model building a Trusted West interface, start here. These resources contain everything you need.

Start Here

AI Implementation Guide

Complete reference with copy-paste CSS for all components, starter templates, and implementation rules. Read this first.

View Guide

Machine Readable

Design Tokens JSON

Programmatic access to all design values: colors, typography, spacing, and component specs in JSON format.

Download JSON

Cursor Integration

Cursor Rules File

Automatic rules for Cursor AI when building Trusted West apps. Quick dos and don'ts.

View Rules

Design Principles

Every Trusted West interface should be bold, minimal, and unapologetically direct. This brand system is built on high contrast, sharp edges, and zero decoration.

Principle 01

High Contrast

Use pure black (#000000) on white (#FFFFFF) backgrounds. Hot pink (#FF006B) for accents only. No gradients, no shadows, no blur.

Principle 02

Sharp Edges

Border radius is always 0. Everything is rectangular. Borders are thick (3px standard, 4px for major dividers).

Principle 03

Brutalist Typography

IBM Plex Sans for body text. IBM Plex Mono for labels and codes. Everything uppercase for headings. Generous letter-spacing.

Brand Colors

Use this exact palette. No variations, no tints, no shades. High-contrast, no-nonsense.

Black

#000000

Primary text, borders, backgrounds

White

#FFFFFF

Page backgrounds, button text

Hot Pink

#FF006B

Accents, hover states, CTAs

Gray

#888888

Secondary text, descriptions

Light Gray

#F5F5F5

Card backgrounds, subtle fills

Color Usage Rules

When Building UI

Backgrounds: Always use white (#FFFFFF) for the main page background. Use light gray (#F5F5F5) for card backgrounds or sections that need subtle separation.

Text: Black (#000000) for headings and body text. Gray (#888888) for secondary text, descriptions, and metadata.

Borders: Always black (#000000), 3px thick (use 4px for major section dividers).

Accents: Hot pink (#FF006B) should be used sparingly — for labels, hover states, underlines on headings, and primary call-to-action buttons.

Interactive States: Default buttons are black background with white text. On hover, switch to hot pink background. Cards can invert (black background, white text) on hover.

Typography

Two fonts. Bold hierarchy. Uppercase headings. Lots of letter-spacing.

Font Import (Always Include)

IBM Plex Sans

Primary font for all body text, headings, buttons, and UI elements.

The Quick Brown Fox

The Quick Brown Fox Jumps Over

The quick brown fox jumps over the lazy dog. This is the standard body text weight (400) used for paragraphs and longer-form content throughout Trusted West interfaces.

IBM Plex Mono

Monospace font for labels, codes, tags, and technical metadata.

CATEGORY LABEL

API_KEY_12345

Typography Scale

Headings

H1 / Hero

Font: IBM Plex Sans, Weight: 700 (Bold), Size: 2.5rem–4rem (responsive), Text-Transform: uppercase, Letter-Spacing: -0.02em

Subheadings

H2 / Section

Font: IBM Plex Sans, Weight: 700, Size: 2rem–3rem, Text-Transform: uppercase, Border-Bottom: 3px solid hot pink

Labels

CATEGORY TAG

Font: IBM Plex Mono, Weight: 600, Size: 0.7rem, Text-Transform: uppercase, Letter-Spacing: 0.2em, Color: Hot Pink

Body Text

This is standard body text used throughout the interface.

Font: IBM Plex Sans, Weight: 400, Size: 1rem–1.05rem, Line-Height: 1.6–1.7, Color: Black

UI Components

Reusable patterns for building Trusted West interfaces. Copy these exactly when building apps.

Buttons

Primary Button

CSS: background: #000, color: #FFF, border: 3px solid #000, padding: 1.2rem 2.5rem, text-transform: uppercase, font-weight: 700, letter-spacing: 0.1em

Hover: background: #FF006B, border-color: #FF006B

Secondary Button

CSS: background: #FFF, color: #000, border: 3px solid #000

Hover: background: #000, color: #FFF

Cards

Standard Card

Card Title Here

Cards have light gray backgrounds (#F5F5F5), 3px black borders, 2.5rem padding. Labels are IBM Plex Mono in hot pink. On hover, invert to black background with white text.

Hover State

Card Title Here

This is how cards look when hovered. Background becomes black, text becomes white, label stays hot pink.

Navigation

Home Products About

CSS: Fixed position, black background, white links, uppercase text, 0.15em letter-spacing. Hover state changes color to hot pink.

Input Fields

CSS: border: 3px solid #000, padding: 1.2rem, font-family: IBM Plex Sans, background: #FFF. Focus state adds hot pink border.

Spacing System

Consistent spacing creates visual rhythm. Use these values for margins, padding, and gaps.

CSS Variables

--space-xs: 0.5rem (8px)
--space-sm: 1rem (16px)
--space-md: 1.5rem (24px)
--space-lg: 2rem (32px)
--space-xl: 3rem (48px)
--space-2xl: 4rem (64px)

Spacing Rules

Between Sections

6rem – 8rem

Large breathing room between major sections of a page. Gives content space to stand alone.

Card Padding

2.5rem

Internal padding for cards, modals, and content containers. Generous but not excessive.

Grid Gaps

2rem

Space between grid items (cards, tiles). Keeps layouts clean and scannable.

Text Margins

1.5rem

Space below paragraphs, between heading and body text. Standard vertical rhythm.

Implementation Examples

See these patterns in action. When building an app, replicate these layouts.

Hero Section

TW

Build Something Bold

High-impact interfaces that convert. No fluff, no gradients, no shadows.

Feature Grid

Feature 01

Fast Setup

Deploy in minutes with our pre-built components and design system.

Feature 02

High Convert

Bold, clear design that guides users to take action.

Feature 03

Scale Ready

Build once, deploy everywhere. Consistent brand across all touchpoints.

Code Snippet: Complete Button Component

Copy & Paste

<button class="tw-btn">Click Me</button>

<style>
.tw-btn {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1.2rem 2.5rem;
    background: #000000;
    color: #FFFFFF;
    border: 3px solid #000000;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tw-btn:hover {
    background: #FF006B;
    border-color: #FF006B;
}
</style>