---
name: mrk-wp-brand-guidelines
description: Enforces official MRK WP design system, branding rules, color contrast constraints, and HyperFrames motion specifications. Use whenever building, styling, or animating MRK WP components or video assets.
---

# MRK WP Brand Constitution & AI Directives

## 1. Color Palette & Strict Contrast Rules
- **Primary Brand Blue**: `#2B59FF`
  - Used for primary CTA buttons, active links, brand highlights.
  - Hover state: `#2047E0` with the Button Rise & Shadow effect (`btn-rise btn-rise-blue`).
- **Deep Navy**: `#0A2540`
  - Standard color for all headings (H1-H4), hero titles, and high-contrast dark card containers.
- **Page Canvas Background**: `#F8FAFC`
  - The universal page background. Headers and content sections MUST share this background seamlessly with NO border seams or unbordered white bands.
- **Card Fill**: `#FFFFFF`
  - PURE WHITE is ONLY permitted inside bordered containers (`border border-slate-200/90 rounded-2xl`). Never use floating white section bands.
- **CRITICAL CONTRAST RULE: Accent Cyan (`#00D4FF`)**:
  - `#00D4FF` is STRICTLY PROHIBITED on white, light grey, or off-white backgrounds (fails WCAG AA legibility).
  - `#00D4FF` is EXCLUSIVELY allowed on dark backgrounds (`#0A2540`, slate-900, dark video frames) as highlights or glowing accents.

## 2. Typography & Fonts
- **Headings (H1, H2, H3, H4)**: `Space Grotesk`, font-weight `700` or `800`, tight letter-spacing (`tracking-tight`), color `#0A2540`.
- **Body, Nav & Labels**: `Outfit`, `font-normal` or `font-semibold`, text color `#475569` (slate-600) on light backgrounds.

## 3. Standard CTA Copy & Buttons
- **Standard CTA Copy**: Always use `Work with us` for consultation, inquiry, and contact triggers.
  - DO NOT use legacy "Work with Matt" or "Discuss your website with Matt".
- **Primary Button Class**: `btn-rise btn-rise-blue bg-[#2B59FF] hover:bg-[#2047E0] text-white font-bold px-5 py-3 rounded-xl shadow-xs cursor-pointer`.
- **Secondary Button Class**: `btn-rise bg-white border border-slate-300 hover:border-[#2B59FF]/40 hover:bg-slate-50 shadow-xs text-[#0A2540] font-semibold px-5 py-3 rounded-xl cursor-pointer`.
  - Secondary buttons always have a white fill and a visible `border-slate-300` border. Never a grey fill (`bg-slate-100`) on the slate-50 page: it reads as a panel, not a button.
- **Button Width**: buttons are always sized to their label (`inline-flex` or `inline-block`, plus `self-start` inside flex columns). Never `w-full` on a button, and never `items-stretch` on a row that stacks buttons on phones. Full-width rows are only for list items such as contents, chapters and filters.

### Button Rise & Shadow (required on every CTA button)
- On hover and keyboard focus the button **rises 3px** (`translate: 0 -3px`) and casts a **soft drop shadow underneath**, tinted to the button colour.
- While pressed it **settles to 1px** with a tighter shadow (90ms) — a physical "push". Do NOT use `active:scale-*` on buttons.
- Timing: 220ms, signature easing `cubic-bezier(0.16, 1, 0.3, 1)`. Disabled buttons do not rise. `prefers-reduced-motion` keeps the shadow but drops the movement.
- Shadow tint: `btn-rise-blue` on #2B59FF buttons, `btn-rise-red` on YouTube red buttons, neutral navy (default) on navy, white and slate buttons.
- `btn-rise` owns the transition: never combine it with `transition-colors`, `transition-all` or `duration-*` (they override it and the rise stops animating).
- Applies to buttons and button-styled links only — not nav text links, menu rows or filter pills. Cards keep the separate Lift & Shadow rule below.
- Definition (`src/index.css`, Tailwind v4):

```css
@utility btn-rise {
  transition-property: translate, box-shadow, background-color, border-color, color, opacity;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  &:hover:not(:disabled), &:focus-visible {
    translate: 0 -3px;
    box-shadow: 0 14px 22px -10px var(--btn-rise-shadow, rgb(10 37 64 / 0.4)), 0 4px 8px -4px rgb(10 37 64 / 0.12);
  }
  &:active:not(:disabled) {
    translate: 0 -1px;
    box-shadow: 0 6px 12px -6px var(--btn-rise-shadow, rgb(10 37 64 / 0.4)), 0 2px 4px -2px rgb(10 37 64 / 0.1);
    transition-duration: 90ms;
  }
  @media (prefers-reduced-motion: reduce) { &:hover, &:focus-visible, &:active { translate: none; } }
}
@utility btn-rise-blue { --btn-rise-shadow: rgb(43 89 255 / 0.55); }
@utility btn-rise-red { --btn-rise-shadow: rgb(220 38 38 / 0.5); }
```

## 4. Spacing & Container Alignment
- **Container**: Uniform width `max-w-6xl mx-auto px-4 sm:px-6 lg:px-8`.
- **Header Start Line**: `pt-8 mb-[38px]` consistently across all pages (videos, articles, tools, products, style guide).
- **Single Article / Detail Headers**: Keep clean and uncluttered. Remove share buttons, YouTube channel buttons, and external visit buttons from the top header block.

## 5. Card Hover & Elevation (No Blue Outlines)
- Never use bright blue borders on hover.
- Standard hover effect: Lift & Shadow:
  `transition-all duration-200 hover:-translate-y-1.5 hover:shadow-lg hover:shadow-slate-200/50 hover:border-slate-300`

## 6. HyperFrames & Motion Specifications
- **Frame Rate**: 60 FPS deterministic keyframes.
- **Signature Easing**: Snappy cubic-bezier `cubic-bezier(0.16, 1, 0.3, 1)` for card reveals, modal popups, and motion graphics.
- **Spring Physics**: `{ stiffness: 260, damping: 20, mass: 1 }` for realistic card bounces.
- **Card Tilt (`TiltCard`)**: Feature cards (founder photo cards, the call-to-action card) tilt toward a mouse or pen (never on touch, so scrolling stays smooth), max `9deg` on X/Y, driven by `src/scripts/enhance.ts` with no React state, with perspective `1200px` and a soft glare; `holographic` adds the cyan/indigo wash on dark cards. Float text layers 40–64px in front with `translate-z-[40px]`–`translate-z-[64px]` plus `text-float` (contact + cast text shadow). Always use the bracket form: Tailwind's `translate-z-40` means 160px and throws text past the card edge, and never put `overflow-hidden` on the tilting card (it flattens the 3D) — round the children instead. Still under `prefers-reduced-motion`.
- **Motion Glows**: Cyan `#00D4FF` glows (`box-shadow: 0 0 24px rgba(0, 212, 255, 0.35)`) are STRICTLY limited to dark containers.
- **Staggered Delays**: 40ms–60ms per list item for natural sequenced entrances.