---
version: alpha
name: Sauce Labs
description: "Cream editorial calm, pine-green ink, and a pixel-halftone cheetah mid-sprint."
colors:
  on-surface-variant: "#3c483c"
  on-surface: "#192319"
  surface: "#f0f0ec"
  outline: "#c8c8be"
  error: "#961001"
  primary: "#6d7344"
  off-white: "#f8f8f8"
  forest: "#043423"
  slate: "#2d372d"
  warm-gray: "#dcdcd7"
  highlight: "#abe082"
  petal: "#f191b7"
  sunflower: "#f1be23"
  flare: "#f55524"
  shock: "#4790dd"
typography:
  eyebrow-label:
    fontFamily: Atkinson Hyperlegible Next
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 110
    letterSpacing: 0.05em
  bullet-small:
    fontFamily: Atkinson Hyperlegible Next
    fontSize: 14px
    fontWeight: 400
    lineHeight: 140
    letterSpacing: 0em
  body:
    fontFamily: Atkinson Hyperlegible Next
    fontSize: 16.5px
    fontWeight: 400
    lineHeight: 140
    letterSpacing: 0em
  body-2:
    fontFamily: Atkinson Hyperlegible Next
    fontSize: 18px
    fontWeight: 400
    lineHeight: 140
    letterSpacing: 0em
  heading-5:
    fontFamily: Atkinson Hyperlegible Next
    fontSize: 24px
    fontWeight: 400
    lineHeight: 110
    letterSpacing: 0em
  heading-4:
    fontFamily: Atkinson Hyperlegible Next
    fontSize: 32px
    fontWeight: 400
    lineHeight: 95
    letterSpacing: 0em
  heading-3:
    fontFamily: Atkinson Hyperlegible Next
    fontSize: 36px
    fontWeight: 400
    lineHeight: 95
    letterSpacing: 0em
  heading-2:
    fontFamily: Atkinson Hyperlegible Next
    fontSize: 50px
    fontWeight: 400
    lineHeight: 95
    letterSpacing: 0em
  heading-1:
    fontFamily: Atkinson Hyperlegible Next
    fontSize: 70px
    fontWeight: 400
    lineHeight: 95
    letterSpacing: 0em
  super-display:
    fontFamily: P22 Mackinac Pro
    fontSize: 92px
    fontWeight: 400
    lineHeight: 95
    letterSpacing: 0em
rounded:
  pill: 40px
  large-card: 32px
  card: 20px
  panel: 16px
  chip-small: 13px
  input-tight: 6px
  micro: 4.224px
spacing:
  mobile-side-gutter: 26px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
---
# Sauce Labs — Style Reference
> Cream editorial calm, pine-green ink, and a pixel-halftone cheetah mid-sprint.

**Theme:** light

Sauce Labs runs on a warm ivory canvas (`#f0f0ec`) that a soft sunflower gradient washes toward at the fold — a paper-white register, not a SaaS white. The ink is pine green (`#192319`), never pure black, and it carries almost everything: headlines, body, and the dark pill CTAs. The signature move is the typographic split — P22 Mackinac Pro, a high-contrast serif, sets display headlines at a tight 95% line height, while every label and eyebrow is set in Atkinson Hyperlegible Mono, a legibility-first monospace, uppercase and letter-spaced. The color story is a large, deliberately playful token set (petal pink, shock blue, sunflower, flare orange, highlight green) but it lives almost entirely in illustration and editorial accent — the interface itself stays pine-on-ivory. Layout floats: a fully-rounded (2.5rem) pill nav bar and pill buttons sit on the cream field with soft, wide, low-opacity shadows. The result reads editorial and considered — a testing platform that dresses like a design studio.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Ivory | `#f0f0ec` | `--color-ivory` | Primary page canvas — warm paper, the default background everywhere. |
| Off-White | `#f8f8f8` | `--color-off-white` | Card and surface fill lifted off the ivory; the floating-panel white. |
| Pine | `#192319` | `--color-pine` | Primary ink AND dark CTA fill — headings, body, pill buttons. Never pure black. |
| Forest | `#043423` | `--color-forest` | Deeper green — the logo, active/hover links, high-emphasis marks. |
| Moss | `#3c483c` | `--color-moss` | Secondary text and default link color; the quiet green. |
| Olive | `#6d7344` | `--color-olive` | Muted labels, mono eyebrows, and the accent-weight subheading color. |
| Slate | `#2d372d` | `--color-slate` | Dark surface — the green used when a section inverts to a dark panel. |
| Stone | `#c8c8be` | `--color-stone` | Hairline borders and dividers on light surfaces. |
| Warm Gray | `#dcdcd7` | `--color-warm-gray` | Text/detail on dark surfaces; the lightest neutral step. |
| Highlight | `#abe082` | `--color-highlight` | Bright chartreuse — illustration + emphasis only, never UI chrome. |
| Petal | `#f191b7` | `--color-petal` | Halftone pink in the cheetah art and decorative borders — editorial accent. |
| Sunflower | `#f1be23` | `--color-sunflower` | Warm yellow of the fold gradient; celebratory, not a control color. |
| Flare | `#f55524` | `--color-flare` | Hot orange — the loudest accent; reserved for illustration and rare emphasis. |
| Shock | `#4790dd` | `--color-shock` | Blue accent — used sparingly against all the green; editorial highlight. |
| Clay Red | `#961001` | `--color-clay-red` | Error / destructive semantic red; never decorative. |

