Skip to content
DesignMunkDesignMunk Submit a site

Tolt

tolt.com
All-in-one affiliate marketing for SaaS startups, launch and scale fast.
Marketing Software Webflow Homepage Plus Jakarta Sans Plusjakartadisplay
Share Visit site
tolt.com DESKTOP · 1440
Tolt

AI Breakdown

Design export

---
version: alpha
name: Tolt
description: All-in-one affiliate marketing for SaaS startups, launch and scale fast.
colors:
  primary: "#052d2b"
  secondary: "#b1f97a"
  tertiary: "#050038"
  neutral: "#ffffff"
  brand-virgo-green-goddess: "#518b4d"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 60px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 46px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 45px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.01em
  headline-xs:
    fontFamily: Plusjakartadisplay
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.22
  body-md:
    fontFamily: Plusjakartadisplay
    fontSize: 16px
    fontWeight: 400
rounded:
  sm: 16px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 40px
  xl: 60px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 18px 36px
    height: 64px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 18px 36px
    height: 64px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 50px 28px
---

# Tolt: Lime Highlighter Pills Drive Every Headline

## Overview

Tolt's system is crisp and assertive: dense headlines, bright lime accents, and clear pine text on white. Audience is SaaS founders and growth teams scanning for capability and credibility. The UI should feel trustworthy yet energetic—serious layout with playful emphasis via lime highlight pills. Spacing is steady and moderate; components read compact but never cramped.

## Colors

