# KxWelcome, Design System

> A warmer welcome, with zero paperwork.

**KxWelcome** is a Kinetic Software Business Unit (KBU), the product line that helps universities and housing operators run student move-in from a single platform. This repository is the canonical design system for the KxWelcome brand: tokens, type, colors, component patterns, logos, and a UI kit recreation of the marketing site.

---

## Who this is for

Designers, engineers, and writers producing anything KxWelcome-branded: marketing pages, product UI, pitch decks, internal docs, customer emails, event assets. Use this system when you need the output to look and sound like KxWelcome.

KxWelcome is operated by Kinetic Software and follows Kinetic's voice and engineering standards, but it has its own purple-led visual identity distinct from the Kinetic master brand.

---

## Sources

Everything in this system was derived from materials the user uploaded directly. Originals live in `uploads/`.

- `uploads/KxWelcome_Logo...png`, white wordmark for dark/purple backgrounds.
- `uploads/Customer Hub BG.jpg`, signature purple banner backdrop.
- Palette, voice, and usage rules were specified directly by the brand team.

No public codebase, Figma file, or product screenshots were provided. The UI kit in `ui_kits/marketing-site/` is a **plausible recreation**, brand-faithful to the palette, type, wordmark, and voice, not a reverse-engineered copy of live product UI. Flagged clearly in that kit's README.

---

## Brand in one paragraph

KxWelcome takes the paperwork out of move-in. Students book their arrival slot, send documents ahead of time, and get their keys in minutes. Staff get one live view of the whole weekend, arrivals, rooms, documents, and exceptions, instead of 20 spreadsheets. The brand is **warm, confident, and plainspoken**, we talk like people who have actually run a move-in weekend, because we have. We write in **US English**, in the first-person-plural (*we*), and we almost always address the reader directly (*you*).

---

## Content fundamentals

### Perspective & naming
- **First person plural**, *we, our, us*. KxWelcome speaks as a team.
- **Strong second person**, *you, your*. Address the reader in almost every sentence.
- **Brand name**, always "**KxWelcome**" (one word, capital K, capital W). First mention in long-form copy can expand to "**KxWelcome, a Kinetic Software Business Unit**", then just "KxWelcome" after. Never "Kx Welcome", never "KXW".
- **Parent brand**, on marketing surfaces we cite "a Kinetic Software product" or "a Kinetic Software Business Unit (KBU)" once, usually in the hero eyebrow or footer.

### Language & spelling
- **US English** throughout: *color*, *organization*, *center*, *personalized*, *optimize*. This is the one hard rule that differs from the Kinetic master brand.
- **Oxford comma**, not enforced; be consistent within a document.
- **Numbers**, write out one to nine; numerals for 10+. Percentages always numeric (*"−80%"*, *"94%"*).
- **Contractions** are welcome, *we're*, *you're*, *don't*. They keep the tone warm.

### Voice, confident, playful, progressive, credible
Warm and clear, never corporate, never condescending. A human on the other end of the keyboard who has run arrivals weekend and wants yours to be smoother than theirs was.

### Tone by audience, internal vs customer-facing
Voice stays the same everywhere; **tone shifts with audience**.

| Dimension | **Internal**, team, all-hands, Slack | **Customer-facing**, marketing, product UI, support |
|---|---|---|
| Formality | Relaxed, conversational. First names. | Warm-professional. Contractions welcome. |
| Confidence | Candid. *"This isn't working yet."* is fine. | Confident and reassuring, acknowledge problems, pair with what we're doing. |
| Playfulness | More of it. Jokes, self-deprecation. | Measured. Never at the customer's expense. |
| Technical depth | Deep. API, SITS, SQL shorthand is fine. | Plain English. Technical detail belongs in docs / release notes. |
| Acronyms | PBSA, SITS, fine unqualified. | Expand on first use. *"PBSA (purpose-built student accommodation)"*. |
| "We" vs "I" | "I" is fine from an author. | Always "we". One collective voice. |
| Emoji | Allowed in chat. | **No emoji** in product UI, marketing, email, decks. |

### Sub-tones within customer-facing
- **Marketing & sales**, most confident, most aspirational. Big claims OK *with* evidence (*"−80% admin"*, *"94% arrive on time"*).
- **Product UI**, clearest, shortest, most neutral. Imperatives on buttons (*"Save changes"*, *"Resend invite"*). System messages in first-person-plural (*"We couldn't reach billing."*).
- **Support & error**, warmest. Acknowledge → explain → offer next step. Never blame the user. Never end on a dead end.
- **Legal & contractual**, drop contractions, be precise. Still plain English.