*(The full brand token set — including every `light-*` tint and the `deep-shock` / `khaki` / `ochre` families — is reproduced intact in Quick Start.)*

## Tokens — Typography
### P22 Mackinac Pro — high-contrast serif for all display and headings; set tight (95% line height) and large. The editorial voice of the brand. · `--font-family-primary`
- **Substitute:** Times New Roman, Canela, Freight Display Pro
- **Weights:** 400, 500
- **Sizes:** 92px super · 70px h1 · 50px h2 · 36px h3 · 32px h4 · 24px h5
- **Line height:** 95% (heading) → 110% (subheading)
- **Letter spacing:** none — the serif carries its own rhythm at tight tracking
- **Role:** Every headline and display line. This is the brand's face; keep it serif, keep it big, keep the line height tight.

### Atkinson Hyperlegible Next — the body and UI sans; a legibility-first typeface (designed for maximum character distinction). · `--font-family-secondary`
- **Substitute:** Arial, Inter, system-ui
- **Weights:** 300, 400, 500
- **Sizes:** 18px p1 · ~16.5px p2 · 14px bullet
- **Line height:** 140% (body)
- **Letter spacing:** default / normal
- **Role:** Paragraphs, buttons, navigation, and all reading text. Its wide, unambiguous letterforms are a deliberate accessibility stance, not a neutral default.

### Atkinson Hyperlegible Mono — uppercase eyebrows, labels, and code-adjacent captions. · `--font-family-supporting`
- **Substitute:** JetBrains Mono, IBM Plex Mono, ui-monospace
- **Weights:** 300, 400, 500
- **Sizes:** ~12.5px button-eyebrow
- **Line height:** ~110–140%
- **Letter spacing:** wide, uppercase (e.g. "FROM BUSINESS INTENT TO PRODUCTION CONFIDENCE")
- **Role:** Section eyebrows, kickers, and small metadata labels. The mono signals the developer-tooling DNA under the editorial surface.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Eyebrow / label | 12.5px (.781rem) | 110% | wide, uppercase | `--text-button-eyebrow` |
| Bullet / small | 14px (.875rem) | 140% | normal | `--text-bullet` |
| Body (p2) | ~16.5px (1.031rem) | 140% | normal | `--text-p2` |
| Body (p1) | 18px (1.125rem) | 140% | normal | `--text-p1` |
| Heading 5 | 24px (1.5rem) | 110% | normal | `--text-h5` |
| Heading 4 | 32px (2rem) | 95% | normal | `--text-h4` |
| Heading 3 | 36px (2.25rem) | 95% | normal | `--text-h3` |
| Heading 2 | 50px (3.125rem) | 95% | normal | `--text-h2` |
| Heading 1 | 70px (4.375rem) | 95% | normal | `--text-h1` |
| Super / display | 92px (5.75rem) | 95% | normal | `--text-super` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| Mobile side gutter | 26px | `--spacing-mobile-sides` |
| xs | 4px | `--spacing-xs` *(inferred)* |
| sm | 8px | `--spacing-sm` *(inferred)* |
| md | 16px | `--spacing-md` *(inferred)* |
| lg | 24px | `--spacing-lg` *(inferred)* |
| xl | 40px | `--spacing-xl` *(inferred)* |

