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.