# Soundtalks Design System

> Scientific precision meets agricultural vitality, expressed through technical dark navy canvases and high-contrast agricultural green accents.

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

## TL;DR
Soundtalks utilizes a high-contrast "Dark Mode" foundation, leading with a deep navy `#1a2d4e` and a vibrant agricultural green `#87c65d`. The system is built on the **Fustat** typeface, which provides a modern, technical feel across a wide weight range (400–800). Visual interest is driven by the interplay of these two primary colors against a clean white `#ffffff` background, often using the navy for heavy section blocks and the green for interactive highlights and primary headings. The geometry is varied, mixing sharp-edged sections with significantly rounded cards (16px) and pill-shaped interactive elements.

## Signature DNA
1. **The "Agri-Tech" Contrast** (The pairing of deep navy `#1a2d4e` surfaces with bright green `#87c65d` text and icons, signaling a bridge between software and field biology.)
2. **Fustat Display Hierarchy** (Heavyweight Fustat at 700-800 weight for display sizes up to 72px, creating a bold, authoritative scientific voice.)
3. **Audio-Visual Waveform Motifs** (Subtle background patterns and section dividers that mimic sound waves, reinforcing the core product technology.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Primary page background, button text, card surfaces | 126 | 1.0 | `--color-white` |
| `{colors.navy}` | `#1a2d4e` | Hero backgrounds, footer, primary text, dark section surfaces | 27 | 1.0 | `--color-st-dark-blue` |
| `{colors.ice}` | `#f0f4fa` | Subtle section backgrounds, card surfaces | 15 | 0.8 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.green}` | `#87c65d` | Primary brand accent, headings, borders, active icons | 75 | 1.0 | `--color-st-dark-green` |
| `{colors.orange}` | `#ff9200` | Primary CTA background (Contact/Submit) | 6 | 0.6 | Computed style |
| `{colors.sky}` | `#c0e0e8` | Decorative badges, secondary card backgrounds | 12 | 0.8 | Computed style |
| `{colors.sage}` | `#e8f4e0` | Soft section backgrounds | 3 | 0.6 | Computed style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Fustat | 400, 500, 600, 700, 800 | All headings, body, and UI | Montserrat | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-xl}` | 72px | 90px | normal | 700 | Primary Hero H1 | `h1.text-5xl.md:text-7xl` |
| `{type.display-lg}` | 48px | 60px | normal | 700 | Section Headers | `h2.text-4xl.lg:text-5xl` |
| `{type.heading-md}` | 32px | 38.4px | normal | 800 | Feature Titles | `h3.mb-3.max-w-[400px]` |
| `{type.heading-sm}` | 30px | 36px | normal | 700 | Sub-section Heads | `div.text-3xl.font-bold` |
| `{type.body-lg}` | 20px | 32.5px | normal | 400 | Intro Paragraphs | `p.text-xl.text-gray-300` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default Body Copy | `div.min-h-screen.bg-white` |
| `{type.button}` | 16px | 24px | normal | 600 | CTA Labels | `a.bg-[#FF9200].text-white` |
| `{type.caption}` | 12px | 12px | 10% | 700 | Badges / Labels | `div.inline-block.px-2` |

### Principles
1. **High Contrast Display:** Use Green `#87c65d` for key words within Navy `#1a2d4e` headings to emphasize "healthier" or "worldwide."
2. **Tight Line Heights:** Display sizes use a 1.25x ratio (72/90), while body text uses a more relaxed 1.5x ratio (16/24).
3. **Variable Weighting:** Use weight 800 for technical feature titles and 400 for descriptive prose to maintain clear information density.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 36 |
| `{space.sm}` | 16px | 69 |
| `{space.md}` | 24px | 60 |
| `{space.lg}` | 48px | 18 |
| `{space.section}` | 80px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Section containers | 285 occurrences |
| `{radius.sm}` | 4px | Inputs, small cards | 30 occurrences |
| `{radius.md}` | 8px | Primary buttons | 15 occurrences |
| `{radius.lg}` | 16px | Feature cards | 12 occurrences |
| `{radius.pill}` | 9999px | Badges, secondary buttons | 33 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Default state | Most surfaces |
| `{shadow.card}` | `0 1px 3px rgba(0,0,0,0.1)` | Pricing/Feature cards | 9 occurrences |
| `{shadow.heavy}` | `0 20px 20px 3px rgba(107,140,156,0.1)` | Floating UI panels | 3 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Contact, Submit)
**Pages observed:** All
**Spec:** Background: `#ff9200` | Text: `#ffffff` | Radius: `8px` | Padding: `12px 24px` | Typography: `Fustat 600`
**States observed:** Default | Hover: captured | Focus: not captured | Active: not captured

#### Secondary Button
**Role:** Navigation and sub-actions (Login, ROI calculator)
**Pages observed:** All
**Spec:** Background: `#87c65d` | Text: `#ffffff` | Radius: `8px` | Padding: `8px 16px` | Typography: `Fustat 600`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying benefits or use cases
**Pages observed:** Home, Pricing
**Spec:** Background: `#f0f4fa` | Text: `#1a2d4e` | Radius: `16px` | Padding: `24px 48px`
**States observed:** Default

#### Text Input
**Role:** Contact form fields
**Pages observed:** Contact section (all pages)
**Spec:** Background: `#ffffff` | Border: `1px solid #d1d5db` | Radius: `4px` | Padding: `16px`
**States observed:** Default | Focus: captured

### Tier 3: Surface-specific

#### Dark Hero Block
**Role:** Main landing section
**Pages observed:** Home
**Spec:** Background: `#1a2d4e` | Text: `#ffffff` | Radius: `0px` | Padding: `80px 0px`
**States observed:** Default

#### Status Badge
**Role:** Categorization (e.g., "Use Case")
**Pages observed:** Home, About
**Spec:** Background: `#c0e0e8` | Text: `#1a2d4e` | Radius: `4px` | Padding: `4px 8px` | Typography: `12px Bold`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max-width | 1280px |
| Section Gap | 80px |
| Grid | 12-column desktop |

## Do's
- Use Green `#87c65d` for primary headings on white backgrounds.
- Use Navy `#1a2d4e` for full-width section backgrounds to break up white space.
- Apply `16px` border radius to content cards to soften the technical aesthetic.
- Ensure all form inputs have a `16px` internal padding for touch targets.
- Use Fustat 800 for short, punchy technical headlines.

## Don'ts
- Do not use Green `#87c65d` for small body text on white (contrast ratio 2.0:1 is insufficient).
- Do not mix sharp and rounded corners within the same component.
- Do not use Orange `#ff9200` for anything other than the primary conversion CTA.
- Avoid using Navy text on Green backgrounds; use White text for better legibility.

## Similar brands
- John Deere (Agri-tech color palette)
- Trimble (Scientific/Industrial software)
- Benchling (Life sciences technical UI)

## Quick start

```css
/* CSS Variables */
:root {
  --color-navy: #1a2d4e;
  --color-green: #87c65d;
  --color-orange: #ff9200;
  --color-ice: #f0f4fa;
  --font-main: 'Fustat', sans-serif;
  --radius-card: 16px;
  --radius-btn: 8px;
}
```

## Agent prompt examples
- "Create a feature card using Soundtalks styles: background #f0f4fa, border-radius 16px, and a heading in Fustat 800 color #1a2d4e."
- "Generate a primary CTA button with background #ff9200, white text, and 8px border radius."
- "Design a hero section with a navy #1a2d4e background and a large Fustat 700 heading where the keyword is highlighted in #87c65d."

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