ascent-frontend-design

name	ascent-frontend-design
description	Create distinctive, on-brand frontend interfaces for Ascent Training. Use this skill when building landing pages, marketing sites, app UI, React components, or any visual artifact for Ascent. Combines the mountain/guide brand identity with topographic map aesthetics and emerald/charcoal color system. Generates production-grade code that is immediately recognizable as Ascent.

Ascent Frontend Design Skill

This skill guides creation of distinctive, on-brand frontend interfaces for Ascent Training that are immediately recognizable and avoid generic "AI slop" aesthetics.

Brand Context

Ascent Training is an intelligently guided training platform for endurance athletes. The core metaphor is "You Climb. We Guide." — athletes do the work and earn their achievements, while Ascent provides expert direction and support.

Visual Identity: Premium, focused, outdoor-inspired. Think: the feeling of early morning on a mountain trail, topographic maps in a high-end outdoor shop, the precision of Apple combined with the soul of Patagonia.

NOT: Generic fitness app, startup purple gradients, clinical dashboards, or motivational poster aesthetics.

---

Signature Visual Elements

1. Topographic Map Backgrounds

THE defining visual element of Ascent. Use custom Mapbox topographic styling as hero backgrounds, section dividers, and atmospheric elements.

Mapbox Style URL: mapbox://styles/jeremy-kalmus/cmj0mlugz007h01r87296hs3n

Implementation patterns:

/* Full-bleed hero background */
.hero-map-background {
  background-image: url('mapbox-static-api-url');
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Gradient overlay for text legibility */
.hero-map-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.7) 0%,
    rgba(10, 10, 10, 0.4) 50%,
    rgba(10, 10, 10, 0.9) 100%
  );
}

/* Subtle contour line pattern for sections */
.section-with-terrain {
  background: 
    url('/patterns/contour-lines.svg') repeat,
    linear-gradient(180deg, #171717 0%, #0a0a0a 100%);
  background-blend-mode: soft-light;
}

When to use:

• Landing page hero (full viewport)
• Section backgrounds (subtle, with overlay)
• Card accents (cropped detail views)
• Email headers and social media graphics

Key principle: The map should feel like looking at actual terrain, not a decorative pattern. Show real topography with elevation, ridgelines, and valleys visible.

2. Emerald + Charcoal Color System

Primary Palette:

:root {
  /* Backgrounds - Charcoal scale */
  --bg-primary: #0a0a0a;      /* neutral-950 - deepest */
  --bg-secondary: #171717;    /* neutral-900 - cards */
  --bg-tertiary: #262626;     /* neutral-800 - elevated */
  --bg-interactive: #404040;  /* neutral-700 - inputs */

  /* Accent - Emerald scale */
  --accent-primary: #10b981;  /* emerald-500 - main */
  --accent-light: #34d399;    /* emerald-400 - hover */
  --accent-dark: #059669;     /* emerald-600 - pressed */
  --accent-subtle: #064e3b;   /* emerald-900 - backgrounds */
  --accent-glow: rgba(16, 185, 129, 0.2); /* glows, focus rings */

  /* Text */
  --text-primary: #fafafa;    /* neutral-50 */
  --text-secondary: #e5e5e5;  /* neutral-200 */
  --text-tertiary: #a3a3a3;   /* neutral-400 */
  --text-muted: #737373;      /* neutral-500 */

  /* Secondary accent */
  --accent-warm: #f59e0b;     /* amber-500 - warmth, energy */
}

Color meaning:

• Emerald: Growth, vitality, forward progress, nature, health
• Charcoal: Focus, sophistication, premium, nighttime training sessions
• Amber: Warmth, sunrise/sunset on peaks, energy, secondary emphasis

NEVER use: Purple gradients, bright blue CTAs, pure white backgrounds, or any "startup gradient" combinations.

3. Typography

Font Stack (Athletic Premium):

:root {
  --font-display: 'Outfit', system-ui, sans-serif;        /* Geometric, confident, athletic */
  --font-body: 'Inter', system-ui, sans-serif;            /* Clean, highly legible, modern */
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;  /* Metrics and data */
}

Typography rules:

• Headlines: Bold (700-800), confident, generous letter-spacing (-0.02em) using Outfit
• Body: Clean, highly legible (400-600), comfortable reading using Inter
• Data/metrics: Monospace, lighter weight, emerald accent using JetBrains Mono
• Size contrast: Use dramatic scale jumps (3x+), not timid 1.5x

Rationale: Outfit brings athletic confidence and geometric precision. Inter is the industry standard for body text—highly legible and professional without feeling generic.

Avoid: Roboto, Open Sans, Lato, or overly playful fonts.

4. Motion & Animation

Philosophy: Purposeful motion that reinforces the "ascent" metaphor. Elements rise, reveal, and settle — never bounce or wiggle.

/* Core timing */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}

/* Hero load-in: staggered rise */
.hero-content > * {
  opacity: 0;
  transform: translateY(20px);
  animation: rise-in 0.6s var(--ease-out) forwards;
}
.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content > *:nth-child(2) { animation-delay: 0.2s; }
.hero-content > *:nth-child(3) { animation-delay: 0.3s; }

@keyframes rise-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Emerald glow pulse for key elements */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px var(--accent-glow); }
  50% { box-shadow: 0 0 40px var(--accent-glow); }
}