- primary (#052d2b): Deep pine for headlines, body text, and primary CTAs on light backgrounds.
- secondary (#b1f97a): Neon lime accent for emphasis chips, inline highlights, and promotional badges; use sparingly.
- tertiary (#050038): Midnight indigo for dark bands, vignette backdrops, and the offset marketing shadow.
- neutral (#ffffff): Base surface for pages and cards.
- brand-virgo-green-goddess (#518b4d): Supportive green for icons, subtle states, or graph accents.
- surface ({colors.neutral}): Alias of neutral; treat as primary page surface.
- on-surface ({colors.primary}): Alias of primary; default text color over light surfaces.

## Typography

- Plus Jakarta Sans (Google, free): Core family for headlines at 800 weight and large scales—60px (headline-lg), 46px (headline-md), 45px (headline-sm). Use it for most interface text when custom families aren't available. Good substitutes: Inter, Manrope, Outfit.
- Plusjakartadisplay (custom/self-hosted): Used for small headings (headline-xs 18px/600) and body-md (16px/400) in tokens. Agents cannot fetch it from Google; acceptable substitutes: Plus Jakarta Sans (same design), Poppins, Sora.
- Satoshi Variable (custom/self-hosted): May appear in select UI or numerals. Not fetchable via Google; substitutes: Inter, Manrope, Work Sans.
Keep tracking tight (-0.01em) on big headlines; body copy stays regular at 16px with comfortable line height.

## Layout

Spacing scale is compact and repeatable: 8, 16, 24, 40, 60px. Use 60px for section padding on desktop, 40px for dense bands or subsections, and 24px for intra-component gaps. A 12-column grid with wide gutters supports asymmetric hero compositions (copy left, demo right). Cards and feature tiles follow consistent internal padding of 50px x 28px from tokens.

## Elevation & Depth

Depth is mostly optical: strong contrast, white space, and an offset indigo shadow. Use md (0px 30px 50px @ 0.08) for screenshots and dialogs; sm for small chips. The lg shadow is brandful—rgb(5,0,56) at 7px/7px offset—for marketing frames and hero demos. Many panels run with no shadow; borders and tonal blocks do the hierarchy work.

## Shapes

Two radii define the language: 16px corners for cards and media frames, and 9999px for pills—buttons, inline highlights, and chips. The wide pill silhouette is a brand cue; prefer it over square tags or outlines.

## Components

- button-primary: #052d2b background, #ffffff text, 64px height, 18px × 36px padding, full pill radius. Use on light backgrounds.
- button-secondary: Text-only style with #052d2b text and full pill radius; pair with clear hover affordance.
- button-link: Inline action with #052d2b text and no radius.
- card: White background, 16px radius, 50px × 28px padding. Use dark text despite the token textColor default; the live page renders primary text on white.

### Highlight Pill
Inline emphasis behind keywords. Background #b1f97a, text #052d2b, radius 9999px, vertical padding ~4–6px to feel like a marker.

### Partner/Badge Row
Compact row of trust badges (e.g., Capterra). Use neutral background, 24px gaps, and sm shadow if needed.

### Product Screenshot Frame
Media container with 16px radius and md shadow; optionally add the branded offset lg shadow (rgb(5,0,56) 7px 7px 0 0) for hero demos.

### Feature Tile
Icon + heading + paragraph + link. White card, 16px radius, 28px internal padding, primary text; accent icons may use #518b4d.

### Tabbed Demo
Four tabs (Dashboard, Affiliate Portal, Setup, Payments) switching videos. Tabs in primary text; active tab gains weight and an underline or lime accent.

### Comparison Matrix (VS)
Two columns: "What we offer" vs "Our competitors." Use primary text, check/cross icons, 24px row spacing, and clear headings at 18px/600.

### Logo Cloud
Investor and customer logos in a 6–8 column responsive grid with 24px gaps and on-surface text below when needed.

## Do's and Don'ts

- Do use #b1f97a as a background for emphasis chips and key words; keep usage brief and high-impact.
- Do keep primary CTAs at 64px height with full pill radius and 18px × 36px padding.
- Do frame hero screenshots with the lg offset indigo shadow for a branded touch.
- Don't set long passages in the lime accent or use it for body text.
- Don't introduce square corners; default to 16px or full pills only.
- Don't stack multiple greens; if you need a second tone, use #518b4d sparingly for icons or charts.

## Agent Prompt Guide

Quick color reference — Text: #052d2b, Background: #ffffff, Border (subtle): use #052d2b at 10–15% opacity, Accent: #b1f97a; Dark band: #050038.

1) Build the hero
- Background #ffffff. Left column: headline in Plus Jakarta Sans 800 at 60px, color #052d2b, letter-spacing -0.01em. Wrap one noun in a span with background #b1f97a, radius 9999px, 6px 10px padding.
- Body copy at 16px in Plus Jakarta Sans/Regular (or Plusjakartadisplay 16/400 if available).
- Primary CTA: pill 64px height, 18px × 36px padding, background #052d2b, text #ffffff, radius 9999px.
- Right column: 16px-radius screenshot with shadow "rgba(0,0,0,0.08) 0 30px 50px 0"; add an extra offset shadow "rgb(5,0,56) 7px 7px 0 0".

2) Create a three-up feature row
- Grid: 3 columns, 24px gaps, section padding 60px.
- Each card: background #ffffff, radius 16px, padding 50px 28px, primary text #052d2b. Use small icons in #518b4d. Headings in Plus Jakarta Sans 800 at 45px for hero-style or 18px/600 for compact.

3) Tabbed demo section
- Section background #ffffff. Tabs as button-link style using #052d2b text; active tab gets a bottom border 2px in #b1f97a and text weight 600.
- Demo panel uses a 16px-radius video with md shadow.

4) Comparison (VS) block
- Two columns on desktop; stack on mobile. Headings at 18px/600 in Plusjakartadisplay (or Plus Jakarta Sans 600). Body at 16px/400. Use check items on the left with a small #b1f97a chip behind the word "0% commission." Row spacing 24px; section padding 60px.

5) Dark CTA band
- Background #050038, text #ffffff. Headline Plus Jakarta Sans 800 at 46px. Inline lime highlight (#b1f97a) for one keyword. Add a secondary promotional pill: background #b1f97a, text #052d2b, radius 9999px, 18px × 36px padding.

## Similar Brands

- Stripe: heavy sans headlines and clean grids; Tolt adds bolder lime accents and offset shadows where Stripe stays calmer.
- Lemon Squeezy: bright green accent and playful chips; Tolt is more B2B-serious with pine text and tighter spacing.
- Intercom: strong typographic hierarchy and logo clouds; Tolt's lime highlight pill is a more opinionated emphasis device.
- Framer: sleek demos and dark bands; Tolt uses a deeper indigo and a distinctive offset shadow treatment.

More like this

Browse Marketing →
thelevel.ai
Level AI About AI
Level AI About
A minimalist hero uses extreme whitespace, centering attention on a large, high-contrast headline with an orange eyebrow tag for context. The top…
About · 13 minutes ago
every.to
Every AI
Every
Build Faster With AI
Blog · 13 minutes ago
strata.ws
Strata Productivity
Strata
The all-in-one real-time platform for your knowledge archive
Homepage · 2 hours ago
prismic.io
Prismic Blog Developer Tools
Prismic Blog
Move faster from brief to live pages
Blog · 3 hours ago