---
title: "Slingshot design system"
variant: extended
source: https://www.useslingshot.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/useslingshot-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Slingshot · Design System

> Bright blue SaaS with a human touch

**Theme:** light · **Industry:** saas · **Source:** https://www.useslingshot.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Slingshot’s homepage pairs a crisp white canvas and saturated blue blocks with playful display lettering and tangible branded-swag imagery. A clear, spacious flow moves from the product promise through customer proof and feature storytelling to a vivid closing CTA.

## North star

Keep the page calm and spacious in white, then use Slingshot blue to spotlight the product and the next action.

## Overview

The visual system is built on a white canvas (#ffffff) and dark plum-ink typography (#241f37), with vivid Slingshot blue (#1a5fff) carrying the primary CTA and defining major feature panels. Pale blue and warm cream surfaces soften the blue-and-white contrast; the measured gray surface supports quieter supporting areas. Gopher Medium gives large headlines a rounded, distinctive voice, while Inter handles navigation, body copy, and small uppercase labels. The desktop hero balances a left-aligned message and CTA pair against a collage of swag product images. Below, the page alternates customer proof, testimonials, and feature storytelling rather than relying on dense text. Generous white space separates centered sections, and rounded panels give the imagery and CTA areas a friendly, approachable finish. Product photographs and customer logos make the offering concrete; blue line illustrations add a lightweight explanatory accent.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas, open section backgrounds, and the light surfaces framing product and testimonial content. |
| Plum Ink | `#241f37` | `--color-plum-ink` | brand | Headline and body text color, grounding the hero message and readable copy against white. |
| Slingshot Blue | `#1a5fff` | `--color-slingshot-blue` | brand | Primary demo CTA, announcement strip, strong feature panels, and the closing sticker campaign block. |
| Cloud Blue | `#ecf2ff` | `--color-cloud-blue` | surface | Soft cool support surface behind product imagery and feature content; keeps blue-led panels from feeling heavy. |
| Quiet Gray | `#c8c7cd` | `--color-quiet-gray` | surface | Measured secondary surface tone; use for subdued supporting areas, not as the page’s main brand color. |
| Warm Cream | `#fff4ec` | `--color-warm-cream` | surface | Warm accent surface beside blue product storytelling, adding contrast to otherwise cool, white sections. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#ecf2ff` (Cloud Blue) · `--color-surface-2` → `#c8c7cd` (Quiet Gray) · `--color-surface-3` → `#fff4ec` (Warm Cream) · `--color-text` → `#241f37` (Plum Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-accent` → `#1a5fff` (Slingshot Blue) · `--color-on-accent` → `#0000ee`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#241f37` | `#ffffff` | 15.84:1 | AAA |
| `#241f37` | `#ecf2ff` | 14.11:1 | AAA |
| `#241f37` | `#c8c7cd` | 9.43:1 | AAA |
| `#241f37` | `#fff4ec` | 14.63:1 | AAA |
| `#ffffff` | `#ecf2ff` | 1.12:1 | fail |
| `#ffffff` | `#c8c7cd` | 1.68:1 | fail |
| `#ffffff` | `#fff4ec` | 1.08:1 | fail |
| `#1a5fff` | `#ffffff` | 5.09:1 | AA |
| `#1a5fff` | `#ecf2ff` | 4.54:1 | AA |
| `#1a5fff` | `#c8c7cd` | 3.03:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 700 | Body copy, navigation, links, and general interface text. | Inter |
| Inter-SemiBold | `--font-inter-semibold` | system | 600 | Eyebrows and compact captions. | Inter |
| Gopher Medium | `--font-display` | webfont | 400, 500 | Display headlines and section headings. | DM Sans |
| Inter-Bold | `--font-inter-bold` | system | 700 | Bold Inter emphasis where stronger text weight is needed. | Inter |

- **Inter:** Regular weight is the workhorse; use a comfortable 1.5 line height for body copy and restrained, untransformed link text.
- **Inter-SemiBold:** Semibold uppercase labels with visibly expanded tracking and generous line height; reserve for short metadata.
- **Gopher Medium:** Rounded, friendly display voice; measured roles use regular to medium weights, tight line height, and no tracking.
- **Inter-Bold:** Measured as a system font variant; use sparingly for emphasis while keeping the interface’s overall copy restrained.

### Type scale — Perfect Fifth (ratio ≈ 1.518, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 400 | 1 | 0 | — | Gopher Medium | Oversized hero and campaign headlines. |
| h1 | 32px | 400 | 1 | 0 | — | Gopher Medium | Primary page headline and prominent feature messaging. |
| h2 | 24px | 500 | 1 | 0 | capitalize | Gopher Medium | Feature and testimonial section headings. |
| body | 16px | 400 | 1.5 | 0 | — | Inter | Paragraphs, navigation labels, and explanatory copy. |
| caption | 12px | 600 | 2 | 0.083em | uppercase | Inter-SemiBold | Compact uppercase labels and customer attribution details. |
| link | 16px | 400 | 1.5 | 0 | — | Inter | Navigation and inline links. |
| eyebrow | 12px | 600 | 2 | 0.083em | uppercase | Inter-SemiBold | Short uppercase context labels above content. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 8, 10, 16, 20, 24, 32, 40, 48, 96 px.
- Section rhythm 40px · element gap 16px · card padding 16px · max content width 1200px.

Use a centered desktop content frame with a measured maximum width of 1200px. The hero is a two-column composition: left-aligned headline, description, and paired CTAs; right-side product collage. Keep section alignment varied but deliberate: centered proof and campaign headings, left-aligned editorial copy, and alternating feature panels. The measured spacing system is based on an 8px unit, with comfortable density, clear section gaps, and generous white breathing room. On narrow screens, stack columns without losing the visual order of message, proof, and action.

## Shape & elevation

- Radius: button `9999px` · card `12px` · media `12px` · link `9999px` · xs `6px` · sm `12px` · md `24px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.44, 0, 0.56, 1)` on interactive elements.

The page reads mostly flat: large white areas, colored section blocks, and imagery do the visual separation rather than pronounced shadows. Use rounded card and media corners consistent with the measured 12px card and media radius; buttons are pill-shaped. Keep borders quiet, with the outline CTA providing a visible exception. Avoid stacking many elevated cards or adding heavy drop shadows.

## Imagery

Show tangible branded swag—hats, apparel, stickers, bags, and packaging—in product collages and feature panels. Customer logos and testimonials provide social proof, while a broad event photograph adds a real-world case-study moment. Use clean, softly framed product tiles and rounded media containers. Blue wireframe-style illustration can explain logistics, but should remain secondary to the actual merchandise.

## Components

### Announcement strip

A full-width Slingshot-blue band above the navigation, with a centered catalog link and small directional icon.

### Primary navigation

White horizontal header with gold logo, case-study link, compact utility links, and an outlined pill demo action.

### Hero

Left-aligned Gopher headline and Inter supporting copy beside a collage of branded swag; pair a filled blue demo CTA with an outlined catalog CTA.

### Customer proof

Centered trust statement and a single horizontal row of customer logos, followed by a large case-study image with an overlaid quote card.

### Feature storytelling

Rounded split panels combine blue copy blocks with product images, inventory screens, or a simple explanatory illustration.

### Testimonial grid

A centered section heading introduces compact customer quotes with small portraits, attribution labels, and blue company links.

### Sticker CTA

A wide blue campaign panel with centered headline, concise support text, pill action, and perspective line illustration.

### Measured component styles

- **Primary button** (“SCHEDULE LIVE DEMO”): background #1a5fff · text #0000ee · radius 43px · padding 8px 16px · 400 12px sans-serif
- **Link** (“Pricing”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Inter
- **Card** (“Logo Pillow On Hold”): background #ffffff · text #000000 · radius 12px · padding 16px · 400 12px sans-serif

## Do

- Use white as the dominant page canvas.
- Reserve Slingshot blue for prominent actions and feature moments.
- Set display headings in a rounded, friendly sans serif.
- Pair product imagery with concise explanatory copy.
- Use generous whitespace to distinguish sections.
- Round media and card containers; keep button actions pill-shaped.

## Don't

- Do not turn every section into a saturated blue block.
- Do not add heavy shadows or dense border treatments.
- Do not replace product imagery with generic abstract decoration.
- Do not crowd the hero with extra copy or competing CTAs.
- Do not use the gray surface as a dominant brand color.
- Do not make small labels lowercase or widely scattered.

## Agent prompt

Build a new Slingshot-style SaaS page on a clean #ffffff canvas, using #241f37 for crisp, readable copy and #1a5fff for the primary CTA and a few decisive feature panels. Use Gopher Medium or a close rounded display alternative for expressive headlines; use Inter for navigation, body copy, and uppercase metadata. Keep the layout centered within the measured 1200px maximum width, with generous spacing and clear section changes. Favor a two-column hero with a product collage, then use customer logos, real testimonials, and alternating image-and-copy feature panels to establish trust and explain the service. Apply #ecf2ff and #fff4ec as restrained support surfaces; #c8c7cd is only a quiet secondary surface. Keep cards and media softly rounded, CTAs pill-shaped, and elevation minimal.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Full-width announcement band above a centered horizontal navigation row. | catalog shortcut, primary demo action, utility links | blue announcement band, white navigation, pill outline button |
| 2 | product-showcase | Two-column hero followed by centered customer logos and a wide case-study image. | dual CTA, customer proof, testimonial overlay | large left headline, swag product collage, logo row, rounded media |
| 3 | feature-split | Two-part feature composition with copy tabs on one side and a wide visual panel on the other. | selectable feature messaging, visual explanation | pale warm surface, bright blue illustration panel, rounded outer frame |
| 4 | testimonials | Centered heading above a spacious three-column grid of compact testimonials. | peer validation, named attribution, customer links | small portrait images, fine separators, blue linked companies |
| 5 | how-it-works | Three vertically stacked, alternating split panels with centered headings and supporting visuals. | numbered steps, process explanation, product evidence | blue copy panels, swag and inventory imagery, rounded paired panels |
| 6 | cta | Single centered message and action inside a wide blue campaign panel. | free trial invitation, single focused action | blue background, perspective line illustration, centered pill button |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/useslingshot-com