---
version: alpha
name: Lunar
description: Nordic digital bank confidence — SharpGrotesk at 62px weight 600, near-black atmospheric canvas, electric green accent, squared CTAs with squircle detail, and restraint bordering on monochrome.

colors:
  # Surface / canvas
  background: "#0a0a0a"          # near-black hero canvas; atmospheric dark mood
  surface: "#ffffff"             # light sections, card backgrounds
  surface-muted: "#f2f2f2"       # very light grey panels

  # Text / ink
  ink: "#ffffff"                 # primary text on dark canvas
  ink-dark: "#000000"            # primary text on light surfaces
  on-background: "#ffffff"
  on-surface: "#000000"

  # Neutrals
  text-secondary: "#969696"      # mid-grey, secondary text
  text-dim: "#6f6f6f"            # muted captions, tertiary text
  text-muted-light: "#dcdcdc"    # secondary on light surfaces

  # Brand accent
  primary: "#00cb39"             # Lunar electric green; CTAs, focus states, link underlines
  primary-alt: "#00d63c"         # badge variant of the green (slightly brighter)
  on-primary: "#000000"          # dark text on green surfaces

  # State / interaction
  text-hover: "#bfbfbf"          # link hover (was rgb(191,191,191))
  focus-ring: "#00cb39"          # green focus ring matches brand accent

  # Borders / dividers
  border: "#dddddd"              # 1px dividers on light surfaces (was rgb(221,221,221))
  border-subtle: "#f2f2f2"       # very light divider (was rgb(242,242,242))

  # Semantic
  success: "#00cb39"             # same green doubles as success signal
  error: "#ff3b3b"               # estimated — not found directly, standard red /* estimated */

  # Shadow tint
  shadow-soft: "#000000"         # used in subtle box-shadows at 0.15 opacity (was rgba(0,0,0,0.15) — flattened for hex)

typography:
  display-hero:
    fontFamily: "SharpGrotesk, Helvetica, Arial, sans-serif"
    fontSize: 62px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.5px
  heading-large:
    fontFamily: "SharpGrotesk, Helvetica, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.3px
  heading-section:
    fontFamily: "SharpGrotesk, Helvetica, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 0px
  heading-card:
    fontFamily: "SharpGrotesk, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "SharpGrotesk, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "SharpGrotesk, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-medium:
    fontFamily: "SharpGrotesk, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.60
    letterSpacing: 0px
  body-semibold:
    fontFamily: "SharpGrotesk, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.60
    letterSpacing: 0px
  nav-link:
    fontFamily: "SharpGrotesk, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.60
    letterSpacing: 0px
  button-ui:
    fontFamily: "SharpGrotesk, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.60
    letterSpacing: 0px
  label-upper:
    fontFamily: "SharpGrotesk, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: 1px
  caption:
    fontFamily: "SharpGrotesk, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 32px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  sm: 8px
  lg: 80px
  pill: 9999px

components:
  # Buttons — squared CTA, Lunar's signature shape
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-alt}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.ink-dark}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 24px
  button-secondary-hover:
    backgroundColor: "{colors.text-secondary}"
    textColor: "{colors.ink}"
  button-ghost:
    backgroundColor: "{colors.text-muted-light}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 24px
  button-ghost-hover:
    backgroundColor: "{colors.text-secondary}"
    textColor: "{colors.ink-dark}"

  # Nav CTA (header pill)
  button-nav-cta:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px

  # Cards
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-dark}"
    rounded: "{rounded.sm}"
    padding: 32px
  card-dark:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 32px

  # Badge / tophat
  badge-success:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 8px 24px
  badge-dark:
    backgroundColor: "{colors.ink-dark}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 6px 16px

  # Navigation
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
  nav-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 8px 12px
  nav-link-hover:
    textColor: "{colors.text-hover}"

  # Segment selector (personal/business toggle)
  segment-control:
    backgroundColor: "{colors.ink-dark}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.pill}"
    padding: 6px 20px

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 14px 16px
  input-focus:
    borderColor: "{colors.primary}"

  # Link states
  link-on-dark:
    textColor: "{colors.ink}"
    textDecoration: "underline 1.5px"
    borderColor: "{colors.primary}"
  link-on-dark-hover:
    textColor: "{colors.text-hover}"
