Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.tariqdev.xyz/llms.txt

Use this file to discover all available pages before exploring further.

​
Colors and Theme

Global visual styling lives in: 
app/globals.css
Use this file to change the theme without editing every component.
Change tokens first. Edit component classes only when the token system cannot express the brand style you need.

​
Accent Tokens

Main accent colors: 
:root {
  --accent: #9333ea;
  --accent-hover: #a855f7;
  --accent-text: #c084fc;
  --accent-glow: #7e22ce;
}
Also update: 
lib/config/site.ts
Look for: 
seo.themeColor

​
Background Tokens

--bg-base
--bg-surface
--bg-elevated
Use these for page backgrounds, cards, panels, and elevated surfaces.

​
Text Tokens

--text-base
--text-dim
--text-muted
--text-subtle
--text-faint
If readability feels weak in light mode, update html.light values too.

​
Light Mode

Light mode overrides live in: 
html.light {
}
When changing color, depth, or contrast, check both modes.

​
Depth Tokens

Sonata uses depth tokens to create tactile buttons and cards. Important tokens: 
--depth-highlight
--depth-highlight-strong
--depth-shadow-soft
--depth-shadow-deep
--depth-accent-shadow
--depth-accent-glow
--depth-surface-shadow
--depth-surface-shadow-hover
--depth-control-shadow
--depth-control-shadow-hover
--depth-accent-shadow-stack
--depth-accent-shadow-hover
--depth-pressed-shadow

​
Shared Visual Hooks

.game-plan-card
.product-plan-card
.hero-cta-soft
Use these hooks for consistent visual language.

​
Border Beam

Border beam values: 
--border-beam-size
--border-beam-width
--border-beam-color-from
--border-beam-color-to
--border-beam-opacity
--border-beam-blur
If the beam feels too bright, lower --border-beam-opacity. If it feels too sharp, increase --border-beam-blur.
  1. Pick one primary accent color.
  2. Create hover, text, and glow variants.
  3. Update dark mode tokens.
  4. Update html.light tokens.
  5. Update seo.themeColor.
  6. Test buttons, badges, cards, nav, and forms.

​
Contrast Checks

Check contrast on:
  • Primary buttons.
  • Secondary buttons.
  • Plan card text.
  • Muted feature text.
  • Header links.
  • Footer links.
  • Form placeholders.
  • Badges and pills.
If a color works in dark mode but looks weak in light mode, create a separate light mode value.

​
Button and Card Depth

Sonata’s visual style depends on depth. When changing shadows:
  • Keep pressed states visibly different from hover states.
  • Avoid shadows that make small button text harder to read.
  • Check card hover states on light backgrounds.
  • Check primary CTA glow against hero content.

​
Rebrand Checklist

  • Accent tokens updated.
  • Light mode tokens updated.
  • Metadata theme color updated.
  • Logo assets replaced.
  • Open Graph image replaced.
  • Favicon replaced.
  • Buttons are readable.
  • Cards still have clear borders.
  • Border beam is visible but not distracting.