Frontier UI

When to Use

• Creating or modifying any UI component (buttons, cards, sections, etc.)
• Designing new page sections
• Adding interactive elements with hover states
• Implementing typography and color schemes
• Creating visual effects (glows, gradients, animations)
• Working with responsive layouts

Critical Patterns

Color Palette

Backgrounds (Dark Theme)

• Primary: bg-slate-950 (darkest)
• Secondary: bg-slate-900, bg-slate-800
• Accents: bg-slate-800/50 (semi-transparent)

Accent Colors

• Primary: cyan (cyan-500, cyan-400, cyan-300)
• Secondary: purple (purple-500, purple-400)
• Success: green (green-400, green-500)
• Info: blue (blue-500)
• Warning: orange (orange-500)
• Error: pink (pink-500)

Text Colors

• Primary: text-slate-300, text-white
• Secondary: text-slate-400
• Muted: text-slate-500

Gradients

Text Gradients

<span class="bg-gradient-to-r from-cyan-400 via-cyan-300 to-purple-400 bg-clip-text text-transparent">
  Frontier Code
</span>

Background Gradients

<!-- Hero background -->
<div class="bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950"></div>

<!-- Button gradient -->
<div class="bg-gradient-to-r from-cyan-500 to-cyan-600"></div>
<div class="bg-gradient-to-r from-purple-500 to-cyan-500"></div>

<!-- Dynamic text gradient -->
<span class="bg-gradient-to-r from-purple-400 to-cyan-400 bg-clip-text text-transparent"></span>

Typography

Hero Headings

<h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold">
  Title
</h1>

Subheadings

<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-light text-slate-300">
  Subtitle
</h2>

Body Text

<p class="text-lg sm:text-xl text-slate-400 leading-relaxed">
  Description text
</p>

Small Labels

<span class="px-4 py-2 bg-slate-800/50 border border-cyan-500/30 rounded-full text-cyan-400 text-sm font-mono">
  &lt;Frontier /&gt;
</span>

Status Badges

<div class="flex items-center gap-2">
  <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
  <span class="text-slate-500 text-sm font-mono">Status</span>
</div>

Spacing

Vertical Spacing

• Sections: py-16 sm:py-20 lg:py-24
• Margin between elements: mb-8, mb-12, mb-16
• Gap: gap-2, gap-4, gap-8

Borders

Subtle Borders

<!-- Outline button/badge -->
class="border-2 border-cyan-500/50"

<!-- Badge border -->
class="border border-cyan-500/30"

<!-- Hover state border -->
class="hover:border-cyan-400"

Rounded Corners

• Buttons/badges: rounded-lg
• Circular elements: rounded-full

Shadows & Glows

Text Shadow

style="text-shadow: 0 0 40px rgba(0, 245, 255, 0.5);"

Blur Effects

<!-- Background glow orbs -->
<div class="w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl animate-pulse"></div>

<!-- Button shadow -->
class="hover:shadow-lg hover:shadow-cyan-500/50"

Animations

Pulse Animation

class="animate-pulse"
<!-- Add delay for staggered effects -->
style="animation-delay: 0.2s;"

Bounce Animation

class="animate-bounce"

Custom Blink (Cursor)

<style>
  @keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
  }
  .animate-blink {
    animation: blink 1s infinite;
  }
</style>
<span class="w-2 h-8 bg-purple-400 animate-blink"></span>

Transitions

Standard Transitions

class="transition-all duration-300"

<!-- Hover effects -->
class="hover:scale-105"
class="hover:shadow-lg hover:shadow-cyan-500/50"
class="hover:bg-cyan-500/10"
class="hover:border-cyan-400 hover:text-cyan-300"

<!-- Opacity transitions -->
class="opacity-0 group-hover:opacity-100 transition-opacity duration-300"

Buttons

Primary Gradient Button