### Plain English, avoid jargon
Kinetic's house style rules out "jargon-speak". Short sentences, everyday words. **Avoid**:

- *unlock* · *growth engine* · *leverage* · *synergize* · *best-in-class*
- *stakeholders* · *bandwidth* · *ecosystem* · *ideate* · *circle back*
- *disruptive* · *game-changing* · *next-generation* · *seamless integration*
- *robust* · *scalable* · *holistic* · *frictionless* · *end-to-end*

Prefer: *unlock → make possible*, *leverage → use*, *stakeholders → your team*, *end-to-end → from start to finish*, *seamless → smooth*, *robust → reliable*.

### Casing & mechanics
- **Sentence case** for headings and buttons in product UI.
- **ALL-CAPS with letter-spaced tracking** (the signature *"E Y E B R O W"* treatment), reserved for small section labels, never body.
- **Exclamation marks**, sparingly; max one per paragraph; none in product UI.

### On-brand examples

✅ **Marketing hero:** *"A warmer welcome, with zero paperwork."*

✅ **Product button:** *Book an arrival slot* · *Resend documents* · *Check in student*

✅ **System message:** *"We couldn't reach billing. Retrying in 30 seconds, no action needed."*

❌ *"Leverage our best-in-class platform to unlock a frictionless move-in experience."*

❌ *"Hey 👋 let's get your rooms sorted!"*

---

## Visual foundations

### Color
The system runs on a **single accent color, purple**, anchored on `#5E28E5`. Every surface is either white, a wash of the purple, or, for hero moments, full-bleed purple with the banner backdrop.

- **Primary `#5E28E5`**, logo, primary CTA, key accents.
- **Deep `#4312BC`**, pressed states, hero gradients.
- **Soft `#C1A8FF`**, hover fills, chips, focus halos.
- **Wash `#F3EEFF`**, cards, sidebars, soft panels. Default over plain grey.
- **Neutrals**, cool-leaning ink `#1E1E1E` and a 10-stop neutral ramp.
- **Semantics**, success green `#1F8A6E`, danger red `#C8223C`, warning amber `#D98B00`, info purple (`#5E28E5`).

**Use purple with intent.** It should never be the dominant background over full pages. Reserve it for the logo, the primary CTA, hero panels, and occasional accents. The workhorses are white and wash.

### Type
Four families, bundled in `/fonts/` as licensed brand assets.

- **Raleway** (`--font-sans`), hero typeface. Display and headings. 400 / 600 / 700.
- **Open Sans** (`--font-body`), primary body face. 300–800, roman + italic.
- **Manrope** (`--font-alt`), variable (200–800). Data, tables, KPIs, tabular numerals.
- **Helvetica Condensed** (`--font-condensed`), utility / signage / tight labels only. NOT a body face.

- **Tracking**, headings tight (−0.02em to −0.01em). Eyebrow labels wide (+0.14em).
- **Scale**, modular 1.25 anchored at 16px, up to 72px for hero display.
- **Minimum sizes**, 14px in product UI, 24px+ on 1920×1080 slides, 12pt minimum in print.

### Spacing & layout
- **4px base grid.** Every spacing token is a multiple of 4.
- **Max content width**, 1200–1280px marketing, 1440px product.
- **Section rhythm**, hero 96–120px, standard 64–80px, compact 32–48px.

### Backgrounds & imagery
- **Solid neutrals, wash tints**, and occasional **full-bleed purple** with the banner backdrop.
- **Full-bleed photography** of students, families, campus, and move-in moments, warm, naturally lit, human.
- **No hand-drawn illustrations.** The brand isn't whimsical.
- **No gradients** other than the signature purple-to-deep-purple brand gradient on hero panels (`--brand-gradient`).
- **No repeating textures or noise.**

### Corner radii
- **Cards / panels**, 14px default, 20px for large feature cards.
- **Buttons**, 10px default, pill for secondary tag-shaped CTAs.
- **Inputs**, 10px.
- **Chips / badges**, pill.

### Borders
- **Default** 1px `--border` (`#DEDBE8`). Dense surfaces drop to `--border-soft`.
- **Focus ring** 2px `--primary` + 4px alpha halo. Always visible.

### Shadows
- **Purple-tinted, never grey.** Shadows use `rgba(45, 20, 110, α)`, deep-purple alpha.
- Elevation ramp: `xs` (hairline), `sm` (card rest), `md` (hover / popover), `lg` (modal), `xl` (hero overlay).

### Cards
Default card: white background, 14px corners, 1px `--border-soft`, `--shadow-sm` at rest, `--shadow-md` on hover with a 2–4px lift. No left-border accent stripes.

