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

# 7shifts · Design System

> Restaurant operations, with a bold human touch

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

A high-contrast SaaS homepage that pairs an immersive black hero with warm, neutral product sections. Bright blue calls to action, expressive lime notes, and restaurant photography keep the practical product story lively and human.

## North star

Keep the product story legible by alternating bold black proof moments with warm, spacious sections and using blue only for clear actions.

## Overview

7shifts builds a distinctive rhythm from a black, full-bleed opening into broad warm off-white product sections, white comparison and content areas, and a second black proof section. Blue is reserved for primary actions and selected product panels, so conversion cues remain immediately legible; orange appears sparingly in proof metrics and supporting details. Lime accents, including handwritten promotional strips, add a playful human note rather than replacing the core palette. Headings use a compact, rounded modern sans with confident scale and tight leading; body copy stays clean and readable, with occasional handwritten labels for contrast. The layout alternates centered introductions with two-column feature cards and image-led product panels. Restaurant scenes and UI mockups are treated as overlapping collage elements in the hero, while later sections use contained cards and simple logos. Generous section spacing lets dense product information breathe, and rounded pills soften the otherwise high-contrast geometry.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Kitchen Ink | `#000000` | `--color-kitchen-ink` | brand | Hero and proof-section canvas, primary text, and dark comparison panel. |
| Clean Plate | `#ffffff` | `--color-clean-plate` | surface | Default canvas, feature-card surfaces, and reversed text on dark areas. |
| Warm Linen | `#f1f0ec` | `--color-warm-linen` | surface | Broad product-story bands, FAQ background, and muted button or footer surfaces. |
| Shift Blue | `#4570ff` | `--color-shift-blue` | accent | Primary pill CTAs and vivid product panels; the main action color. |
| Soft Divider | `#d1d5dc` | `--color-soft-divider` | semantic | Subtle borders and hairlines, especially in supporting and footer content. |
| Charcoal Copy | `#404040` | `--color-charcoal-copy` | neutral | Muted supporting text against light surfaces. |
| Mockup Gray | `#7f7f7f` | `--color-mockup-gray` | semantic | Secondary card or product-mockup detail, not a defining brand surface. |
| Signal Orange | `#ff6808` | `--color-signal-orange` | accent | Sparingly used accent in proof details and illustrated or product-card content. |
| Lavender Tile | `#dad8ff` | `--color-lavender-tile` | semantic | Pastel timeline or product-card illustration detail, not a core page background. |
| Deep Teal | `#244f47` | `--color-deep-teal` | semantic | Feature mockup panel imagery; treat as product illustration color. |
| Lime Note | `#c6ff94` | `--color-lime-note` | accent | Handwritten promo strip and small playful illustration accents. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Clean Plate) · `--color-surface` → `#f1f0ec` (Warm Linen) · `--color-surface-2` → `#000000` (Kitchen Ink) · `--color-text` → `#000000` (Kitchen Ink) · `--color-text-muted` → `#ffffff` (Clean Plate) · `--color-text-subtle` → `#404040` (Charcoal Copy) · `--color-border` → `#d1d5dc` (Soft Divider) · `--color-accent` → `#4570ff` (Shift Blue) · `--color-accent-2` → `#ff6808` (Signal Orange) · `--color-on-accent` → `#ffffff` (Clean Plate)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f1f0ec` | 18.42:1 | AAA |
| `#ffffff` | `#f1f0ec` | 1.14:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#404040` | `#ffffff` | 10.37:1 | AAA |
| `#404040` | `#f1f0ec` | 9.09:1 | AAA |
| `#404040` | `#000000` | 2.03:1 | fail |
| `#4570ff` | `#ffffff` | 4.19:1 | AA-large |
| `#4570ff` | `#f1f0ec` | 3.67:1 | AA-large |
| `#4570ff` | `#000000` | 5.01:1 | AA |

### Gradients