<a href="#" class="group relative px-8 py-4 bg-gradient-to-r from-cyan-500 to-cyan-600 text-white font-semibold rounded-lg overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/50">
  <div class="absolute inset-0 bg-gradient-to-r from-purple-500 to-cyan-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
  <span class="relative flex items-center gap-2">
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="..." />
    </svg>
    <span>Button Text</span>
  </span>
</a>

Outline Button

<a href="#" class="px-8 py-4 border-2 border-cyan-500/50 text-cyan-400 font-semibold rounded-lg hover:bg-cyan-500/10 hover:border-cyan-400 hover:text-cyan-300 transition-all duration-300 hover:scale-105">
  Button Text
</a>

Sections

Hero Section Structure

<section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden bg-slate-950">
  <!-- Background layers -->
  <div id="particles" class="absolute inset-0 opacity-20"></div>
  <div class="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950"></div>

  <!-- Glow orbs -->
  <div class="absolute top-0 left-1/4 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl animate-pulse"></div>
  <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl animate-pulse" style="animation-delay: 1s;"></div>

  <!-- Grid pattern -->
  <div class="absolute inset-0 bg-[linear-gradient(rgba(0,245,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,245,255,0.03)_1px,transparent_1px)] bg-[size:50px_50px]"></div>

  <!-- Content -->
  <Container>
    <div class="relative z-10 max-w-5xl mx-auto text-center">
      <!-- Content goes here -->
    </div>
  </Container>
</section>

Standard Section

<section id="{id}" class="relative py-16 sm:py-20 lg:py-24 bg-slate-950">
  <Container>
    <div class="max-w-6xl mx-auto">
      <!-- Section content -->
    </div>
  </Container>
</section>

Container Pattern

<div class="relative z-10 max-w-5xl mx-auto text-center">
  <!-- Centered content -->
</div>

<div class="max-w-6xl mx-auto">
  <!-- Full-width container -->
</div>

<div class="max-w-3xl mx-auto leading-relaxed">
  <!-- Text content -->
</div>

Responsive Design

Always use mobile-first responsive utilities:

<!-- Spacing -->
class="py-16 sm:py-20 lg:py-24"

<!-- Typography -->
class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl"

<!-- Layout -->
class="flex flex-col sm:flex-row gap-4 justify-center"

Icons

<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="..." />
</svg>

Code Examples

Complete Badge Component

---
const { label = '', color = 'cyan' } = Astro.props;
const colors = {
  cyan: 'text-cyan-400 border-cyan-500/30 bg-slate-800/50',
  purple: 'text-purple-400 border-purple-500/30 bg-slate-800/50',
  green: 'text-green-400 border-green-500/30 bg-slate-800/50'
};
---
<span class={`px-4 py-2 rounded-full text-sm font-mono border ${colors[color]}`}>
  {label}
</span>

Status Indicator with Delay

---
const { status = '', color = 'green', delay = 0 } = Astro.props;
const colors = {
  green: 'bg-green-500',
  cyan: 'bg-cyan-500',
  purple: 'bg-purple-500'
};
---
<div class="flex items-center gap-2">
  <div class={`w-2 h-2 ${colors[color]} rounded-full animate-pulse`} style={`animation-delay: ${delay}s;`}></div>
  <span class="text-slate-500 text-sm font-mono">{status}</span>
</div>

Decision Tree: Which Style to Apply?

Anti-Patterns

❌ Don't use:

• White backgrounds for main sections (use slate-950/slate-900)
• Solid colors without gradients for accents
• Sharp corners on buttons/badges (use rounded-lg/rounded-full)
• Heavy shadows without color tint (use shadow-{color}/50)
• Text without spacing (add leading-relaxed)
• Missing responsive utilities (always add sm: md: lg:)

Commands

No specific commands - UI is purely declarative through Tailwind classes.

Resources

• Examples: Hero section at src/components/sections/Hero.astro
• Color Reference: Use cyan/purple as primary accents, slate for neutrals
• Animation Library: Tailwind built-in + custom @keyframes for blinking