---

# Lunar Design System

## Overview

Lunar is a Nordic digital bank that wraps premium financial services in an aesthetic that feels more like a premium consumer tech brand than a traditional lender. The design opens on near-black (`{colors.background}`), a canvas that reads as confident restraint — not "dark mode for its own sake" but a deliberate atmosphere where full-bleed photography of real life (someone relaxed on a couch, phone in hand) takes center stage without competing with interface chrome.

The typographic voice is carried entirely by SharpGrotesk, a contemporary grotesque self-hosted in four weights (Light, Book, Medium, SmBold). At 62px weight 600 with slightly negative tracking, the display headlines have the proportions of Nordic product design — geometric, unfussy, legible at any size. There is no display-mega stadium headline, no serif for warmth: just one font family doing every job. What varies is weight and size, which keeps the reading experience coherent even as the layout shifts from hero to feature cards to legal copy.

The electric green (`{colors.primary}`, `#00cb39`) is deployed with exceptional discipline. It appears as link underlines, the "Get Lunar for free now" CTA background, focus rings, and badge backgrounds on upgrade prompts — nothing else. The primary CTA button has `borderRadius: 0px` (squared, not rounded), a choice that reads as architectural and modern rather than soft or approachable. This shape contrast with the pill-rounded header nav CTA (`{colors.primary}`, `{rounded.pill}`) creates a clear visual hierarchy: the nav conversion action is friendly and inviting; the in-page conversion action is direct and assertive.

**Key Characteristics:**
- SharpGrotesk — single-family system across all four weights, no secondary typeface
- Near-black atmospheric hero (`{colors.background}`) with full-bleed lifestyle photography
- Electric green (`{colors.primary}`) accent used precisely: CTAs, link underlines, focus, badges only
- Squared CTA buttons (`{rounded.none}`, 0px radius) as a deliberate architectural statement
- Pill radius reserved for navigation-level elements and segment controls
- 8px base spacing scale with heavy use of 20px, 32px, 40px, 96px for section breathing room
- Minimal shadow philosophy — only one low-confidence shadow at 0.15 opacity
- Monochromatic greyscale palette with a single chromatic accent
- Personal/business segment toggle at the top of every page — product segmentation baked into navigation
- Heavy influence from Nordic minimalism: no gradients, no decoration, function-forward

## Colors

### Primary
- **Near-Black Canvas** (`{colors.background}`): The hero canvas and primary dark surface. Creates cinematic depth.
- **Pure White** (`{colors.surface}`): Light section backgrounds, card surfaces, form fields.
- **Muted Light** (`{colors.surface-muted}`): Subtle panel background on light sections.

### Text / Ink
- **White Ink** (`{colors.ink}`): All text on dark backgrounds.
- **Black Ink** (`{colors.ink-dark}`): All text on light surfaces.
- **Mid Grey** (`{colors.text-secondary}`): Secondary copy, subheadings, de-emphasized UI text.
- **Dim Grey** (`{colors.text-dim}`): Tertiary, captions, legal.
- **Light Muted** (`{colors.text-muted-light}`): Secondary text on light backgrounds; ghost button fill.

### Brand Accent
- **Lunar Green** (`{colors.primary}`): The sole chromatic accent. CTAs, link underlines on dark, focus rings, success badges.
- **Green Alt** (`{colors.primary-alt}`): Slightly brighter badge variant of the green.
- **On-Primary** (`{colors.on-primary}`): Black text on green surfaces for maximum contrast.

### Interaction States
- **Link Hover** (`{colors.text-hover}`): Light grey on hover — links lighten on dark, darken on light.
- **Focus Ring** (`{colors.focus-ring}`): Green ring; matches brand accent for consistency.

### Borders / Dividers
- **Border** (`{colors.border}`): Standard 1px divider on light surfaces.
- **Border Subtle** (`{colors.border-subtle}`): Barely-visible section separator.

## Typography