### Hover, press, disabled
- **Hover**, darken to `--primary-hover`, lift (`translateY(-1px)` to `-2px`), or reveal a `--primary-wash` fill. 180ms `--ease-standard`.
- **Press**, scale 0.98, drop to `--shadow-xs`.
- **Disabled**, 40% opacity, `cursor: not-allowed`, no hover.

### Transparency, blur, overlays
- **Hero image overlays**, 30–50% `--ink` solid, never a gradient.
- **Backdrop blur** sparingly, sticky headers get `backdrop-filter: saturate(180%) blur(12px)` on `--bg` @ 80%.
- **Glassmorphism is NOT a KxWelcome motif**, avoid heavy frosted-glass cards.

### Motion
- **Easing**, standard `cubic-bezier(0.2, 0.7, 0.2, 1)`; emphasis `cubic-bezier(0.16, 1, 0.3, 1)`.
- **Durations**, 120ms (micro), 180ms (hover), 240–360ms (cards/dialogs), 520ms (page transitions).
- **No bounces, no springy overshoots.** Motion is confident and calm.
- **Fades + translateY** are the default entry pattern; scale is reserved for press.

---

## Iconography

**No official KxWelcome icon set was shipped.** The system substitutes [Lucide](https://lucide.dev/) icons:

- **24px default** size, **1.75px stroke**.
- Rounded line caps, geometric, no fills.
- `currentColor`, icons inherit text color.

```html
<script src="https://unpkg.com/lucide@0.453.0/dist/umd/lucide.min.js"></script>
<i data-lucide="calendar-days"></i>
<script>lucide.createIcons();</script>
```

- **Emoji** are not used as icons.
- **Unicode symbols** (`→`, `·`, `-`) are fine for typographic use, never UI controls.

⚠︎ **Flagged substitution.** If the brand adopts a proprietary icon set, swap it in.

---

## Fonts

Bundled in `/fonts/`, loaded via `@font-face` in `colors_and_type.css`. No external CDN required, works offline.

| Family | Files | Weights | Role |
|---|---|---|---|
| **Raleway** | `Raleway-Regular.ttf`, `Raleway-SemiBold.ttf`, `Raleway-Bold.ttf` | 400 / 600 / 700 | Display & headings (`--font-sans`) |
| **Open Sans** | `OpenSans-*.ttf` (16 cuts) | 300–800 + italics | Body (`--font-body`) |
| **Manrope** | `Manrope-VariableFont_wght.ttf` | 200–800 variable | Data & tabular (`--font-alt`) |
| **Helvetica Condensed** | `Helvetica_LT_57_Condensed.ttf`, `Helvetica_LT_67_Medium_Condensed.ttf` | 400 / 500 | Utility (`--font-condensed`) |

---

## Index

```
/
├── README.md                    ← you are here
├── SKILL.md                     ← Claude skill manifest
├── colors_and_type.css          ← all design tokens
├── overview.html                ← quick-look index of every preview card
│
├── assets/
│   ├── kxwelcome-banner.jpg       ← signature purple banner backdrop
│   ├── kinetic-hfyf-white.png     ← Kinetic parent-brand lockup ("Here for you. Forever.")
│   ├── logo-kinetic-blue.png      ← Kinetic master-brand mark
│   └── logo-kinetic-white.png     ← Kinetic master-brand mark, white
│
├── fonts/                       ← 20+ licensed font files
│
├── uploads/                     ← original brand materials (source of truth)
│
├── preview/                     ← spec cards, one motif per file
│   ├── brand-*.html
│   ├── colors-*.html
│   ├── type-*.html
│   ├── spacing-*.html
│   └── components-*.html
│
└── ui_kits/
    └── marketing-site/          ← KxWelcome.com recreation
        ├── index.html
        ├── README.md
        └── *.jsx
```

---

## Caveats

1. **No codebase or Figma** was provided, the UI kit is a plausible, brand-faithful recreation, not a reverse-engineered product clone.
2. **No real product screenshots** were provided, the demo surfaces were invented following palette, type, and voice.
3. **Lucide icons** are a substitution, flag and swap when a proprietary set arrives.
4. **No real imagery** is bundled beyond the banner wave, use placeholder photography until real art direction is shot.
5. **No KxWelcome logomark was shipped.** The only KxWelcome-specific brand asset provided is the purple banner backdrop. The system renders the wordmark in CSS as `.kxw-wordmark` (a white-on-purple "Kx" badge + the word "Welcome" set in Raleway 800). The Kinetic "Here for you. Forever." white lockup (`assets/kinetic-hfyf-white.png`) is used only as a parent-brand endorsement, never as the KxWelcome logo itself. Swap the CSS wordmark for a real lockup when one arrives.