Buddy Design Skill

Read `README.md` first — it covers product context, content
fundamentals (voice, casing, emoji rules), and visual foundations (colour,
type, borders, animation).

Other files worth knowing:

• `colors_and_type.css` — every token (colours,
  type scale, spacing, radii, the chunky shadow system).
• `assets/` and `assets/ICONOGRAPHY.md`
  — brand mark, logo, lucide-react usage rules.
• `ui_kits/buddy_app/` — pixel-faithful recreation of
  the three core screens (Home, Session Booking, Active Session). Copy
  components out of here when prototyping new flows.
• `preview/` — design-system review cards (use as visual
  reference for buttons, badges, stat cards, etc.).

When invoked

If creating throwaway visual artifacts (mocks, prototypes, slides), copy
assets out and produce static HTML files for the user to view.

If working on production code, you can copy assets and read the rules here
to become an expert in designing with this brand — colour, type and
component recipes match the live codebase at
https://github.com/gikenye/Buddy.

If the user invokes the skill without specific guidance, ask what they want
to build (a new screen? a marketing page? a slide?), confirm the surface
(mobile miniapp is the default — desktop is rare), and act as an expert
designer producing HTML artifacts or production code as appropriate.

Non-negotiables

• Dark mode only — #1a1625 is the page background, always.
• Chunky borders — 4px solid #3d3847 on cards and buttons.
• Hard offset shadow — 0 6px 0 0 rgba(0,0,0,0.4), no blur. Pressed
  state drops to 3px offset.
• UPPERCASE titles, sentence-case body. Never the reverse.
• System font stack. Do not invent a webfont.
• Neon as accent, never as background. No neon gradients, no glassy
  blur effects.
• Emoji belong to achievements and the focus bot, not UI chrome.