# Tenfore.golf Design System

> Deep fairway navy anchored by high-visibility grass green and technical Bahnschrift headings.

**Source:** https://tenfore.golf | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Tenfore.golf utilizes a high-contrast palette of Navy (#192233) and a vibrant "Grass Green" (#38c172) to establish a professional yet athletic SaaS identity. The system is characterized by its heavy reliance on the Bahnschrift typeface for technical, condensed headings that mirror the precision of golf management. Layouts are structured with generous vertical spacing (96px) and a mix of soft-radius cards (12px–16px) and pill-shaped interactive elements. Functional surfaces often use light slate grays (#f1f5f9) to separate data-heavy sections from the primary white canvas.

## Signature DNA
1. **Technical Condensed Typography** (The use of Bahnschrift for all primary and section headings creates a "scorecard" aesthetic that feels precise and industrial.)
2. **The "Green-on-Navy" Contrast** (Primary CTAs and status indicators use #38c172 against #192233 backgrounds, ensuring maximum visibility and brand alignment with turf aesthetics.)
3. **Pill-Shaped Accents** (Secondary labels and "eyebrow" text are frequently contained in 999px radius pills or tracked heavily with 3px letter spacing.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | #ffffff | Primary canvas and card background | 522 | 1.0 | computed_style |
| `{color.slate.50}` | #f1f5f9 | Secondary section backgrounds (Kiosk/App sections) | 45 | 1.0 | brand_page |
| `{color.slate.100}` | #e2e8f0 | Borders and muted button text | 417 | 0.8 | computed_style |
| `{color.navy.900}` | #0a0f1a | Deepest text and footer backgrounds | 39 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.navy}` | #192233 | Primary brand surface and heading text | 732 | 1.0 | --navy |
| `{color.green}` | #38c172 | Primary CTA background and brand accent | 417 | 1.0 | --green |
| `{color.green.dark}` | #339c5e | Border accents and hover states | 27 | 1.0 | computed_style |
| `{color.blue}` | #0000ee | Inline links (standard web blue) | 84 | 0.8 | computed_style |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{color.success}` | #38c172 | Positive metrics and "Works without WiFi" indicators |
| `{color.warning}` | #f59e0b | Decorative/Status only (low occurrence) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Bahnschrift | 600, 700 | Headings, Display, Buttons | DIN Alternate | Proprietary (Windows) |
| Inter | 400, 500, 600, 700 | Body, UI Labels, Stats | Inter (Google Fonts) | OFL |
| Arial | 400, 700, 800 | Fallback body, Carousel controls | Helvetica | Standard |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 64px | 67.2px | -0.5px | 700 | Main Hero H1 | `h1` |
| `{type.display.lg}` | 40px | 46px | -0.3px | 700 | Section Titles | `h2.section-title` |
| `{type.heading.md}` | 32px | normal | -0.5px | 700 | Statistical Numbers | `div.stat-num` |
| `{type.heading.sm}` | 26px | 32.5px | normal | 700 | Sub-section heads | `h3` |
| `{type.body.lg}` | 19px | 33.25px | normal | 400 | Intro paragraphs | `p` |
| `{type.body}` | 16px | normal | normal | 400 | Standard body | `section#main-content` |
| `{type.button}` | 16px | normal | normal | 700 | Primary CTA | `a.btn-primary` |
| `{type.label.caps}` | 11px | normal | 3px | 600 | Section Eyebrows | `div.section-eyebrow` |

### Principles
1. **Bahnschrift for Authority.** All text intended to look "technical" or "official" (titles, stats, buttons) must use Bahnschrift.
2. **Wide Eyebrows.** Small labels (11px-12px) use 2.5px to 3px letter spacing to create a premium header feel.
3. **Inter for Legibility.** All long-form prose and form inputs default to Inter at 400 weight.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 162 |
| `{space.sm}` | 12px | 162 |
| `{space.md}` | 16px | 171 |
| `{space.lg}` | 24px | 117 |
| `{space.xl}` | 48px | 51 |
| `{space.section}` | 96px | 27 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 1344 occurrences |
| `{radius.sm}` | 8px | Form inputs | 51 occurrences |
| `{radius.md}` | 12px | Pricing cards, stat blocks | 114 occurrences |
| `{radius.lg}` | 16px | Feature cards | 48 occurrences |
| `{radius.pill}` | 999px | Badges, specific buttons | 21 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.subtle}` | rgba(0, 0, 0, 0.05) 0px 2px 8px 0px | Feature cards | 42 occurrences |
| `{shadow.standard}` | rgba(0, 0, 0, 0.15) 0px 2px 12px 0px | Testimonial/Floating cards | 57 occurrences |
| `{shadow.deep}` | rgba(0, 0, 0, 0.1) 0px 24px 80px 0px | Modal/High-priority surfaces | 18 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Request a Demo)
**Pages observed:** All
**Spec:** Background `{color.green}` (#38c172) | Text `{color.white}` (#ffffff) | Radius 8px | Typography `{type.button}` (16px / 700 Bahnschrift)
**States observed:** Default | Hover: `{color.green.dark}` (#339c5e) | Active: Captured

#### Text Input
**Role:** Lead generation forms
**Pages observed:** https://tenfore.golf (Footer)
**Spec:** Background `{color.white}` (#ffffff) | Border 1px `{color.slate.100}` (#e2e8f0) | Radius 8px | Padding 12px 16px
**States observed:** Default | Focus: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying software benefits
**Pages observed:** All
**Spec:** Background `{color.white}` (#ffffff) | Border 1px `{color.slate.100}` (#e2e8f0) | Radius 16px | Padding 28px | Shadow `{shadow.subtle}`
**States observed:** Default

#### Pricing Card (Featured)
**Role:** Highlighting the primary subscription tier
**Pages observed:** https://tenfore.golf/pricing
**Spec:** Background `{color.navy}` (#192233) | Border 3px `{color.green}` (#38c172) | Radius 12px | Padding 28px
**States observed:** Default

### Tier 3: Surface-specific

#### Kiosk Stat Block
**Role:** Displaying metrics in the Kiosk section
**Pages observed:** https://tenfore.golf
**Spec:** Background `{color.slate.50}` (#f1f5f9) | Radius 12px | Padding 20px | Typography `{type.heading.md}` (32px Bahnschrift)
**States observed:** Default

#### Testimonial Card
**Role:** Customer social proof
**Pages observed:** All
**Spec:** Background `{color.white}` (#ffffff) | Radius 14px | Shadow `{shadow.standard}` | Padding 24px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Padding (Vertical) | 96px |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | <768px | Navigation collapses to hamburger; Hero H1 scales to ~32px; 3-column grids stack to 1-column. |
| Desktop | 1440px | Standard 12-column grid; 96px section spacing. |

## Imagery & decoration
Tenfore.golf uses high-fidelity product screenshots (Tee Sheet, Kiosk UI) framed within device mockups. Decorative elements include small, solid-color icons (green/navy) and star ratings for testimonials. The brand avoids complex gradients, opting for flat surfaces and solid borders.

## Do's
- Use **Bahnschrift** for all numerical data and primary headings.
- Maintain **96px vertical spacing** between major homepage sections.
- Use **#38c172** for primary action buttons only.
- Apply a **12px or 16px radius** to all content cards.
- Ensure section eyebrows have at least **2.5px letter spacing**.

## Don'ts
- **Don't** use serif fonts; the brand is strictly sans-serif and technical.
- **Don't** use the primary green (#38c172) for body text; it is reserved for accents and CTAs.
- **Don't** mix border radii on the same page; stick to the 12px/16px standard.
- **Wrong:** Using #0000ee for headings. **Right:** Use #192233. **Reason:** Navy is the brand's primary ink color; blue is for inline links only.
- **Wrong:** Using #38c172 for large background sections. **Right:** Use #192233 or #ffffff. **Reason:** The green is too high-vibrancy for large surfaces.

## Similar brands
- Clover (POS systems)
- Toast (Restaurant management)
- Garmin (Technical sports hardware)
- Strava (Athletic data visualization)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --navy: #192233;
  --green: #38c172;
  --green-dark: #339c5e;
  --slate-50: #f1f5f9;
  --slate-100: #e2e8f0;
  --white: #ffffff;
  
  --font-heading: "Bahnschrift", sans-serif;
  --font-body: "Inter", sans-serif;
  
  --radius-md: 12px;
  --radius-lg: 16px;
  
  --shadow-subtle: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
}
```

## Agent prompt examples
- "Create a feature card for Tenfore.golf using a white background, a 16px border radius, and a subtle 8px blur shadow. The heading should be in Bahnschrift 700."
- "Generate a primary CTA button using the brand green #38c172, white text in Bahnschrift, and an 8px border radius."
- "Design a pricing tier section with a navy #192233 background and a 3px green #38c172 border for the 'featured' card."

## Known gaps
- Hover and Active states for secondary navigation items were not fully captured.
- Specific mobile-only component variants (e.g., bottom sheets) were not observed in the desktop-heavy source.
- Error states for the lead generation form were not triggered during analysis.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://tenfore.golf | 1440px | 2026-06-06 |
| Pricing | https://tenfore.golf/pricing | 1440px | 2026-06-06 |
| About | https://tenfore.golf/about | 1440px | 2026-06-06 |