# XamiHub Design System
> **Plataforma onde toda inteligência acontece.**
> (The platform where all intelligence happens.)
XamiHub is a Brazilian intelligence / data platform. The **Xami** family is the broader brand; **XamiHub** is the flagship product — the hub where the company's intelligence, organization and innovation come together. Brand values expressed in the manual:
- **Organização** — Organization
- **Inovação** — Innovation
- **Desempenho** — Performance
Public site: **xamihub.com.br**
This design system is the canonical source of truth for XamiHub's visual identity: colors, type, logos, UI patterns, and tone. Use it when mocking screens, building production UIs, or creating marketing assets.
---
## Source materials
| File | Where it lives |
|------|----------------|
| `Manual Marca XAMI.pdf` | `assets/Manual-Marca-XAMI.pdf` (original brand manual, PT-BR) |
| Xami icon (purple tile + white X) | `assets/icone-xami.svg` |
| Xami wordmark (purple) | `assets/logo-xami-roxo.svg` |
| Xami wordmark (light, for dark bg) | `assets/logo-xami-claro.svg` |
| XamiHub wordmark (purple) | `assets/logo-xamihub-roxo.svg` |
| XamiHub wordmark (light, for dark bg) | `assets/logo-xamihub-claro.svg` |
> ⚠️ **Caveat:** the brand manual PDF is a single, very-tall page that I was not able to fully rasterize in this environment. All primary tokens below are either pulled directly from the SVG logo fills (`#7543FF` and `#E6EAFF`) or from the manual's text content (font names, tagline, values). Secondary palette, spacing, elevation, and component patterns are **derived** from the primary brand marks in a way that is internally consistent — you should confirm them against the manual before shipping production work.
---
## Index
- `README.md` — this file.
- `colors_and_type.css` — **all design tokens**: CSS custom properties for color, type, spacing, radii, elevation, plus semantic element styles.
- `SKILL.md` — agent-facing skill descriptor so this folder can be used as a standalone Claude Code skill.
- `assets/` — logos, icons, raw brand manual.
- `preview/` — cards for the Design System tab (logos, color, type, radii, etc).
- `ui_kits/marketing-site/` — high-fidelity recreation of the XamiHub marketing site (landing, hero, CTA, feature sections).
---
## Content fundamentals
**Language.** Portuguese (Brazil) is the primary voice. English is acceptable for technical/code surfaces and international marketing.
**Voice & tone.**
- **Confident, short, declarative.** The tagline — *"Plataforma onde toda inteligência acontece"* — sets the template: one assertive sentence, period, no hedging.
- **Product-forward, not corporate.** Talk about what the platform does for the user, not about the company as an entity.
- **Technical but warm.** The word "inteligência" does heavy lifting in this brand — it frames the product as smart and infrastructural without sounding cold. Match that: concrete nouns, active verbs.
**Casing.**
- **Sentence case** for all UI copy, headlines, buttons, nav, and body. Never Title Case, never ALL CAPS for headlines.
- **ALL CAPS** is reserved for micro-labels / overlines / data tags, and even there it is set in **Roboto Mono**, not Inter uppercase. Examples: `ORGANIZAÇÃO`, `DESEMPENHO`, `API`, `v2.4`.
- Product names keep their cap as written: **Xami**, **XamiHub**, **xamihub.com.br**.
**Pronouns.**
- Prefer **"você"** (informal "you" in PT-BR) when addressing the user.
- Use **"nós / a gente"** sparingly. The product speaks — the company stays backstage.
**Emoji.** **Not used in product or marketing surfaces.** The brand mark itself is already an expressive glyph; emoji dilutes it. Exception: internal comms / social captions may use them, but never inside the UI.
**Vibe.** Quiet confidence. Think "Linear meets Stripe in Portuguese." Not playful, not corporate, not hype-y. Declarative headlines, precise sub-copy, lots of breathing room.
**Examples.**
✅ Good
- "Plataforma onde toda inteligência acontece."
- "Conecte seus dados. Organize o que importa."
- "Desempenho em tempo real."
- "ORGANIZAÇÃO" *(mono eyebrow above a feature card)*
❌ Avoid
- "🚀 Bem-vindo ao Xami! Vamos transformar seus dados?" *(emoji + hype + question)*
- "We Empower Your Business With AI-Driven Insights" *(title case + English on marketing surfaces + generic SaaS language)*
- "Clique aqui para saber mais!" *(exclamation + vague CTA)*
---
## Visual foundations
**The signature look.** Dark, deep-navy surfaces (`--xami-ink-900` / `#0D0C24`) with a single saturated purple (`--xami-purple-500` / `#7543FF`) as the one accent, and lavender text (`--xami-lavender-100` / `#E6EAFF`) as the primary foreground on dark. This is the brand's hero treatment — use it for hero sections, full-bleed product shots, and any "marketing moment." Light mode is a supporting theme for docs and dense admin surfaces.
**Colors.**
- **Primary:** `#7543FF` — THE brand color. Use on one element per screen at full saturation. Great for primary CTAs, the icon tile, focus rings, key data accents.
- **Lavender `#E6EAFF`:** the text tone on dark surfaces. Do not use pure white.
- **Ink `#0D0C24`:** the canvas on hero/dark surfaces. Do not use `#000`.
- **Semantic:** success `#2DD4A4`, warning `#F5B547`, danger `#FF5C7A`, info `#5B9BFF`. Muted, not neon.
- Full scales (50–900 for purple, neutrals, inks) live in `colors_and_type.css`.
**Typography.** Two families only:
- **Inter** — all UI, body, headlines, display. Weights 400 / 500 / 600 / 700.
- **Roboto Mono** — code, data tables, kbd, and **uppercase micro-labels / overlines**. Weight 400 / 500.
Type scale is a modular-ish ramp from 11 → 88 px (see `--text-*` tokens). Display headlines use `clamp()` so they scale fluidly.
> Note on fonts: Both Inter and Roboto Mono are loaded from Google Fonts' CDN (`fonts.gstatic.com`). No local `.ttf`/`.woff2` files were provided, so I went straight to the canonical Google Fonts source instead of a substitute. If XamiHub has licensed variable-font files, drop them in `fonts/` and update `colors_and_type.css`.
**Spacing.** 4-px base grid. Tokens `--space-1` (4) through `--space-32` (128). Typical rhythm: card padding `--space-6`; section vertical padding `--space-16`–`--space-24`; inline gaps `--space-2`–`--space-3`.
**Backgrounds.**
- **Solid, deep ink** is the default hero bg. Not a gradient.
- **Very subtle radial glow** (a huge, low-opacity `--xami-purple-500` radial at the top of hero sections) is the one "atmospheric" treatment allowed. Implement as a `radial-gradient` with 40–60 % max opacity at center, fading to transparent.
- **No full-bleed photography** in the brand manual. Imagery is sparse.
- **No repeating textures / grain / hand-drawn illustration.** This brand is clean and geometric.
- **No rainbow / bluish-purple-to-pink gradients.** Purple-to-ink is the only acceptable gradient, and only as a glow, not a flat fill.
**Animation.**
- Short, crisp. 120–200 ms for micro-interactions, 240–320 ms for larger transitions.
- Easing: `cubic-bezier(0.2, 0.8, 0.2, 1)` (ease-out-quint-ish) for most UI; `ease-in-out` for long transitions.
- **Fades + 4-px y-shifts** for entrances. No bounces, no springs, no elastic.
- Hover and press states are the primary interaction feedback — don't over-animate.
**Hover states.**
- On dark surfaces: **raise** luminance by ~6 % (use `--bg3` or `rgba(230, 234, 255, 0.06)` overlay).
- On purple primary: **darken to `--xami-purple-600`** (`#5E2FE0`).
- On light surfaces: **darken 4 %** via an `rgba(13, 12, 36, 0.04)` overlay.
**Press / active states.**
- **Color darkens** one more step (purple → `--xami-purple-700`).
- **Scale `0.98`** for buttons. No shrink below 95 %.
- **Focus ring:** double-ring — 2 px of surface color + 2 px of `--xami-purple-400` (token `--focus-ring`).
**Borders.**
- Near-invisible on dark: `rgba(230, 234, 255, 0.09)` for dividers, `0.16` for input / card borders.
- On light: `rgba(13, 12, 36, 0.08)` / `0.14`.
- Never use `border: 1px solid #ccc`. Always a token.
**Shadows.**
- Dark mode **leans on borders and glow**, not drop shadows (shadows get lost on ink surfaces).
- Signature glow: `--shadow-glow` — a 1 px purple border + a soft purple drop shadow. Use on CTAs and the highlighted feature card.
- Light mode uses conventional shadows (`--shadow-sm/md/lg`).
**Transparency & blur.**
- Used for **floating overlays** only: dropdowns, modals, sticky top-bars when content scrolls beneath.
- Recipe: `background: rgba(13, 12, 36, 0.72); backdrop-filter: blur(18px);`.
- Do **not** use frosted blur for hero backgrounds, cards, or decorative surfaces.
**Corner radii.** A calm set: `xs 4`, `sm 8`, `md 12`, `lg 16`, `xl 24`, `2xl 32`, `pill 999`. The Xami icon tile uses a specific **23.87 %** radius (mirroring `11.827 / 49.516` from `icone-xami.svg`) — exposed as `--radius-icon`.
**Cards.**
- Dark mode: `background: var(--bg2)`, `border: 1px solid var(--border2)`, radius `--radius-lg` (16 px), no shadow. A hover hint is: border becomes `rgba(117, 67, 255, 0.35)`.
- Light mode: same structure, with `--shadow-sm` added.
- Featured / highlighted card: adds `--shadow-glow` and keeps the purple border full-saturation.
**Layout rules.**
- **12-column grid**, 72 px max gutter desktop; stack to 1 column at ≤ 768 px.
- **Content max-width 1200 px** for marketing. **1440 px** for dense product surfaces.
- **Fixed top nav** at 64 px tall; transparent on hero, solid `--bg1` + `border-bottom` once scrolled.
- No fixed side rails in marketing. Product surfaces may use a 240 px left sidebar.
---
## Iconography
**No bespoke icon set in the brand manual.** XamiHub's own expressive mark is the Xami "X" glyph (inside a rounded purple tile) — it functions as both logo and primary brand icon.
**Recommended icon system: [Lucide](https://lucide.dev)** — CDN-available, open-source, 1.5 px stroke, rounded line caps. It matches the brand's calm / geometric / technical feel and the slight roundness of the Xami logotype.
**Substitution flag.** This is my choice — the manual did not specify a line-icon set. If XamiHub has an existing icon library in production code, swap it in. Good near-alternatives: **Phosphor** (regular weight), **Tabler Icons**.
**Usage rules.**
- **Size.** 16 px in inline UI; 20 px in buttons; 24 px in nav; 32 px in feature cards.
- **Stroke.** Always 1.5 px. Never filled.
- **Color.** Inherit from text (`currentColor`). Switch to `--fg-accent` only when the icon is itself the interactive affordance.
- **Emoji.** Not used. See Content Fundamentals.
- **Unicode chars as icons.** Avoid. Use a real SVG icon.
- **Raster icons.** Avoid. All icons must be inline SVG for CSS color inheritance and crispness.
**Loading Lucide from CDN:**
```html
```
All assets in `assets/` are SVG. No PNG icons shipped.
---
## Quick start
```html
PLATAFORMA
Plataforma onde toda inteligência acontece.
Conecte, organize e visualize tudo o que importa no seu negócio.
