232 lines
6.6 KiB
Markdown
232 lines
6.6 KiB
Markdown
# Design System Master File
|
|
|
|
> **LOGIC:** When building a specific page, first check `design-system/pages/[page-name].md`.
|
|
> If that file exists, its rules **override** this Master file.
|
|
> If not, strictly follow the rules below.
|
|
|
|
---
|
|
|
|
**Project:** SyncVito
|
|
**Generated:** 2026-09-23 17:52:06
|
|
**Category:** General
|
|
**Design Dials:** Variance 5/10 (Balanced / Modern) | Motion 3/10 (Subtle) | Density 7/10 (Standard)
|
|
|
|
---
|
|
|
|
## Global Rules
|
|
|
|
### Color Palette
|
|
|
|
| Role | Hex | CSS Variable |
|
|
|------|-----|--------------|
|
|
| Primary | `#2563EB` | `--color-primary` |
|
|
| On Primary | `#FFFFFF` | `--color-on-primary` |
|
|
| Secondary | `#3B82F6` | `--color-secondary` |
|
|
| On Secondary | `#000000` | `--color-on-secondary` |
|
|
| Accent/CTA | `#EA580C` | `--color-accent` |
|
|
| On Accent/CTA | `#000000` | `--color-on-accent` |
|
|
| Background | `#F8FAFC` | `--color-background` |
|
|
| Foreground | `#1E293B` | `--color-foreground` |
|
|
| Card | `#FFFFFF` | `--color-card` |
|
|
| Card Foreground | `#1E293B` | `--color-card-foreground` |
|
|
| Muted | `#E9EFF8` | `--color-muted` |
|
|
| Muted Foreground | `#475569` | `--color-muted-foreground` |
|
|
| Border | `#E2E8F0` | `--color-border` |
|
|
| Destructive | `#DC2626` | `--color-destructive` |
|
|
| On Destructive | `#FFFFFF` | `--color-on-destructive` |
|
|
| Ring | `#2563EB` | `--color-ring` |
|
|
|
|
**Color Notes:** Trust blue + orange CTA contrast [Accent adjusted from #F97316]
|
|
|
|
### Typography
|
|
|
|
- **Heading Font:** Inter
|
|
- **Body Font:** Inter
|
|
- **Mood:** dark, cinematic, technical, precision, clean, premium, developer, professional, high-end utility
|
|
- **Google Fonts:** [Inter + Inter](https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap)
|
|
|
|
**CSS Import:**
|
|
```css
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
```
|
|
|
|
### Spacing Variables
|
|
|
|
*Density: 7/10 — Standard*
|
|
|
|
| Token | Value | Usage |
|
|
|-------|-------|-------|
|
|
| `--space-xs` | `4px` / `0.25rem` | Tight gaps |
|
|
| `--space-sm` | `8px` / `0.5rem` | Icon gaps, inline spacing |
|
|
| `--space-md` | `16px` / `1rem` | Standard padding |
|
|
| `--space-lg` | `24px` / `1.5rem` | Section padding |
|
|
| `--space-xl` | `32px` / `2rem` | Large gaps |
|
|
| `--space-2xl` | `48px` / `3rem` | Section margins |
|
|
| `--space-3xl` | `64px` / `4rem` | Hero padding |
|
|
|
|
### Shadow Depths
|
|
|
|
| Level | Value | Usage |
|
|
|-------|-------|-------|
|
|
| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle lift |
|
|
| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.1)` | Cards, buttons |
|
|
| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.1)` | Modals, dropdowns |
|
|
| `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.15)` | Hero images, featured cards |
|
|
|
|
---
|
|
|
|
## Component Specs
|
|
|
|
### Buttons
|
|
|
|
```css
|
|
/* Primary Button */
|
|
.btn-primary {
|
|
background: #EA580C;
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
transition: all 200ms ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
opacity: 0.9;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Secondary Button */
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: #2563EB;
|
|
border: 2px solid #2563EB;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
transition: all 200ms ease;
|
|
cursor: pointer;
|
|
}
|
|
```
|
|
|
|
### Cards
|
|
|
|
```css
|
|
.card {
|
|
background: #F8FAFC;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
box-shadow: var(--shadow-md);
|
|
transition: all 200ms ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: var(--shadow-lg);
|
|
transform: translateY(-2px);
|
|
}
|
|
```
|
|
|
|
### Inputs
|
|
|
|
```css
|
|
.input {
|
|
padding: 12px 16px;
|
|
border: 1px solid #E2E8F0;
|
|
border-radius: 8px;
|
|
font-size: 16px;
|
|
transition: border-color 200ms ease;
|
|
}
|
|
|
|
.input:focus {
|
|
border-color: #2563EB;
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px #2563EB20;
|
|
}
|
|
```
|
|
|
|
### Modals
|
|
|
|
```css
|
|
.modal-overlay {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.modal {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 32px;
|
|
box-shadow: var(--shadow-xl);
|
|
max-width: 500px;
|
|
width: 90%;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Style Guidelines
|
|
|
|
**Style:** Minimalism & Swiss Style
|
|
|
|
**Keywords:** Clean, simple, spacious, functional, white space, high contrast, geometric, sans-serif, grid-based, essential
|
|
|
|
**Best For:** Enterprise apps, dashboards, documentation sites, SaaS platforms, professional tools
|
|
|
|
**Key Effects:** Subtle hover (200-250ms), smooth transitions, sharp shadows if any, clear type hierarchy, fast loading
|
|
|
|
### Page Pattern
|
|
|
|
**Pattern Name:** Hero + Features + CTA
|
|
|
|
- **Conversion Strategy:** Deep CTA placement. For CTA label text, verify at least 4.5:1 against the button fill; use 7:1 only when the product explicitly targets AAA normal-text contrast. Keep focus and component boundaries independently visible. Disable hero parallax under reduced motion and render its static final state.
|
|
- **CTA Placement:** Hero (sticky) + Bottom
|
|
- **Section Order:** Hero with headline/image > Value prop > Key features (3-5) > CTA section > Footer
|
|
|
|
---
|
|
|
|
## Motion
|
|
|
|
**Scroll Reveal** (Subtle) — Trigger: scroll (viewport enter) | Duration: 300-400ms | Easing: `power1.out`
|
|
|
|
```js
|
|
gsap.from(el, { opacity: 0, y: 12, duration: 0.35, ease: 'power1.out', scrollTrigger: { trigger: el, start: 'top 90%', toggleActions: 'play none none reverse' } });
|
|
```
|
|
|
|
**Framework notes:** Requires the ScrollTrigger plugin registered once via gsap.registerPlugin(ScrollTrigger); Use matchMedia('(prefers-reduced-motion: reduce)') to skip non-essential motion and render the final state immediately
|
|
|
|
- ✅ Keep the y offset small (8-16px) so it reads as a fade, not a slide
|
|
- ❌ Don't reveal below-the-fold content needed for SEO/crawlers as invisible-by-default without a no-JS fallback
|
|
- ⚡ toggleActions 'play none none reverse' avoids re-triggering on every scroll direction change
|
|
|
|
---
|
|
|
|
## Anti-Patterns (Do NOT Use)
|
|
|
|
|
|
### Additional Forbidden Patterns
|
|
|
|
- ❌ **Emojis as icons** — Use SVG icons (Heroicons, Lucide, Simple Icons)
|
|
- ❌ **Missing cursor:pointer** — All clickable elements must have cursor:pointer
|
|
- ❌ **Layout-shifting hovers** — Avoid scale transforms that shift layout
|
|
- ❌ **Low contrast text** — Maintain 4.5:1 minimum contrast ratio
|
|
- ❌ **Instant state changes** — Always use transitions (150-300ms)
|
|
- ❌ **Invisible focus states** — Focus states must be visible for a11y
|
|
|
|
---
|
|
|
|
## Pre-Delivery Checklist
|
|
|
|
Before delivering any UI code, verify:
|
|
|
|
- [ ] No emojis used as icons (use SVG instead)
|
|
- [ ] All icons from consistent icon set (Heroicons/Lucide)
|
|
- [ ] `cursor-pointer` on all clickable elements
|
|
- [ ] Hover states with smooth transitions (150-300ms)
|
|
- [ ] Light mode: text contrast 4.5:1 minimum
|
|
- [ ] Focus states visible for keyboard navigation
|
|
- [ ] `prefers-reduced-motion` respected
|
|
- [ ] Responsive: 375px, 768px, 1024px, 1440px
|
|
- [ ] No content hidden behind fixed navbars
|
|
- [ ] No horizontal scroll on mobile
|