### Font Family
- **Primary**: `SharpGrotesk` — self-hosted geometric grotesque. Weights used: 300 (Light), 400 (Book), 500 (Medium), 600/700 (SmBold). Fallbacks: `Helvetica, Arial, sans-serif`.
- **No secondary typeface**: SharpGrotesk handles display, body, UI, captions. This enforces visual cohesion.
- **Note for agents**: SharpGrotesk is a licensed commercial typeface. Substitute `DM Sans` or `Plus Jakarta Sans` from Google Fonts for development.

### Hierarchy

The complete type scale is declared in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 62px/600 — primary hero headline, product section titles |
| `heading-large` | 36px/600 — feature section headings |
| `heading-section` | 28px/600 — subsection headers |
| `heading-card` | 24px/700 — card titles, feature card headings |
| `body-large` | 24px/400 — introductory body, key value props |
| `body` | 16px/400 — standard reading copy |
| `body-medium` | 16px/500 — emphasized body text |
| `body-semibold` | 16px/600 — interactive labels, feature callouts |
| `nav-link` | 14px/500 — navigation links |
| `button-ui` | 14px/500 — all button labels |
| `label-upper` | 15px/700 uppercase — section labels, badge text |
| `caption` | 12px/400 — legal, footnotes, fine print |

### Principles
- **Single family across all contexts**: No serif for warmth, no mono for code. SharpGrotesk handles every role through weight variation.
- **Weight as hierarchy signal**: The system runs 300–700, but most work happens at 400/500/600. Bold (700) appears only in cards and callouts.
- **Tight display line-heights**: 1.20 at hero sizes; body settles at 1.60. The gap between them creates a clear speed-of-reading distinction.
- **Sparse tracking**: Letter-spacing runs from -0.5px (display) to 1px (uppercase labels) — only the label token uses positive tracking, matching the uppercase caps style.
- **Consistent font-size axis**: Most body work happens at 14–16px. The jump to 24px body-large marks an important rhythm shift in section openers.

## Layout

### Spacing System
Base unit: **8px**. The scale runs from 4px (tight chip spacing) to 96px (section breathing room). The heaviest usage is at 20px (nav padding, feature grid gaps) and 32px/40px (card interiors, inter-section rhythm).

The 96px value (`{spacing.4xl}`) appears in hero padding — the amount of vertical space Lunar uses above and below its full-screen hero creates the sense that the photography is "presented" rather than crammed.

### Grid & Container
- Max content width: ~1280px (breakpoint evidence at 1248–1280px)
- Marketing sections use alternating full-width dark and light backgrounds
- Product cards use 2–3 column grids on desktop, collapsing to single column on mobile
- The hero is always full-viewport-height with photography background

### Whitespace Philosophy
- Generous section breathing: 96px vertical padding around hero, 64–80px between marketing sections
- Cards use consistent 32px internal padding — nothing feels cramped
- The dark canvas amplifies the sense of space; elements float in the void rather than competing for attention

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Dark canvas sections, hero — pure color separation |
| Subtle (Level 1) | `rgba(0,0,0,0.15) 0px 1px 2px 0px` | Light-surface cards, subtle lift |
| Card (Level 2) | `rgb(128,128,128) 0px 0px 5px 0px` | Floating UI elements, modals |
| Focus Ring | `{colors.focus-ring}` 2px solid | Accessibility focus on interactive elements |

**Shadow Philosophy**: Lunar barely uses shadows. The primary depth mechanism is the stark contrast between the near-black hero and white feature sections — color contrast does the elevation work. Only two shadows were detected with low confidence, both at minimal scale. On dark sections, depth comes from layering photography behind UI elements, not from drop shadows.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Primary CTAs, badge tophat strips — the signature squared shape |
| `sm` | 8px | Cards, canvases, input fields |
| `lg` | 80px | Menu list items, segment pills (large pill list items) |
| `pill` | 9999px | Nav CTA, segment toggle, cookie consent actions |

