commit e373c2b46c26db551792bec00794333bb3b8da64 Author: Vadym Samoilenko Date: Sat Feb 21 22:43:53 2026 +0000 feat: project setup & repository (Feature 1) - Next.js 16.1.6 with App Router, TypeScript strict, Tailwind CSS v4 - ESLint 9, Prettier with Tailwind class sorting plugin - Husky + lint-staged pre-commit hooks - Multi-stage Dockerfile (dev/build/production) with pnpm + Node 20 - docker-compose.yml with hot reload + PostgreSQL 17 - src/ directory structure (components, lib, hooks, types, payload) - .env.example template with all required variables - standalone output mode for production Docker builds Co-Authored-By: Claude Opus 4.6 diff --git a/.claude/commands/design-guidelines.md b/.claude/commands/design-guidelines.md new file mode 100644 index 0000000..cd93e04 --- /dev/null +++ b/.claude/commands/design-guidelines.md @@ -0,0 +1,160 @@ +--- +name: design-guidelines +description: Generate, update, or audit frontend design guidelines for Axil Accountants. Use this skill to create/maintain the design system documentation, review component consistency, or produce a design guidelines document. +--- + +You are a senior frontend design systems engineer working on **Axil Accountants** — a premium British accounting firm website. + +## Your Role + +When invoked, you produce or update the **Frontend Design Guidelines** document for the project. This document is the single source of truth for all visual and interaction decisions on the site. + +## Project Context (Always Apply) + +**Stack:** Next.js 15 · TypeScript · Tailwind CSS v4 · Framer Motion · GSAP · Three.js / R3F + +**Design Philosophy:** + +- Premium, airy, light — predominantly white/near-white backgrounds +- Sage green as an **accent**, not the dominant colour +- Generous whitespace — every element has room to breathe +- Glassmorphism cards for interactive surfaces +- Soft shadows only — no harsh drop shadows +- Every animation has a purpose — no decoration for its own sake +- British English throughout all copy + +--- + +## Design Guidelines Structure + +When asked to generate or update design guidelines, produce a document covering: + +### 1. Colour System + +- Full palette with hex values and usage rules +- Which colours are safe on dark backgrounds vs light +- Colour combinations to **avoid** (contrast failures) +- Overlay and tint values for interactive states (hover, focus, pressed) +- Green tints: `#6BAF7D`, `#A8C5A0`, `#F4FAF5`, `#2E7D52`, `#1A2E1F` + +### 2. Typography Rules + +- Font families and when to use each (Satoshi for display, Inter for body, DM Mono for numbers) +- Type scale: specific sizes for H1–H6, body, small, caption +- Line height and letter spacing rules per scale +- Forbidden: Arial, Roboto, system-ui as display fonts +- Max line length: 70 characters for body text + +### 3. Spacing & Layout + +- 8px base grid — all spacing multiples of 4px or 8px +- Section padding rules (desktop vs mobile) +- Container max-width (1440px) and gutter rules +- Card internal padding standards + +### 4. Component Patterns + +For each component, specify: + +- Default state +- Hover / focus state +- Active / pressed state +- Disabled state +- Dark background variant +- Mobile variant + +**Components to document:** + +- Button (primary, secondary, ghost) +- Card (glass, solid, feature) +- Navigation (desktop, mobile, dropdown) +- Form fields (input, select, checkbox, textarea) +- Badge / Tag +- Testimonial card +- Blog card +- Service card +- Modal / Overlay +- Accordion / FAQ + +### 5. Animation Principles + +- **Timing functions:** ease-out for entrances, ease-in for exits, ease-in-out for loops +- **Duration rules:** + - Micro-interactions (button hover): 150–200ms + - Element reveals (fade in): 300–500ms + - Page transitions: 400–600ms + - 3D loop animations: 8–20s +- **Stagger:** 80–120ms between sibling elements +- **ScrollTrigger start:** `top 80%` (element enters when 80% down viewport) +- **`prefers-reduced-motion`:** all animations must be wrapped in a media query check — skip or reduce motion for users who request it +- GSAP for scroll-driven + complex sequences +- Framer Motion for page transitions + React state-driven animations +- CSS transitions for simple hover states + +### 6. Iconography + +- Style: line icons, 1.5px stroke, rounded caps +- Size: 16px (small), 20px (default), 24px (large), 32px (feature) +- Colour: inherits text colour or explicit sage green +- Never use filled icons mixed with line icons in the same context +- Custom SVG components — no icon font libraries + +### 7. Imagery Guidelines + +- Photography: real people, authentic UK business settings, natural light +- Never use: stock photo clichés, handshake photos, generic office scenes +- All images: `next/image` with correct `alt` text +- Cover images: 16:9 ratio for blog, 4:3 for cards +- Hero images: full-width, overlaid with dark tint if text is on top +- Alt text: descriptive, contextual, British English + +### 8. Accessibility Standards + +- All text: WCAG AA (4.5:1 body, 3:1 large text) minimum +- Focus styles: `ring-2 ring-sage ring-offset-2` — never `outline: none` without replacement +- Interactive elements: minimum 44×44px touch target +- Form fields: always have a visible `