### Border Radius
| Element | Value |
|---------|-------|
| Pill (nav bar, buttons) | 40px (2.5rem) `--radius-pill` |
| Large card | 32px |
| Card | 20px |
| Panel | 16px |
| Chip / small | 13px |
| Input / tight | 6px |
| Micro | 4.224px |
| Full circle (icon chip) | 50% / 100% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Soft wide | `rgba(0,0,0,0.14) 0px 2px 44px 0px` | `--shadow-soft` |
| Panel | `rgba(0,0,0,0.18) 0px 8px 36px 0px` | `--shadow-panel` |
| Nav | `rgba(0,0,0,0.1) 0px 8px 40px 0px` | `--shadow-nav` |
| Layered | `rgba(0,0,0,0.1) 0px 4px 4px 0px, rgba(0,0,0,0.1) 0px 8px 40px 0px` | `--shadow-layered` |

### Layout
- **Page max-width:** contained, wide (centered content column on full-bleed ivory)
- **Section gap:** generous — large vertical breathing room between blocks
- **Card padding:** comfortable interior; rounded 20–32px corners
- **Element gap:** 4px base unit; 26px mobile side gutters

## Components
### Floating Pill Nav
**Role:** Primary top navigation.
A fully-rounded (`40px`) off-white/white bar floating on the ivory canvas with a soft wide shadow (`0px 8px 40px rgba(0,0,0,0.1)`). Logo left (forest `#043423` mark + "SauceLabs" wordmark), text nav center with dropdown chevrons, LOGIN + a dark pine "BOOK A DEMO" pill right. Nav labels are small, moss-green, uppercase-adjacent.

### Primary Button (Dark Pill)
**Role:** Highest-emphasis CTA — "START FREE", "BOOK A DEMO".
Pine `#192319` fill, off-white text, fully-rounded `40px` pill, comfortable horizontal padding, mono-ish uppercase label. This is the ONLY heavy control — the interface has no colored CTA; the dark pill IS the call to action.

### Secondary Button (Light Pill + Chip)
**Role:** Alternate CTA sitting beside the primary.
White/off-white fill, pine text, `40px` pill, often paired with a circular olive icon chip (`50%`) on the left holding the logo glyph. Border is a hairline or none; depth comes from the shadow, not a stroke.

### Card
**Role:** Content container / feature panel.
Off-white `#f8f8f8` (or `#fdfdfe`) fill, `20–32px` radius, optional 1px near-black `#0a140a` hairline border, soft drop shadow. Corners are notably round — the card language matches the pill language.

### Eyebrow / Kicker
**Role:** Section label above a headline.
Atkinson Hyperlegible Mono, ~12.5px, uppercase, wide letter-spacing, olive `#6d7344` or moss. Always paired above a serif display headline.

### Display Headline
**Role:** The hero statement.
P22 Mackinac Pro, up to 92px, pine `#192319`, 95% line height so multi-line headlines pack tightly. Weight 400–500 — the contrast in the serif does the work, not bold weight.

### Body Paragraph
**Role:** Reading text under headlines.
Atkinson Hyperlegible Next, 16.5–18px, 140% line height, pine or moss. Wide legible letterforms; comfortable measure.

### Text Link
**Role:** Inline and nav links.
Moss `#3c483c` at rest, forest `#043423` on emphasis/hover, ~12.5px on nav, `500` weight, with `6px` bottom padding for underline breathing room. No bright link-blue — links stay green.

### Icon Chip
**Role:** Circular logo/avatar badge inside buttons and lists.
Perfect circle (`50%` / `100%`), olive or off-white fill, holding the branch/glyph mark. A recurring rounded motif that ties the pill system together.