- `linear-gradient(oklab(0 0 0 / 0) 0%, oklab(0 0 0 / 0.8) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| interTight | `--font-body` | webfont | 400, 700 | Body copy, captions, and text links | Inter |
| medium | `--font-display` | webfont | 500 | Headings, navigation, and primary buttons | DM Sans |
| nanumPenScript | `--font-nanumpenscript` | webfont | 400, 500 | Handwritten promotional strips and small expressive labels | Caveat |
| Universal Sans Display | `--font-universal-sans-display` | system | 400, 500 | Occasional feature heading display face | Manrope |

- **interTight:** Regular weight keeps long copy clear; compact tracking and short line lengths support dense product details.
- **medium:** Medium weight gives display and heading text a rounded, assertive feel; use sentence case.
- **nanumPenScript:** Use sparingly for informal annotation-like emphasis, not functional or long-form text.
- **Universal Sans Display:** Medium-weight sans display styling; keep usage consistent with the compact, clean headline system.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 500 | 0.9 | -0.03em | — | medium | Large, tightly set headline moments in hero or major brand statements. |
| h1 | 52px | 500 | 1.1 | 0 | — | medium | Primary hero headline and dominant page-level statement. |
| h2 | 48px | 500 | 0.9 | -0.03em | — | medium | Section titles introducing product, proof, FAQ, and resource content. |
| h3 | 44px | 500 | 1.1 | 0 | — | Universal Sans Display | Feature-card and prominent subsection headings. |
| h4 | 36px | 500 | 1.1 | 0 | — | medium | Smaller card or supporting section headings. |
| body | 16px | 400 | 1.5 | 0 | — | interTight | Explanatory copy, feature descriptions, and FAQ answers. |
| caption | 14px | 400 | 1 | -0.025em | — | interTight | Compact labels, eyebrow text, and supporting metadata. |
| button | 16px | 500 | 1.5 | 0 | — | medium | Primary and secondary CTA labels. |
| nav | 16px | 500 | 1.5 | 0 | — | medium | Main navigation items and menu labels. |
| link | 16px | 400 | 1.5 | -0.02em | — | interTight | Inline actions, story links, and resource links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20, 24, 28, 40, 60, 80 px.
- Section rhythm 80px · element gap 12px · card padding 40px · max content width 1120px.

The opening hero spans the viewport, then content settles into a measured central column, with the measured page max width at 1120px. Sections alternate centered introductions, two-column feature splits, card rows, and broad full-width proof or FAQ bands. The 80px section rhythm and 12px element rhythm create comfortable pacing. Feature cards pair product imagery with concise copy; later resource and footer areas become denser and more grid-like. Alignment shifts deliberately between centered calls to action and left-aligned informational content.

## Shape & elevation

- Radius: button `9999px` · card `12px` · media `50%` · nav `9999px` · link `9999px` · xs `4px` · sm `8px` · md `10px` · lg `12px` · xl `20px` · 2xl `40px` · pill `9999px`
- Shadow `md` (nav): `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 4px 15px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most surfaces are flat, with clear color-block separation doing the work of depth. Cards generally rely on white against warm linen rather than visible shadows, while fine gray hairlines separate supporting content. The floating pill navigation is a notable elevated element with a soft shadow; collage overlap and mockup layering add depth in the hero.

## Imagery

The hero combines restaurant photography, torn-paper edges, and an angled product-interface mockup, framed as a layered collage over black. Feature rows use crisp UI captures and illustrative colored panels rather than abstract decoration. Proof content relies on real team photographs and testimonial thumbnails. Keep images contained in purposeful cards or cutout compositions; avoid glossy 3D treatments or generic stock imagery.

## Components

### Announcement strip

Narrow text-led offer above the main navigation; the hero also uses a lime handwritten promo strip.

### Pill navigation

Light rounded navigation capsule with dark links, a blue primary CTA, and a pale login action.

### Primary CTA

