Styling Patterns

Common Tailwind patterns used across all Juju Alpha sites.

Dark background

All sites use a dark background (bg-gray-950) with light text. The design system:

Token	Use
`bg-gray-950`	Page background
`text-gray-100`	Body text
`text-gray-400`	Secondary/muted text
`text-gray-300`	Slightly prominent text
`text-white`	Headings, important text
`border-white/5` to `border-white/10`	Subtle borders
`bg-white/3` to `bg-white/7`	Subtle card backgrounds

Section spacing

<section class="py-24 sm:py-32">
  <div class="max-w-6xl mx-auto px-4 sm:px-6">
    <!-- content -->
  </div>
</section>

py-24 sm:py-32 - generous vertical spacing, tighter on mobile
max-w-6xl mx-auto - content width constraint
px-4 sm:px-6 - horizontal padding

Section headers

<div class="text-center max-w-xl mx-auto mb-16">
  <p class="text-brand-400 font-semibold text-sm uppercase tracking-widest mb-3">Label</p>
  <h2 class="font-display text-4xl sm:text-5xl font-bold text-white leading-tight">
    Section heading.
  </h2>
  <p class="text-gray-400 mt-4">Supporting text if needed.</p>
</div>

The small uppercase label above the H2 adds visual hierarchy without another heading level.

Cards

<div class="bg-white/3 border border-white/7 rounded-2xl p-8">
  <!-- card content -->
</div>

For hover effects:

<div class="bg-white/3 border border-white/7 hover:border-brand-500/30 rounded-2xl p-8 transition-colors">

Buttons

Primary:

<a href="..." class="bg-brand-700 hover:bg-brand-600 text-white font-semibold px-6 py-3 rounded-xl transition-colors">
  Button text
</a>

Secondary/outline:

<a href="..." class="border border-white/10 hover:border-white/20 text-gray-300 hover:text-white font-semibold px-6 py-3 rounded-xl transition-colors">
  Button text
</a>

Full-width form button:

<button type="submit" class="w-full flex items-center justify-center gap-2 bg-brand-700 hover:bg-brand-600 text-white font-semibold py-4 rounded-xl transition-all hover:shadow-lg hover:shadow-brand-700/30">
  Submit
</button>

Form inputs

<input
  type="text"
  class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-gray-600 focus:outline-none focus:border-brand-500/50 focus:ring-1 focus:ring-brand-500/30 transition-colors"
/>

Alternating section backgrounds

Every other section uses a subtle alternate background for visual rhythm:

<section class="py-24 sm:py-32 bg-white/2 border-y border-white/5">

Typography classes

Class	Use
`font-display`	Headings (Plus Jakarta Sans)
`font-sans`	Body (Inter, default)
`text-4xl sm:text-5xl font-bold`	H2 headings
`text-3xl sm:text-4xl font-bold`	H2 on inner pages
`text-xl font-bold`	H3 / card headings
`leading-tight`	Tight line-height for headings
`leading-relaxed`	Comfortable line-height for body
`tracking-widest uppercase text-sm font-semibold`	Small label above heading