### Illustration Field
**Role:** Hero and section artwork.
Pixel/halftone rendered figures (the sprinting cheetah) in forest green with petal-pink and sunflower/flare halftone bleed, over the ivory→sunflower gradient. Art is where the loud palette lives.

### Dark Section Panel
**Role:** Inverted content block.
Slate `#2d372d` or pine `#192319` background with warm-gray `#dcdcd7` / off-white text and green accents. Used to punctuate the light flow, not as the default.

## Do's and Don'ts
### Do
- Keep ivory `#f0f0ec` as the default background — warm paper, never `#ffffff` flat.
- Set every headline in P22 Mackinac Pro at 95% line height; let it run large.
- Use Atkinson Hyperlegible Mono, uppercase and letter-spaced, for all eyebrows and labels.
- Make CTAs dark pine `#192319` pills with `40px` radius — the pill is the button language.
- Keep links green (moss → forest); reserve bright accents for illustration.
- Convey depth with soft, wide, low-opacity shadows — not with heavy borders.

### Don't
- Don't introduce a colored CTA button — the loud palette (petal, flare, shock, sunflower) is editorial/illustration only.
- Don't use pure black for text; pine `#192319` is the darkest ink.
- Don't square off the corners — nav, buttons, and cards are all deeply rounded.
- Don't set body or headings in the mono; mono is labels-only.
- Don't tighten body line height — 140% is the reading rhythm; only display goes to 95%.
- Don't swap Atkinson Hyperlegible for a generic sans — the legibility face is a deliberate stance.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#f0f0ec` | Warm ivory page background. |
| 1 | Surface | `#f8f8f8` | Cards and floating panels lifted off the canvas. |
| 1b | Surface bright | `#fdfdfe` | Brightest card fill for max lift. |
| 2 | Tint wash | `#ebedb8` / `#f1e082` | Light-khaki / sunflower gradient wash at the fold. |
| Dark | Inverted panel | `#2d372d` / `#192319` | Slate/pine dark sections with light text. |

## Elevation
Depth is luminance-plus-shadow, never a hard stroke. Surfaces step up in brightness (ivory → off-white → `#fdfdfe`) and then float on soft, wide, low-opacity drop shadows — the nav uses `0px 8px 40px rgba(0,0,0,0.1)`, panels `0px 8px 36px rgba(0,0,0,0.18)`. Where a border exists, it is a single hairline (`#c8c8be` on light, `1px #0a140a` on cards) doing definition, not elevation. Dark sections invert entirely rather than deepening a shadow.

## Imagery
Distinctive and editorial: pixel/halftone illustration is the hero language — a sprinting cheetah rendered as a dithered grid of forest-green marks bleeding into petal-pink and sunflower-orange halftone dots, floating over an ivory-to-sunflower gradient. Photography is minimal to absent; the brand expresses itself through this crafted, slightly retro-digital illustration style plus the circular logo glyph. When you need art, reach for textured/halftone treatments in the green-plus-warm-accent palette, not stock photos.

## Layout
Full-bleed ivory canvas with a centered, contained content column. The nav is a discrete floating pill rather than a full-width bar — it sits inset from the edges with air around it. Hero rhythm: mono eyebrow → oversized serif headline (95% leading) → body paragraph → a pair of pill CTAs → large illustration. Sections are separated by generous vertical space; the fold introduces a warm gradient. 26px side gutters on mobile. The whole page reads as a series of calm, well-spaced editorial blocks, punctuated occasionally by an inverted dark panel.

## Typography Signature
Two voices in tension, resolved by role. The serif (P22 Mackinac Pro) is expressive and high-contrast, packed to 95% line height so a headline like "Verify AI-generated code / at the pace it's written." reads as one dense, confident block. Against it, the monospace (Atkinson Hyperlegible Mono) plays the technical foil — uppercase, spaced-out eyebrows that whisper "engineering." The connective tissue is Atkinson Hyperlegible Next for body, a genuinely accessible sans whose wide, disambiguated letterforms keep the editorial serif honest and readable. The move that works: pairing a display serif with a hyperlegible mono/sans family signals "crafted but rigorous" — design-studio polish over developer-tool substance, with accessibility baked into the type choice rather than bolted on.

