Indigo Bolt
#4570ffViolet action color for filled buttons, selected navigation states, and focused conversion moments.
7shifts
7shifts.comWebsite preview
The design language
7shifts is a light, air-kissed SaaS canvas with a single punchy indigo as the call-to-action and a small cast of warm accents doing the personality work. The page reads like a clean restaurant counter: white surface, warm bone secondary panels, soft pastel card variants, and the occasional full-bleed black band that makes everything around it feel brighter. Orange is the signature flourish — it underlines hero words in a hand-drawn stroke, floods feature backgrounds, and marks tabbed content — while a lime-green acts as highlighter text inside dark sections. Components are generous and rounded (pill buttons, 20px cards, 40px hero plates) with a compact vertical rhythm. The lone script typeface, Nanum Pen Script, shows up only as a personality accent under hero copy and never on body or UI controls.
Color palette
brand
accent
Ember Orange
#ff6808Orange accent for outlined action borders, linked labels, and lightweight interactive emphasis
Lime Highlighter
#c6ff94Green text accent for links, tags, and emphasized short phrases.
Lavender Mist
#ebdcffSoft card surface, gentle section background — pastel variant for breaking up the white canvas without adding noise
Ice Blue
#d6e0ffCool pastel card surface, section wash — pairs with indigo to reinforce the primary brand hue at low intensity
Lilac Bloom
#c293f1Saturated card background in feature card grid — bolder pastel, one of four colored card variants that rotate across feature rows
Deep Navy
#193f78Blue wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color
Forest Sage
#244f47Muted teal card variant — grounded, earthy counterpoint in the four-color card rotation
neutral
Warm Bone
#f1f0ecSecondary canvas, soft section backgrounds, neutral action borders — the off-white that keeps the page from feeling sterile
Paper White
#ffffffPage background, card surfaces, button fills, body text on dark sections
Ink Black
#000000Primary text, dark feature sections, filled dark comparison cards — creates the dramatic black bands that make the colors pop
Hairline
#e5e7ebBorders, dividers, table rules, input borders — the workhorse neutral stroke
Stone
#d1d5dbMid-gray strokes, subtle dividers, muted icon backgrounds
Smoke
#6e6d6cSecondary body text, helper text, muted captions
Graphite
#555555Tertiary text, button labels on neutral buttons
Typography
Type scale
Minor Third (1.2) · 20px basetext-150
150px · 500 · 0.75The quick brown fox jumps
text-120
120px · 500 · 0.93The quick brown fox jumps
display
64px · 500 · 1.11 · -1.92px trackingThe quick brown fox jumps
heading-lg
48px · 500 · 1.14 · -1.2px trackingThe quick brown fox jumps
text-40
40px · 500 · 1.1The quick brown fox jumps
heading
36px · 500 · 1.2 · -0.9px trackingThe quick brown fox jumps
text-30
30px · 400 · 1The quick brown fox jumps
text-28
28px · 500 · 1The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Regular
- Weights
- 400
- Sizes
- 11px, 12px, 14px, 16px, 18px, 36px, 64px
- Line height
- 1, 1.11, 1.14, 1.2, 1.3, 1.33, 1.38, 1.4, 1.5, 1.56
- Letter spacing
- -0.05, -0.03, -0.025, -0.022, -0.02
Regular — detected in extracted data but not described by AI
Additional typeface
A geometric grotesque sans-serif (custom-marketed as the site font — Inter, Manrope, or DM Sans are close substitutes)
- Weights
- 400, 500, 700
- Sizes
- 11, 12, 14, 16, 18, 24, 28, 36, 40, 48, 64, 120, 150
- Line height
- 0.75–1.56 depending on size; tightest at display sizes (0.75–0.93), standard at body (1.4–1.5)
- Letter spacing
- Tight negative tracking throughout: -0.05em at 120–150px display, -0.03em at 48–64px headings, -0.02em to -0.025em at 24–40px sub-headings, near-zero at 14–18px body. The 700-weight eyebrow caps at 14px use +0.025em (opened tracking) to read as a label, not body.
- Fallback
- Inter (closest match for the geometric forms and tight tracking), Manrope, DM Sans
- Features
- "ss01" on, "cv11" on
All UI, body, navigation, and headings. Weight 500 carries buttons, nav links, and sub-headings; weight 400 owns body copy; weight 700 reserved for eyebrow labels with opened tracking. The full range from 11px captions to 150px display headings makes this a single-family system doing everything.
Additional typeface
Nanum Pen Script
- Weights
- 400, 500
- Sizes
- 28, 30
- Line height
- 1.0–1.5
- Letter spacing
- -0.0300em
- Fallback
- Caveat, Kalam, Permanent Marker
Hand-drawn personality accent — appears only under hero copy (the orange 'actually work' underline) and similar signature moments. Never used for body, UI, or navigation. This is the brand's most distinctive typographic move: a script that says 'we're human, not enterprise software'.
Additional typeface
Medium
- Weights
- 500
- Sizes
- 11px, 12px, 14px, 16px, 18px, 24px, 28px, 36px, 40px, 48px, 64px, 120px, 150px
- Line height
- 0.75, 0.9, 0.93, 1, 1.1, 1.11, 1.33, 1.4, 1.43, 1.5
- Letter spacing
- -0.03, -0.02, -0.018, -0.012
Medium — detected in extracted data but not described by AI
Additional typeface
Bold
- Weights
- 700
- Sizes
- 14px
- Line height
- 1.14
- Letter spacing
- 0.025
Bold — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 64-80px
- Card padding
- 20-24px
- Element gap
- 8-12px
Border radius
nav
16pxhero
40pxtags
9999pxcards
20pxicons
8pxinputs
12pxbuttons
9999pxSpacing scale
2px3px4px6px8px9px10px12px15px16px20px24px28px30px32px40px48px50px56px60px73px80px83px92px93px100px113px120px123px133px150px160px172px175px233px253pxGuidelines
Do
- Use #4570ff exclusively for primary actions — pill button at 9999px radius, 12px × 24px padding, 16px weight 500 white text
- Reach for #ff6808 (Ember Orange) for the signature personality accents: hero underlines, feature section backgrounds, outlined buttons — never for body text or neutral UI
- Apply 20px radius to all cards, 9999px to all buttons and tags, 40px to hero plates and full-bleed section edges
- Set display headings (64px and above) at -0.05em letter-spacing; tighten progressively to -0.02em at 24px and reach near-zero at 14px body
- Pair the Nanum Pen Script only with hero or section-level headings, and only beneath a single keyword — it is punctuation, not a running style
- Alternate full-bleed black bands with warm bone (#f1f0ec) sections to create the contrast rhythm that makes the pastel and lime accents feel alive
- Use the four pastel card variants (#ebdcff, #d6e0ff, #c293f1, #193f78, #244f47) in rotation across feature grids to add color variety without introducing new tokens
Don’t
- Don't fill buttons with #ff6808 — orange is an accent, not an action; the only filled action color is #4570ff
- Don't apply Nanum Pen Script to body copy, navigation, buttons, or anything below heading level — it loses its personality when overused
- Don't use shadows or heavy elevation to separate cards — the system relies on fill contrast (white on bone, pastel on white, black on photo), not drop shadows
- Don't introduce new saturated colors for UI — the palette is intentionally tight: one indigo, one orange, one lime, and four pastel variants
- Don't set body text below 14px or above 18px — the readable range is narrow and the negative tracking is calibrated for it
- Don't use #c6ff94 (Lime Highlighter) as a background outside of dark or photo sections — on white it reads as low-contrast and washed out
- Don't apply +0.025em opened tracking to anything other than 14px weight 700 eyebrow labels — it is reserved for that specific all-caps label style
Components
Primary Pill Button
Main call-to-action — 'Get your free trial', demo requestsFilled #4570ff indigo, white text, 9999px radius (true pill), 12px vertical × 24px horizontal padding, weight 500 at 16px. Single shadow or none. This is the only filled chromatic button in the system.
Outlined Orange Button
Secondary action on hero or feature sectionsTransparent fill, 2px #ff6808 border, #ff6808 text, 9999px radius, 10px × 20px padding. Reads as energetic, not aggressive.
Ghost Nav Button
Navigation link with hover affordanceTransparent fill, #555555 text at 16px weight 500, 8px vertical × 12px horizontal padding, 16px radius. Becomes filled #f1f0ec on hover.
Login Pill Button
Low-emphasis utility action in the headerFilled #f1f0ec warm bone, #000000 text, 9999px radius, 10px × 20px padding. Sits next to the primary indigo CTA to create a quiet/active pair.
Content Card
Feature cards, testimonial cards, product modulesWhite surface, 20px radius, 20–24px padding, optional 1px #e5e7eb hairline border. No shadow by default — the dark band context or colored fill provides the elevation.
Colored Feature Card
Rotating pastel/navy/forest card variant in feature gridsOne of four fills — #ebdcff lavender, #d6e0ff ice blue, #c293f1 lilac, #193f78 navy, or #244f47 sage. 20px radius, 20–24px padding, white or black text depending on fill luminance. This rotation is a signature device for adding variety without breaking the system.
Dark Comparison Card
'With 7shifts' side of the before/after splitFilled #000000, white text, 20px radius, 24px padding. Paired against a light bone card with the same radius to create the side-by-side contrast block.
Hero Plate
Full-width hero container and case-study bandFull-bleed white or dark photo, 40px radius on the top or bottom edge when transitioning into a card grid. Contains centered headline at 48–64px weight 500 with the Nanum Pen Script orange underline accent.
Tabbed Feature Section
Product feature showcase with switchable tabsWhite background, centered heading at 36–48px, tab row with active tab marked by an indigo underline and weight 500. Content below splits into a colored feature panel (orange or pastel) on the left and white text panel on the right, both at 20px radius.
Pill Tag / Case Study Chip
Case study links, category tags, small badgesFilled #ffffff or #f1f0ec, #000000 text at 12–14px weight 400, 9999px radius, 4px × 12px padding. Sits beneath logo grids.
Logo Grid
Customer trust strip — restaurant chain logosHorizontal row of brand logos on a dark photo background, each with a white pill 'Case study' chip beneath. No card containers; logos sit directly on the photographic surface.
Comparison Check / Cross List
Bullet-style benefits list inside comparison cardsEach item is a 16px weight 500 label preceded by a circular checkmark (#000000 filled, white check) or cross (#000000 with white ×). Items stack at 8px row gap inside the card padding.
Hand-Drawn Underline Accent
Personality flourish under hero or section keywordsNanum Pen Script at 28–30px in #ff6808, positioned beneath a single key word in the headline. Never used for more than one word per heading, and only on hero/feature sections — not on body copy.
Surfaces & elevation
Level 0
Page Canvas
#ffffffPrimary page background
Level 1
Warm Bone Section
#f1f0ecSecondary canvas, large content bands, soft section backgrounds
Level 2
Card Surface
#ffffffProduct cards, content cards sitting on the bone background
Level 3
Dark Band
#000000Full-bleed dark sections, dramatic comparison cards, photo overlays
Level 4
Pastel Wash
#d6e0ff / #ebdcffSoft tinted card and section variants for visual rhythm
The system intentionally avoids drop shadows. Elevation is communicated through fill contrast — white cards on warm bone surfaces, pastel cards on white, black cards on photo backgrounds — and through the dramatic black bands that act as full-bleed separators. The absence of shadows is a deliberate choice that keeps the page feeling flat, modern, and graphic, letting the orange and lime accents do the visual lifting instead of shadow stacks.
Layout & imagery
Layout
Page is centered with a 1200px max-width content well on a pure white canvas. The hero is a centered text block — large 48–64px weight 500 headline, orange Nanum Pen Script underline accent, single indigo pill CTA — with no hero image. The page alternates between four content shapes: (1) centered text + CTA blocks on white, (2) side-by-side comparison cards in a 2-column grid with a light bone card paired against a black card, (3) full-bleed dark photographic bands for social proof, and (4) tabbed feature sections with a colored panel + white text panel split. Feature grids use 3–4 column card layouts with rotating pastel card fills. Section gaps run 64–80px, with 20–24px card padding and 8–12px element gaps. Navigation is a top bar: logo left, 6 nav links center, indigo CTA + bone login pill right. The overall density is compact but with generous breathing room around the dark bands, which act as full-bleed dividers between otherwise quiet content sections.
Imagery
Imagery is sparse and purposeful. The only full-bleed photograph is a dark, warm-lit restaurant interior (wood tones, ambient glow) used as a single trust/case-study band — it grounds the brand in its restaurant context without dominating. Product screenshots appear inside dark-bordered device frames with the app UI composited over the photo, showing real software rather than illustrations. No illustrations, no 3D renders, no abstract graphics. Icons are minimal: simple filled circles for check/cross marks in comparison lists. The visual weight is overwhelmingly typographic and layout-driven, with color (not imagery) doing the decorative work.
Design notes
Agent Guide
Quick Color Reference: - primary action: #4570ff (filled action) - Accent / personality: #ff6808 (Ember Orange) - Highlight on dark: #c6ff94 (Lime) - Text primary: #000000 - Text secondary: #6e6d6c (Smoke) - Surface base: #ffffff (Paper White) - Surface secondary: #f1f0ec (Warm Bone) - Border: #e5e7eb (Hairline) Example Component Prompts: 1. Create a hero section on white: centered 64px weight 500 headline in #000000 with the word 'actually' (or one key word) underlined in #ff6808 using Nanum Pen Script at 28px. Subhead at 18px weight 400 in #6e6d6c. Single indigo pill CTA at 9999px radius, #4570ff fill, white 16px weight 500 text, 12px × 24px padding. Section vertical padding 80px. 2. Create a before/after comparison: two cards side by side at 20px radius. Left card #f1f0ec fill, 24px padding, 36px weight 500 heading in #000000, three list items with 8px row gap, each prefixed by a filled black circle with a white × mark. Right card identical structure but #000000 fill, white text, and filled black circle with white check mark. 3. Create a feature grid of 4 cards in a row: each card 20px radius, 24px padding, varying pastel fills — #ebdcff, #d6e0ff, #c293f1, #193f78. Heading at 24px weight 500, body at 14px weight 400. Text color switches to white on #193f78 and #244f47, stays #000000 on the lighter pastels. 4. Create a tabbed product feature: white background section, centered 36px weight 500 heading. Tab row below with 5 tab labels in 16px weight 400 #6e6d6c; active tab is 16px weight 500 #000000 with a 2px #4570ff underline. Content below: left half is a #ff6808 orange panel (20px radius, 20px padding) containing a product screenshot frame; right half is a white panel (20px radius, 20px padding) with a 24px weight 500 heading and 14px body text. 5. Create a case study logo band: full-bleed dark restaurant photo background, 40px top radius. Row of 6 restaurant logos in white, evenly spaced. Beneath each logo, a white pill tag (9999px radius, #ffffff fill, 12px weight 400 #000000 text, 4px × 12px padding) reading 'Case study'.
Similar brands
Toast
Same restaurant-industry SaaS playbook: white canvas, single punchy CTA color, warm pastel card variants, and generous pill-shaped buttons
Linear
Same tight negative tracking on geometric sans-serif headings and a single saturated action color against an otherwise near-monochrome interface
Calendly
Same centered-hero-on-white pattern with a single pill CTA, alternating light/dark comparison sections, and rounded 20px cards
Webflow
Same mix of quiet monochrome UI with bursts of color used as section backgrounds and a script/handwritten accent for personality moments
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