Bright blue (#4570ff) pill with white medium-weight text; repeated as the key conversion action.

### Feature split card

Paired product UI visual and white copy panel with a short title, description, checklist, and text link.

### Comparison panels

Side-by-side light and black panels contrast disconnected workflows with the unified 7shifts system.

### Proof band

Black full-width section combining an audience statement, orange-highlighted metrics, and team testimonial imagery.

### FAQ accordion

Warm linen section with a prominent heading and stacked question rows, using compact plus controls.

### Measured component styles

- **Primary button** (“Get started, it's free!”): background #4570ff · text #ffffff · radius 3.35544e+07px · padding 0px 16px · 500 16px medium
- **Secondary button** (“POS”): background #fbfaf8 · text #000000 · radius 3.35544e+07px · padding 0px 16px · 500 16px medium
- **Link** (“Read their story”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px interTight
- **Card** (“Hire Fill roles and onboard faster Strea”): background #ffffff · text #000000 · radius 0px · padding 40px · 400 16px interTight
- **Navigation item** (“Skip to main content Skip to navigation ”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px interTight

## Do

- Anchor the first impression with a black hero.
- Use warm linen to distinguish the main product-story band.
- Reserve Shift Blue for prominent calls to action.
- Pair feature copy with actual product-interface imagery.
- Use Lime Note as a small handwritten accent.
- Alternate centered section openings with left-aligned detail.

## Don't

- Do not make every section black or blue.
- Do not turn orange or lime into large page backgrounds.
- Do not use generic gradients as a replacement for the palette.
- Do not crowd feature cards with long paragraphs.
- Do not use handwritten type for navigation or body copy.
- Do not add heavy shadows to every card.

## Agent prompt

Build a new 7shifts-style SaaS page with a bold, human restaurant-operations feel. Start with a Kitchen Ink (#000000) hero and layered restaurant photography plus a product UI mockup; place a light pill navigation above the content and make the primary action Shift Blue (#4570ff) with white text. Use Warm Linen (#f1f0ec) for broad product sections, Clean Plate (#ffffff) for cards, and Charcoal Copy (#404040) for supporting text. Set confident, compact sans headings and clear Inter-like body copy; reserve handwritten lettering and Lime Note (#c6ff94) for small promo annotations. Alternate feature splits, comparison panels, proof metrics, FAQ, and resource grids with generous breathing room. Keep imagery authentic and product-specific, rely on flat color blocks and restrained borders, and avoid decorative effects that compete with the interface.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark hero with centered pill navigation and a left-copy, right-collage composition. | announcement offer, primary and secondary CTA | black canvas, pill navigation, handwritten lime strip, layered product collage |
| 2 | logo-cloud | Six-column logo row across a warm linen band. | customer proof | muted brand marks, open horizontal row |
| 3 | feature-grid | Centered introduction and CTA followed by a vertically stacked two-column feature-card sequence. | feature navigation, explore links, checklist benefits | warm linen canvas, UI mockup panels, white copy cards |
| 4 | feature-split | Two-column product visual and copy panel in the continuing feature sequence. | feature explanation, benefit checklist | interface mockup, white information card |
| 5 | feature-split | Two-column split with vivid schedule interface imagery beside concise copy. | feature explanation, explore link | orange illustration panel, schedule UI capture |
| 6 | feature-split | Product interface visual paired with a white copy panel. | feature explanation, benefit checklist | deep teal mockup panel, compact text link |
| 7 | feature-split | Blue-backed feedback interface paired with explanatory copy. | feature explanation, engagement benefits | blue product panel, white information card |
| 8 | comparison | Centered section heading above side-by-side old-way and connected-system panels. | before-and-after comparison, conversion CTA | light and black panels, checklist contrast, embedded product imagery |
| 9 | integrations | Compact rounded integration panel with text and categories on the left and logo tiles on the right. | integration discovery, category selection | gray card, white logo tiles, blue link button |
| 10 | testimonials | Full-width black proof band with centered headline, metrics, and a row of testimonial thumbnails. | social proof, customer stories | orange metric highlights, photo cards, lime ticker |
| 11 | timeline | Centered title and CTA above a horizontal three-step timeline with pastel cards. | onboarding timeline, progress milestones | three pastel cards, checklist rows |
| 12 | faq | Warm linen band with a left-aligned section title and stacked question rows. | expandable questions | accordion rows, plus icons, spacious background |
| 13 | cta | Two-column blue conversion banner with headline and actions on the left, review proof on the right. | free trial CTA, book a demo | blue rounded banner, stacked rating tiles |
| 14 | content-feed | Three-column content-card grid with a section heading and view-more link. | resource discovery, read or listen links | editorial thumbnails, content labels, short descriptions |
| 15 | footer | Multi-column link directory with brand mark, social tools, and a narrow black legal bar. | site navigation, social links | dense link columns, light footer surface, dark bottom strip |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(255,255,255,0);
--osano-button-border-color: #fff;
--osano-button-background-color: #f1d600;
--osano-button-foreground-color: #FFFFFF;
--osano-dialog-background-color: #ffffff;
--osano-dialog-foreground-color: #000000;
--osano-info-dialog-overlay-color: rgba(0,0,0,0.45);
--osano-link-color: #ff6608;
--osano-toggle-off-track-color: #f1f0ec;
--osano-toggle-off-thumb-color: #ffffff;
--osano-toggle-on-track-color: #000000;
--osano-toggle-on-thumb-color: #FFFFFF;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-button-close-color: #000000;
--osano-button-accept-background-color: #f1d600;
--osano-button-accept-border-color: #fff;
--osano-button-accept-foreground-color: #FFFFFF;
--osano-button-deny-background-color: #f1d600;
--osano-button-deny-border-color: #fff;
--osano-button-deny-foreground-color: #FFFFFF;
--osano-button-reject-all-background-color: #f1d600;
--osano-button-reject-all-background-color-hover: #ddc200;
--osano-button-reject-all-border-color: #fff;
--osano-button-reject-all-foreground-color: #FFFFFF;
--osano-button-manage-background-color: #f1d600;
--osano-button-manage-border-color: #fff;
--osano-button-manage-foreground-color: #FFFFFF;
--osano-info-dialog-link-color: #ff6608;
--osano-info-dialog-button-close-color: #000000;
--osano-info-dialog-toggle-off-track-color: #f1f0ec;
--osano-info-dialog-toggle-off-thumb-color: #ffffff;
--osano-info-dialog-toggle-on-track-color: #000000;
--osano-info-dialog-toggle-on-thumb-color: #FFFFFF;
--osano-info-dialog-button-background-color: #f1d600;
--osano-info-dialog-button-border-color: #FFFFFF;
--osano-info-dialog-button-foreground-color: #FFFFFF;
--osano-dialog-gpc-background-color: #ffffff;
```

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