## Agent Prompt Guide
## Quick Color Reference
- background: `#f0f0ec` / text: `#192319` / surface: `#f8f8f8` / border: `#c8c8be` / accent: `#f191b7` (petal, illustration) · `#4790dd` (shock) · `#f1be23` (sunflower) / primary action: `#192319` (dark pine pill — no distinct CTA color)

## Example Component Prompts
1. **Floating pill nav**: Build a top navigation as a fully-rounded (40px radius) off-white `#f8f8f8` bar floating on an ivory `#f0f0ec` page with a soft shadow `0 8px 40px rgba(0,0,0,0.1)`. Forest-green `#043423` logo mark + wordmark on the left, moss `#3c483c` uppercase-ish text links with chevrons in the center, and a dark pine `#192319` "BOOK A DEMO" pill on the right.
2. **Hero block**: Centered hero on ivory `#f0f0ec` fading to sunflower `#f1e082` at the bottom. Mono eyebrow in Atkinson Hyperlegible Mono `#6d7344`, uppercase, letter-spaced; then a 70–92px P22 Mackinac Pro serif headline in pine `#192319` at 95% line height; an 18px Atkinson Hyperlegible Next body paragraph; and two 40px pills — a solid pine `#192319` "START FREE" and a white pill with a circular olive icon chip.
3. **Feature card**: Off-white `#f8f8f8` card, 24px radius, optional 1px `#0a140a` hairline, soft `0 8px 36px rgba(0,0,0,0.18)` shadow. Serif h3 (36px, pine), Atkinson Hyperlegible Next body at 140% line height, a moss `#3c483c` text link with 6px bottom padding.
4. **Dark section panel**: Full-width slate `#2d372d` block with warm-gray `#dcdcd7` body text, a P22 Mackinac Pro serif heading in off-white, and a highlight-green `#abe082` accent mark. Keep CTAs as off-white or pine pills.
5. **Eyebrow + headline pair**: Atkinson Hyperlegible Mono label, 12.5px, uppercase, wide tracking, olive `#6d7344`, directly above a large pine `#192319` P22 Mackinac Pro serif headline at 95% line height.