/* Subtle parallax on scroll */
.parallax-slow { transform: translateY(calc(var(--scroll) * 0.1)); }
.parallax-medium { transform: translateY(calc(var(--scroll) * 0.2)); }

Motion vocabulary:

• Rise: Elements enter from below (climbing metaphor)
• Reveal: Content fades in with subtle movement
• Glow: Emerald accent pulses to draw attention
• Settle: Elements ease into final position (reaching summit)

Avoid: Bounce, wiggle, spin, or any playful/childish motion.

5. Spatial Composition

Layout principles:

• Generous whitespace: Premium feel, breathing room
• Asymmetric balance: Not rigid grids, but intentional imbalance
• Vertical rhythm: Strong vertical flow (the ascent)
• Full-bleed moments: Map backgrounds, hero sections that fill viewport
• Contained content: Max-width 1200px for text, let visuals break out

/* Content container */
.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 5vw, 4rem);
}

/* Full-bleed break */
.full-bleed {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* Vertical spacing scale */
.section { padding: clamp(4rem, 10vh, 8rem) 0; }
.section-tight { padding: clamp(2rem, 5vh, 4rem) 0; }

---

Component Patterns

Primary Button (CTA)

.btn-primary {
  background: var(--accent-primary);
  color: var(--bg-primary);
  font-weight: 600;
  padding: 1rem 2rem;
  border-radius: 12px;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  box-shadow: 0 0 20px var(--accent-glow);
}

.btn-primary:hover {
  background: var(--accent-light);
  transform: translateY(-2px);
  box-shadow: 0 0 30px var(--accent-glow);
}

.btn-primary:active {
  background: var(--accent-dark);
  transform: translateY(0);
}

Card Component

.card {
  background: var(--bg-secondary);
  border: 1px solid #262626;
  border-radius: 16px;
  padding: 1.5rem;
  transition: all var(--duration-normal) var(--ease-out);
}

.card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Card with emerald accent bar */
.card-accent {
  border-left: 4px solid var(--accent-primary);
}

Metric Display

.metric {
  font-family: var(--font-mono);
}

.metric-value {
  font-size: 3rem;
  font-weight: 300;
  color: var(--accent-primary);
  line-height: 1;
}

.metric-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-top: 0.5rem;
}

---

Landing Page Structure

For the Ascent landing page specifically:

Hero Section

• Full-viewport topographic map background
• Gradient overlay for text legibility
• Bold headline: "You Climb. We Guide."
• Subhead: One sentence value prop
• Single CTA: "Start Your Ascent" or "Join the Beta"
• Staggered rise animation on load

Problem/Solution Section

• Dark background (#0a0a0a)
• Split layout: problem (left) vs solution (right)
• Use amber accent for problem, emerald for solution
• Subtle contour line pattern in background

How It Works

• Three steps with mountain metaphor
• Basecamp → Ascent → Summit visual
• Icons or illustrations that feel outdoor/trail-inspired
• NOT generic icons or illustrations

Features

• Card grid with emerald accent bars
• Each card: Icon + Title + Brief description
• Hover reveals more detail
• Consider subtle map detail as card background

Social Proof

• Testimonials from real athletes (when available)
• Simple quotes, not elaborate carousel
• Athlete photo + name + discipline

CTA Section

• Return to topographic map background
• Simple, bold call to action
• Email capture for waitlist

Footer

• Minimal, dark
• Essential links only
• Small Ascent wordmark

---

What Makes Ascent Frontend Distinctive

1. Topographic maps — No other training app uses this. It's immediately recognizable.

2. Emerald + Charcoal — Not the purple/blue of most SaaS, not the orange/black of fitness apps.

3. Mountain/outdoor aesthetic — Premium outdoor brand feel, not generic tech startup.

4. Vertical motion — Everything rises, reinforcing the "ascent" metaphor.

5. Premium restraint — Apple-like polish with outdoor soul. Not cluttered, not clinical.

---

Anti-Patterns (NEVER Do These)

❌ Purple gradients on white backgrounds ❌ Inter, Roboto, or system fonts ❌ Generic hero images of runners ❌ Bright blue CTAs ❌ Bouncy/playful animations ❌ Stock photography of athletes ❌ Gradient buttons with multiple colors ❌ Busy patterns or textures ❌ Cookie-cutter SaaS layouts ❌ "Get Started Free" in blue button

---

Implementation Notes

For React/Next.js

• Use Tailwind CSS with custom config matching color system
• Import Bricolage Grotesque and Source Sans 3 from Google Fonts
• Use Framer Motion for animations
• Mapbox GL JS for interactive map elements

For Static HTML

• CSS custom properties for theming
• CSS animations (no JS required for core effects)
• Static Mapbox images for performance

For Artifacts/Prototypes

• Can use inline styles matching color system
• Include Google Fonts link in head
• Use placeholder for map images, describe the topographic effect

---

Quick Reference

Brand tagline: "You Climb. We Guide." Primary color: #10b981 (emerald-500) Background: #0a0a0a (charcoal/neutral-950) Font display: Bricolage Grotesque Font body: Source Sans 3 Signature element: Topographic map backgrounds Motion: Rise, reveal, glow — never bounce Vibe: Patagonia meets Apple meets midnight training sessions