# Gtmnow Design System

> High-contrast monochrome utility anchored by a vibrant signal green and geometric sans-serif precision.

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

## TL;DR
Gtmnow utilizes a "Dark Mode" foundation as its primary identity, where a deep charcoal `#232323` serves as the canvas for high-density information. The system is punctuated by a single high-visibility accent: Signal Green `#05c168`, used exclusively for primary actions and category labeling. Typography is strictly geometric, leveraging **Onest** for headings and **DM Sans** for functional UI, maintaining a clean, tech-forward editorial feel. Layouts rely on sharp 0px or soft 10-15px radii, creating a structured grid that feels both professional and modern.

## Signature DNA
1. **Signal Green Punctuation** (The use of `#05c168` against `#232323` or `#ffffff` to draw immediate focus to CTAs and active states).
2. **The Charcoal Canvas** (Large sections of `#232323` used not just as an accent, but as a primary surface for "Startup Stories" and footer areas).
3. **Geometric Sans Pairing** (The interplay between the wide apertures of Onest headings and the utilitarian density of DM Sans body text).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.canvas.dark}` | `#232323` | Primary dark surface, footer, and text | 10 | 0.6 | computed_style |
| `{color.canvas.light}` | `#ffffff` | Primary light surface and button text | 28 | 1.0 | css_variable |
| `{color.text.muted}` | `#828282` | Secondary body text and metadata | 80 | 0.8 | computed_style |
| `{color.surface.tint}` | `#f0f6ff` | Subtle section backgrounds | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#05c168` | Primary CTA background, active labels | 7 | 0.6 | computed_style |
| `{color.ink.deep}` | `#020c1e` | High-contrast display text | 6 | 0.6 | computed_style |
| `{color.ink.cool}` | `#69727d` | Decorative UI text and icons | 6 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|------------------------|---------|
| Onest | 400, 500 | Headings, Display | Inter | Google Fonts |
| DM Sans | 400, 600 | Body, Buttons | DM Sans | Google Fonts |
| Poppins | 500 | Navigation | Poppins | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display}` | 18px | 30px | normal | 500 | Section titles | `span.elementor-heading-title` |
| `{text.button}` | 17px | 25.5px | normal | 400 | Primary CTAs | `a.elementor-button` |
| `{text.h3}` | 16px | 22px | -0.5px | 400 | Subheadings | `h3.elementor-heading-title` |
| `{text.body.bold}` | 16px | 24px | normal | 600 | UI Buttons | `button.elementor-button` |
| `{text.body}` | 16px | 30px | normal | 500 | Links | `a` |
| `{text.body.sm}` | 15px | 30px | normal | 400 | Nav/Header | `header.elementor` |
| `{text.nav}` | 15px | 30px | normal | 500 | Menu items | `li#menu-item-76601` |
| `{text.caption}` | 14px | 23.8px | -0.5px | 400 | Entry titles | `h2.entry-title` |

### Principles
1. **Negative Tracking on Headings**: Large headers use -0.5px letter spacing to increase visual density.
2. **Generous Line Height**: Body text maintains a 1.5x to 2.0x line-height ratio (30px on 15px/16px text) for readability.
3. **Weight Restraint**: Most headings rely on weight 400/500; weight 600 is reserved for functional UI elements like buttons.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.sm}` | 12px | 6 |
| `{space.md}` | 20px | 5 |
| `{space.lg}` | 25px | 4 |
| `{space.xl}` | 30px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, sharp UI | 112 occurrences |
| `{radius.md}` | 10px | Form controls, small buttons | 10 occurrences |
| `{radius.lg}` | 15px | Content cards | 8 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.natural}` | `rgba(0, 0, 0, 0.1) 9.899px 9.899px 30px 0px` | Floating surfaces/cards | 2 occurrences |

## Components

### Tier 1: Foundational

#### Button Primary
**Role:** Main site actions (e.g., GTMfund CTA)
**Pages observed:** 1
**Spec:** Background: `#05c168` | Text: `#ffffff` | Radius: `10px` | Typography: `DM Sans 600`
**States observed:** Default | Hover: captured

#### Button Secondary
**Role:** Inline actions and "Explore" links
**Pages observed:** 1
**Spec:** Background: `#ffffff` | Text: `#05c168` | Radius: `10px` | Border: `1px solid #05c168`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Category Label
**Role:** Vertical text identifying content tracks (AI, Sales, etc.)
**Pages observed:** 1
**Spec:** Text: `#05c168` | Typography: `Onest 500` | Rotation: `-90deg`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Content Card
**Role:** Blog and story previews
**Pages observed:** 1
**Spec:** Background: `transparent` | Text: `#69727d` | Radius: `15px` | Shadow: `none`
**States observed:** Default: captured

#### Dark Surface Section
**Role:** High-impact content blocks (Startup Stories)
**Pages observed:** 1
**Spec:** Background: `#232323` | Text: `#ffffff` | Radius: `0px`
**States observed:** Default: captured

#### Footer
**Role:** Global site navigation and legal
**Pages observed:** 1
**Spec:** Background: `#232323` | Text: `#828282` | Typography: `Onest 400`
**States observed:** Default: captured

## Layout
| Property | Value |
|------|-------|
| Max-width | 1140px |
| Section Gap | 80px - 100px |
| Column Gap | 20px |

## Do's
- Use `#05c168` for primary conversion points only.
- Apply `-0.5px` letter spacing to Onest headings above 16px.
- Use `#232323` for full-width section backgrounds to create visual rhythm.
- Maintain a 30px line-height for body copy to ensure editorial breathing room.
- Use sharp `0px` corners for large layout containers.

## Don'ts
- **Wrong:** Using `#0d6efd` (Bootstrap Blue) for links. **Right:** Use `#05c168` or `#232323`. **Reason:** Bootstrap defaults are present in tokens but overridden by brand identity.
- **Wrong:** Labeling a sub-brand color as the parent primary. **Right:** Stick to Signal Green `#05c168`.
- Do not use shadows on Content Cards; keep them flat or use the `{shadow.natural}` only for elevated modals.
- Do not use weight 700 or 900 for text; the brand caps at weight 600.

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #05c168;
  --color-canvas-dark: #232323;
  --color-text-muted: #828282;
  --font-heading: 'Onest', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --radius-card: 15px;
  --shadow-natural: 9.899px 9.899px 30px 0px rgba(0, 0, 0, 0.1);
}
```

## Known gaps
- Hover and active states for the Signal Green buttons were not explicitly captured in the token evidence, though observed in screenshots.
- Mobile-specific spacing tokens (padding/margin) were not captured in the numeric evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-----|----------|--------------|
| Homepage | https://gtmnow.com | 1440x900 | 2026-06-06 |