## Similar Brands
- **Linear** — shares the floating, rounded, softly-shadowed surface language and restraint in using color as accent, not chrome.
- **Vercel / Geist editorial** — the same "developer tool dressed as a design studio" register, though Sauce Labs is warmer and serif-led.
- **Stripe Press** — kindred in pairing a high-contrast serif with rigorous small-caps/mono labels over a warm paper canvas.
- **Readymag / Are.na** — the editorial-web, illustration-forward, off-white-not-white sensibility.
- **Braille Institute (Atkinson Hyperlegible)** — a literal kinship: the type choice foregrounds accessibility as a design value.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — core */
  --color-ivory: #f0f0ec;
  --color-off-white: #f8f8f8;
  --color-white: #ffffff;
  --color-pine: #192319;
  --color-forest: #043423;
  --color-moss: #3c483c;
  --color-olive: #6d7344;
  --color-slate: #2d372d;
  --color-stone: #c8c8be;
  --color-warm-gray: #dcdcd7;
  /* Colors — pine tints */
  --color-pine-light: #192319a3;
  --color-pine-xlight: #1923193d;
  --color-pine-inactive-link: #19231980;
  /* Colors — accents */
  --color-highlight: #abe082;
  --color-light-highlight: #f3ffcc;
  --color-petal: #f191b7;
  --color-light-petal: #ffeef5;
  --color-sunflower: #f1be23;
  --color-light-sunflower: #f1e082;
  --color-khaki: #abad6c;
  --color-light-khaki: #ebedb8;
  --color-light-olive: #eef0ae;
  --color-flare: #f55524;
  --color-light-flare: #ffb098;
  --color-ochre: #b28e21;
  --color-shock: #4790dd;
  --color-light-shock: #bed1e4;
  --color-deep-shock: #334bc3;
  --color-light-deep-shock: #dcdaff;
  --color-clay-red: #961001;
  --color-light-clay-red: #ffc8be;
  /* Typography — Families */
  --font-family-primary: 'P22 Mackinac Pro', 'Times New Roman', serif;
  --font-family-secondary: 'Atkinson Hyperlegible Next', Arial, sans-serif;
  --font-family-supporting: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;
  /* Typography — Scale */
  --text-super: 5.75rem;
  --text-h1: 4.375rem;
  --text-h2: 3.125rem;
  --text-h3: 2.25rem;
  --text-h4: 2rem;
  --text-h5: 1.5rem;
  --text-p1: 1.125rem;
  --text-p2: 1.031rem;
  --text-bullet: 0.875rem;
  --text-button-eyebrow: 0.781rem;
  --leading-heading: 95%;
  --leading-subheading: 110%;
  --leading-body: 140%;
  /* Spacing */
  --spacing-mobile-sides: 26px;
  /* Border Radius */
  --radius-pill: 2.5rem;
  --radius-lg: 32px;
  --radius-card: 20px;
  --radius-panel: 16px;
  --radius-chip: 13px;
  --radius-sm: 6px;
  /* Shadows */
  --shadow-soft: 0px 2px 44px 0px rgba(0,0,0,0.14);
  --shadow-panel: 0px 8px 36px 0px rgba(0,0,0,0.18);
  --shadow-nav: 0px 8px 40px 0px rgba(0,0,0,0.1);
  --shadow-layered: 0px 4px 4px 0px rgba(0,0,0,0.1), 0px 8px 40px 0px rgba(0,0,0,0.1);
}
```
### Tailwind v4
```css
@theme {
  /* Colors — core */
  --color-ivory: #f0f0ec;
  --color-off-white: #f8f8f8;
  --color-white: #ffffff;
  --color-pine: #192319;
  --color-forest: #043423;
  --color-moss: #3c483c;
  --color-olive: #6d7344;
  --color-slate: #2d372d;
  --color-stone: #c8c8be;
  --color-warm-gray: #dcdcd7;
  --color-pine-light: #192319a3;
  --color-pine-xlight: #1923193d;
  --color-pine-inactive-link: #19231980;
  --color-highlight: #abe082;
  --color-light-highlight: #f3ffcc;
  --color-petal: #f191b7;
  --color-light-petal: #ffeef5;
  --color-sunflower: #f1be23;
  --color-light-sunflower: #f1e082;
  --color-khaki: #abad6c;
  --color-light-khaki: #ebedb8;
  --color-light-olive: #eef0ae;
  --color-flare: #f55524;
  --color-light-flare: #ffb098;
  --color-ochre: #b28e21;
  --color-shock: #4790dd;
  --color-light-shock: #bed1e4;
  --color-deep-shock: #334bc3;
  --color-light-deep-shock: #dcdaff;
  --color-clay-red: #961001;
  --color-light-clay-red: #ffc8be;
  /* Typography — Families */
  --font-family-primary: 'P22 Mackinac Pro', 'Times New Roman', serif;
  --font-family-secondary: 'Atkinson Hyperlegible Next', Arial, sans-serif;
  --font-family-supporting: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;
  /* Typography — Scale */
  --text-super: 5.75rem;
  --text-h1: 4.375rem;
  --text-h2: 3.125rem;
  --text-h3: 2.25rem;
  --text-h4: 2rem;
  --text-h5: 1.5rem;
  --text-p1: 1.125rem;
  --text-p2: 1.031rem;
  --text-bullet: 0.875rem;
  --text-button-eyebrow: 0.781rem;
  --leading-heading: 95%;
  --leading-subheading: 110%;
  --leading-body: 140%;
  /* Spacing */
  --spacing-mobile-sides: 26px;
  /* Border Radius */
  --radius-pill: 2.5rem;
  --radius-lg: 32px;
  --radius-card: 20px;
  --radius-panel: 16px;
  --radius-chip: 13px;
  --radius-sm: 6px;
  /* Shadows */
  --shadow-soft: 0px 2px 44px 0px rgba(0,0,0,0.14);
  --shadow-panel: 0px 8px 36px 0px rgba(0,0,0,0.18);
  --shadow-nav: 0px 8px 40px 0px rgba(0,0,0,0.1);
  --shadow-layered: 0px 4px 4px 0px rgba(0,0,0,0.1), 0px 8px 40px 0px rgba(0,0,0,0.1);
}
```