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.