The radius system is deliberately polarized. CTAs are square; navigation and toggles are pill. Mid-range values (8px) appear only on container surfaces, never on interactive buttons. This creates a clear language: if it's a button that performs an action, it's square; if it's a navigation element or selector, it's pill-shaped.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants
- **`button-primary`** — Green (`{colors.primary}`) fill, black text (`{colors.on-primary}`), `{rounded.none}` (0px). The definitive Lunar CTA. Sharp-edged confidence.
- **`button-secondary`** — Black fill (`{colors.ink-dark}`), white text (`{colors.ink}`), `{rounded.none}`. Used for "Get Plus" tier upgrade prompts on dark sections.
- **`button-ghost`** — Light grey fill (`{colors.text-muted-light}`), dark text, `{rounded.none}`. Secondary action on light surfaces, e.g., "Contact us."
- **`button-nav-cta`** — Green pill (`{rounded.pill}`) in the navigation bar. Consistent with pill navigation language.

### Cards
- **`card`** — White surface (`{colors.surface}`), 8px radius, 32px padding. Used for feature and pricing cells on light sections.
- **`card-dark`** — Near-black surface (`{colors.background}`), same padding/radius. Used when a card element appears within dark hero sections.

### Badges
- **`badge-success`** — Green tophat (`{colors.primary}`, 0px radius, 8px 24px padding). Appears as "Most Popular" or feature highlight strips across subscription cards. No rounded corners — same architectural language as primary CTA.
- **`badge-dark`** — Dark pill badge with pill radius. Used in notification banners and feature callout chips.

### Navigation
- **`nav-bar`** — Near-black background on scroll, transparent over hero photography. SharpGrotesk 14px/500.
- **`nav-link`** — White text with green 1.5px underline decoration on hover state. Hover transitions to `{colors.text-hover}` (grey).
- **`segment-control`** — The personal/business toggle; black pill background with pill-shaped active state.

### Inputs
- **`input`** — White background, standard border, 8px radius. On focus: 1px green border (`{colors.primary}`).

## Do's and Don'ts

### Do
- Use `{colors.primary}` (green) for the single most important CTA on any page section
- Apply `{rounded.none}` to all primary and secondary buttons — the squared CTA is Lunar's visual signature
- Serve all type through SharpGrotesk; use weight variation (400/500/600/700) to create hierarchy within the single family
- Use `{colors.background}` (near-black) for hero and high-impact sections; let photography breathe at full viewport height
- Keep `{colors.primary}` reserved — link underlines, CTAs, focus rings, success badges only. Never as a decorative fill
- Maintain the dark/light section rhythm: hero dark → features light → CTA dark → FAQ light
- Use `{rounded.pill}` only for navigation-level elements (nav CTA, segment controls) — not for action buttons
- Apply 96px (`{spacing.4xl}`) vertical padding for hero sections; the generous space is intentional

### Don't
- Don't apply rounded corners to primary CTAs — even 4px undermines the architectural language
- Don't introduce a secondary typeface; SharpGrotesk's weight range handles every context
- Don't use `{colors.primary}` as a background fill for anything except the primary CTA and badge tophat
- Don't use gradients — Lunar's palette is flat greyscale + one chromatic accent, no gradients detected
- Don't use medium border-radius (16–40px) on buttons; the system is binary (`{rounded.none}` for CTAs, `{rounded.pill}` for navigation)
- Don't add shadows to dark-canvas sections; color contrast creates depth, shadows fight the cinematic atmosphere
- Don't set heading weights above 700 or below 400; the SharpGrotesk weight system is narrow by design
- Don't use color for semantic states beyond `{colors.primary}` = success/CTA; error states should use a separate red that doesn't contaminate the green

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <540px | Single column, compressed hero, full-width CTA buttons |
| Mobile | 540–767px | Standard mobile layout, stack navigation |
| Tablet | 768–1024px | 2-column feature grids, hamburger nav |
| Desktop | 1024–1280px | Full 3-column product grids, full nav |
| Large Desktop | >1280px | Max-width container centered, increased hero padding |

### Touch Targets
- All CTA buttons use 13px 24px padding with SharpGrotesk 14px — full touch-target height ~42px minimum
- Navigation pill links sized for thumb interaction on mobile
- Segment controls (personal/business) are the primary mobile nav affordance

### Collapsing Strategy
- Hero photography scales to fill viewport on all breakpoints; the dark overlay text remains legible
- 3-column product/pricing grids collapse to 1 column on mobile
- The horizontal segment selector (personal/business) stacks above the navigation on small viewports
- Large section whitespace reduces proportionally: 96px → 48–64px at mobile

