EquipQR Brand Styling

Overview

Use this skill whenever Cursor should style an output to look like EquipQR (docs, UI mockups, slide decks, diagrams, emails, etc.). It summarizes the source-of-truth design tokens used by the EquipQR app so outputs stay consistent with the product.

Keywords: branding, corporate identity, visual identity, post-processing, styling, brand colors, typography, EquipQR brand, design tokens, Tailwind, shadcn/ui, visual formatting, visual design

Brand Guidelines

Source of truth

Design tokens: src/index.css (CSS variables under :root and .dark)
Tailwind mapping: tailwind.config.ts (colors like primary, secondary, success, info, warning, destructive, and brand map to CSS variables)

Colors

EquipQR uses token-based colors (HSL triplets) so the same semantic color names work in light and dark mode. Prefer semantic tokens (brand, primary, secondary, foreground, muted-foreground, etc.) over hard-coded hex values.

Core (Light mode / :root):

Background: 0 0% 100%
Foreground: 222.2 84% 4.9%
Primary (brand): 258 82% 57%
Primary foreground (text on primary): 210 40% 98%
Secondary: 224 61% 19%
Secondary foreground: 210 40% 98%
Muted: 210 40% 96.1%
Muted foreground: 215.4 16.3% 46.9%
Border/Input: 214.3 31.8% 91.4%

Status accents (Light mode / :root):

Success: 142 76% 36% (foreground 210 40% 98%)
Info: 217 91% 60% (foreground 210 40% 98%)
Warning: 38 92% 50% (foreground 222.2 84% 4.9%)
Destructive: 0 84.2% 60.2% (foreground 210 40% 98%)

Dark mode (.dark): Use the same semantic tokens; values shift for contrast.

Background: 222.2 84% 4.9%
Foreground: 210 40% 98%
Primary (brand): 258 82% 67%
Secondary: 224 61% 29%
Muted: 217.2 32.6% 17.5%
Muted foreground: 215 20.2% 65.1%

Practical usage rules:

Use brand / primary for primary calls-to-action and key highlights.
Use secondary sparingly (supporting actions, secondary emphasis).
Use muted + muted-foreground for de-emphasized UI (helper text, subtle separators).
For alerts/state, use success / info / warning / destructive; don’t invent new status colors.
Ensure text contrast by using the paired *-foreground token when placing text on a colored background.

Typography

EquipQR’s UI uses a clean, product-style system font approach (no decorative brand fonts required).

Recommended stack (web/docs/email): system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
Headings: Slightly heavier weight (semibold/bold), tighter line-height
Body: Regular weight, comfortable line-height
Note: Prefer consistency and legibility over custom fonts; don’t require font installs for good results.

Features

Token-based styling (light + dark)

Uses semantic tokens (brand, primary, foreground, etc.) instead of hard-coded colors
Maintains contrast by pairing backgrounds with their *-foreground tokens
Keeps outputs consistent with EquipQR UI in both light and dark themes

Text Styling

Keeps clear hierarchy (headline → section header → body)
Uses foreground/muted-foreground appropriately for emphasis
Avoids overly dense text blocks; favors scannable layouts

Shapes, highlights, and accents

Use brand/primary for highlights and key shapes (badges, callouts)
Use status colors only when the shape represents a status/alert
Prefer subtle neutrals (border, muted) for non-essential decoration

Technical Details

Font Management

Use a system font stack for predictable rendering across environments.
If a target format supports only a single font choice, pick the closest available system UI font and adjust weight/size for hierarchy.

Color Application

For CSS/Tailwind outputs, use hsl(var(--token)) via the semantic color name (e.g. text-foreground, bg-primary, bg-brand, border-border).
For non-CSS formats (slides, images, diagrams), convert the HSL tokens from src/index.css into the required color space (RGB/HEX) and keep the same semantic mapping.
Maintain fidelity by referencing the tokens rather than eyeballing colors.

brand-guidelines