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

# 8returns · Design System

> Deep teal, sharp lime, and calm product clarity.

**Theme:** light · **Industry:** saas · **Source:** https://www.8returns.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._

8returns presents returns automation through a high-contrast SaaS identity, alternating near-black teal with clean white and pale-gray sections. Product interface imagery, restrained rounded controls, and lime calls to action make a complex operational product feel approachable.

## North star

Use deep teal-black as the narrative canvas, reserving white space and lime accents to make product proof and primary actions unmistakable.

## Overview

The visual system is anchored by deep teal-black (#051923), which carries the hero, process story, and brand narrative; bright white sections provide a deliberate reset, while pale gray (#eef0f2) marks integrations and resources. Lime (#cfff69) is a high-visibility action color rather than a broad background treatment. Roobert is used consistently: large, weighty centered headlines contrast with quieter muted body copy, and navigation remains compact. The hero centers its message and CTA above a large returns-portal preview, establishing the product immediately. Below, content alternates broad full-width bands with aligned feature columns and card groups. Generous section separation keeps the long page legible. Interface captures and customer campaign imagery supply visual texture, while the UI itself stays relatively flat: rounded cards, thin dividers, and selective shadows rather than pervasive decoration.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Canvas for feature, testimonial, and closing areas; also headings and high-contrast text on dark surfaces. |
| Electric Lime | `#cfff69` | `--color-electric-lime` | accent | Primary demo and pricing CTAs, plus occasional emphasis against dark teal. |
| Harbor Teal | `#004853` | `--color-harbor-teal` | brand | Deep teal card surfaces and the core brand color, including teal gradients and feature highlights. |
| Midnight Teal | `#051923` | `--color-midnight-teal` | brand | Main dark canvas, dark-section headings, navigation text, and dark button backgrounds. |
| Abyss Teal | `#00363e` | `--color-abyss-teal` | brand | Deep endpoint of the teal radial gradient and supporting dark visual surfaces. |
| Slate Rule | `#1e3039` | `--color-slate-rule` | neutral | Fine card borders and understated dividers, especially on dark interfaces. |
| Cloud Gray | `#eef0f2` | `--color-cloud-gray` | surface | Pale-gray section bands for integrations, resources, and supporting cards. |
| Footer Black | `#000000` | `--color-footer-black` | neutral | Distinct black footer surface, separating dense site navigation from the page body. |
| Mist Text | `#cdd1d3` | `--color-mist-text` | neutral | Muted supporting text on dark backgrounds. |
| Sea Glass | `#b2c8cb` | `--color-sea-glass` | neutral | Subdued secondary copy and small supporting text on dark teal. |
| Lagoon Teal | `#006670` | `--color-lagoon-teal` | brand | Bright center tone in the radial teal gradient; not a dominant standalone section color. |
| Alert Red | `#d03636` | `--color-alert-red` | semantic | Small red status badge in product-interface imagery, not a primary brand accent. |
| Graphite Copy | `#2c393f` | `--color-graphite-copy` | neutral | Secondary dark copy on light surfaces and interface text. |
| Charcoal Copy | `#525252` | `--color-charcoal-copy` | neutral | Occasional subdued body text on light sections. |
| Portal Blue Gray | `#c8d4e0` | `--color-portal-blue-gray` | surface | Background inside the returns-portal mock-up; treat as interface imagery, not a site-wide surface. |
| Mockup Steel | `#a1afba` | `--color-mockup-steel` | surface | Secondary tones within product or interface imagery, rather than core page chrome. |
| Illustration Blue | `#19587e` | `--color-illustration-blue` | accent | Limited blue gradient color; appears as a supporting visual tone, not a primary CTA. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#004853` (Harbor Teal) · `--color-surface-2` → `#051923` (Midnight Teal) · `--color-surface-3` → `#00363e` (Abyss Teal) · `--color-surface-4` → `#eef0f2` (Cloud Gray) · `--color-text` → `#051923` (Midnight Teal) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#cdd1d3` (Mist Text) · `--color-border` → `#1e3039` (Slate Rule) · `--color-accent` → `#004853` (Harbor Teal) · `--color-accent-2` → `#006670` (Lagoon Teal) · `--color-accent-3` → `#19587e` (Illustration Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#051923` | `#ffffff` | 17.95:1 | AAA |
| `#051923` | `#004853` | 1.75:1 | fail |
| `#051923` | `#00363e` | 1.37:1 | fail |
| `#ffffff` | `#004853` | 10.23:1 | AAA |
| `#ffffff` | `#051923` | 17.95:1 | AAA |
| `#ffffff` | `#00363e` | 13.15:1 | AAA |
| `#cdd1d3` | `#ffffff` | 1.54:1 | fail |
| `#cdd1d3` | `#004853` | 6.66:1 | AA |
| `#cdd1d3` | `#051923` | 11.67:1 | AAA |
| `#cdd1d3` | `#00363e` | 8.55:1 | AAA |

### Gradients

- `radial-gradient(80% 80%, rgb(0, 102, 112) 0%, rgb(0, 72, 83) 50%, rgb(0, 56, 64) 100%)`
- `radial-gradient(circle, rgba(98, 137, 255, 0.25) 0%, rgba(98, 137, 255, 0) 70%)`
- `linear-gradient(to right in oklab, rgb(255, 255, 255) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to left in oklab, rgb(255, 255, 255) 0%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| roobert | `--font-body` | webfont | 500, 400, 600, 700 | All site typography, including display headings, body copy, navigation, buttons, and captions. | Inter |

- **roobert:** Use clean sans-serif forms with mostly medium-to-semibold weights; headlines are large and sentence case, with no conspicuous tracking.

### Type scale — Major Third (ratio ≈ 1.289, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 600 | 1.25 | 0 | — | roobert | Large brand and campaign statements, especially prominent closing or visual moments. |
| h1 | 56px | 600 | 1.07 | 0 | — | roobert | Primary hero headline, centered and emphatic. |
| h2 | 48px | 600 | 1.16 | 0 | — | roobert | Major section headings across feature, customer, and resource blocks. |
| h3 | 26px | 600 | 1.23 | 0 | — | roobert | Feature-card and subsection titles. |
| h4 | 22px | 600 | 1.27 | 0 | — | roobert | Smaller card or supporting content headings. |
| body | 18px | 500 | 1.38 | 0 | — | roobert | Hero supporting copy and primary explanatory paragraphs. |
| caption | 16px | 400 | 1.63 | 0 | — | roobert | Muted descriptions, labels, and compact supporting content. |
| button | 16px | 500 | 1.5 | 0 | — | roobert | CTA labels and pill-shaped action controls. |
| nav | 16px | 500 | 1.5 | 0 | — | roobert | Compact main navigation and footer navigation. |

## Spacing & layout

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

The page uses a spacious, centered composition with a measured maximum content width of 1200px. Hero content is centered above a wide product preview; subsequent sections alternate full-width dark, white, and pale-gray bands. Feature areas use three-column groupings or two-column splits, while testimonial and resource content form card rows. Heading alignment shifts from centered in the hero and feature story to left-aligned in later editorial blocks. Section rhythm is generous, with clear gaps between major bands and restrained density within each band.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `50%` · badge `50%` · link `16px` · xs `4px` · sm `6px` · md `12px` · lg `16px` · xl `24px` · 2xl `32px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.07) 0px 1px 2px 0px`
- Shadow `sm` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px `
- Shadow `inset` (other): `rgba(0, 0, 0, 0.4) 0px 4px 24px 0px, rgba(207, 255, 105, 0.4) 0px 0px 0px 3px, rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset`
- Shadow `inset-2` (card): `rgba(0, 0, 0, 0.3) 0px 8px 32px 0px, rgba(0, 0, 0, 0.2) 0px 2px 8px 0px, rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset`
- Shadow `inset-3` (card): `rgba(255, 255, 255, 0.3) 0px 2px 4px 0px inset, rgba(0, 0, 0, 0.1) 0px -2px 4px 0px inset, rgba(0, 0, 0, 0.3) 0px 4px 16px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most content is flat, with section color and spacing doing the structural work. Cards use rounded corners and occasional subtle shadows; dark sections may use faint borders to separate columns. Reserve pronounced layering for framed product previews or interactive UI elements, and avoid adding shadows to every card.

## Imagery

The hero uses a large framed capture of the returns portal, with a real-world landscape visible behind the UI. Feature panels show compact interface screens and operational diagrams; customer proof uses photographic campaign cards. Images are rectangular and cleanly cropped, usually contained within cards rather than bleeding across the page. Keep mock-up colors subordinate to the dark teal, white, and lime brand palette.

## Components

### Primary CTA

Pill-shaped lime button with dark text; use for demo booking and pricing actions, with generous horizontal padding.

### Dark CTA

Dark teal pill with white label for secondary actions such as automation-related navigation.

### Feature card

Rounded card grouping an interface image, a concise heading, and explanatory copy; keep card treatment restrained.

### Product preview

Large rectangular portal capture centered below the hero CTA, framed against the dark canvas.

### Testimonial carousel card

Photographic customer card with an overlaid brand mark and large percentage proof point.

### Resource card

Editorial card on pale gray with a small category label, bold title, compact summary, and read-more link.

### Measured component styles

- **Primary button** (“Demo buchen”): background #cfff69 · text #051923 · radius 3.35544e+07px · padding 16px 32px · 500 18px roobert
- **Secondary button** (“Automatisieren”): background #051923 · text #ffffff · radius 3.35544e+07px · padding 12px 20px · 500 16px roobert
- **Link** (“Self-Service Portal Kunden retournieren ”): transparent background · text #051923 · radius 0px · padding 0px · 400 16px roobert
- **Card** (“95% der Kunden loben den einfachen Proze”): background #004853 · text #051923 · radius 16px · padding 32px · 400 16px roobert
- **Badge** (“2”): background #18181b · text #ffffff · radius 3.35544e+07px · padding 0px · 700 10px roobert
- **Navigation item** (“Plattform Preise Integrationen Ressource”): transparent background · text #051923 · radius 0px · padding 0px · 400 16px roobert

## Do

- Anchor key narrative sections in Midnight Teal (#051923).
- Use Electric Lime (#cfff69) selectively for primary actions.
- Alternate dark sections with white or Cloud Gray (#eef0f2) bands.
- Show the actual product interface early and at generous scale.
- Keep Roobert-style typography clean and mostly sentence case.
- Use spacious section breaks and orderly card columns.

## Don't

- Do not turn lime into a full-page background color.
- Do not flatten every section into the same dark surface.
- Do not use decorative gradients as the main content treatment.
- Do not add heavy shadows to every card.
- Do not let interface mock-up colors redefine the brand palette.
- Do not crowd the hero with extra navigation or copy.

## Agent prompt

Build a new SaaS page using a spacious, high-contrast 8returns visual language. Use Midnight Teal (#051923) for the main narrative canvas, Gallery White (#ffffff) for clean content resets, and Cloud Gray (#eef0f2) for secondary section bands. Reserve Electric Lime (#cfff69) for prominent pill-shaped primary actions. Set all text in a Roobert-like sans serif, with large centered section headlines and compact muted supporting copy. Keep content within a measured 1200px maximum width, using broad section bands, clear vertical rhythm, and simple two- or three-column groupings. Lead with a concise message and a large, framed product UI preview. Use restrained borders and shadows; let real interface imagery and customer photography provide texture without overpowering the palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and copy above lime CTA and a wide portal preview on a dark canvas. | primary demo action, interactive product preview | dark hero band, centered headline, lime pill CTA, framed product capture |
| 2 | feature-grid | White section with centered introduction, category controls, and three feature columns. | feature categories, learn-more links | white band, three-column cards, interface thumbnails |
| 3 | how-it-works | Dark full-width band with a centered title, three process columns, and a lower CTA. | three-step explanation, demo action | dark canvas, numbered process columns, subtle dividers |
| 4 | integrations | Pale-gray band with centered title and a two-column feature-and-media arrangement. | integration reassurance, feature selection | gray surface, split layout, stacked feature copy |
| 5 | feature-split | Dark full-width brand story with a centered message and three lower proof columns. | brand credibility, support reassurance | dark band, centered statement, three-column proof points |
| 6 | testimonials | White section with a left-aligned heading and horizontal photographic testimonial cards. | customer proof, carousel navigation | photo cards, large percentage metrics, carousel arrows |
| 7 | content-feed | Pale-gray editorial band with heading and three aligned article cards. | browse resources, read-more links | gray band, category labels, editorial card row |
| 8 | cta | White section containing a rounded teal split panel with copy, two CTAs, and a visual area. | book a demo, view pricing | teal promotional panel, lime headline, paired pill buttons |
| 9 | footer | Black footer with four link columns and oversized blue 8returns wordmark near the bottom. | multi-category navigation, contact access | black canvas, four-column link groups, oversized brand mark |

## Source CSS custom properties (selected)

```css
--omr-text-on-blush: #5a2d3e;
```

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