### Image Behavior
- Photography backgrounds use `object-fit: cover` at full viewport height on hero
- Product UI mockups (phone screens, card previews) scale proportionally within their containing cards
- SVG icons throughout the system, scale without quality loss at any viewport

---

## Agent Prompt Guide

### Quick Color Reference
- Background (dark canvas): `{colors.background}` (#0a0a0a)
- Text on dark: `{colors.ink}` (#ffffff)
- Text on light: `{colors.ink-dark}` (#000000)
- Brand accent: `{colors.primary}` (#00cb39)
- Secondary text: `{colors.text-secondary}` (#969696)
- Border: `{colors.border}` (#dddddd)
- CTA (primary): `{colors.primary}` (#00cb39)

### Example Component Prompts

- "Create a Lunar hero section: near-black background (`{colors.background}`). SharpGrotesk 62px/600, line-height 1.20, letter-spacing -0.5px, white text (`{colors.ink}`). Primary CTA: green (`{colors.primary}`) fill, black text (`{colors.on-primary}`), 0px radius, padding 13px 24px, SharpGrotesk 14px/500. No shadows."
- "Build a Lunar primary button: background `{colors.primary}` (#00cb39), text `{colors.on-primary}` (#000000), border-radius 0px, padding 13px 24px, font SharpGrotesk 14px weight 500. On hover: slightly brighter green (`{colors.primary-alt}`). Transition: background-color 0.18s ease."
- "Design a Lunar pricing card: white background (`{colors.surface}`), 8px radius, 32px padding. Card title in SharpGrotesk 24px/700 (`{colors.ink-dark}`). Primary CTA button squared green. Optional green tophat badge (`{colors.primary}`, 0px radius, 8px 24px padding, 12px/400 SharpGrotesk) for 'Most Popular' label."
- "Create a Lunar navigation bar: near-black background (`{colors.background}`). Nav links in SharpGrotesk 14px/500, white (`{colors.ink}`), transition to `{colors.text-hover}` on hover with 0.18s ease. Right-aligned pill CTA: `{colors.primary}` background, `{colors.on-primary}` text, `{rounded.pill}` (9999px), padding 10px 20px."
- "Build a Lunar segment control (personal/business toggle): black background (`{colors.ink-dark}`), pill shape (`{rounded.pill}`). Active segment: green (`{colors.primary}`) fill with black text. Inactive: white text on dark background. SharpGrotesk 16px/500, padding 6px 20px per segment."
- "Create a feature section with alternating color rhythm: white background (`{colors.surface}`). 3-column grid of cards, each `{components.card}` (white, 8px radius, 32px padding). Headings in SharpGrotesk 24px/700 (`{colors.ink-dark}`). Body in 16px/400. Large 96px top/bottom section padding (`{spacing.4xl}`)."

### Iteration Guide

1. **Start with canvas**: Set `{colors.background}` (#0a0a0a) for hero and impact sections; `{colors.surface}` (#ffffff) for feature content sections. Alternate between them for rhythm.
2. **Typography via SharpGrotesk only**: Weight 600 for headings, 400/500 for body, 700 for card titles and badge labels. Never introduce a second typeface.
3. **Green (`{colors.primary}`) as the only accent**: One CTA per section. If there are two actions, the secondary gets `{colors.ink-dark}` fill (black). Never apply green to decorative elements.
4. **Button shape rule**: Primary CTAs always `{rounded.none}` (0px). Only navigation pill elements get `{rounded.pill}` (9999px). This binary is non-negotiable.
5. **Spacing generosity at macro scale**: 96px (`{spacing.4xl}`) for hero padding; 64px (`{spacing.3xl}`) between major sections. The design breathes.
6. **Shadows sparingly**: Avoid on dark sections entirely. On light sections, maximum `rgba(0,0,0,0.15) 0px 1px 2px` — subtle only.
7. **Green focus ring**: All interactive elements should show a `{colors.focus-ring}` (#00cb39) 2px solid focus indicator. Brand and accessibility aligned.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Lunar. Brand names and trademarks belong to their respective owners.