---
version: alpha
name: Calendly
description: "A white booking card floating on electric blue, ringed by soft slate shadow."
colors:
  on-surface-variant: "#476788"
  on-surface: "#071A31"
  surface: "#FFFFFF"
  outline: "#E7EDF6"
  neutral: "#E4E6E9"
  primary: "#006BFF"
  blue-pressed: "#004EBA"
  blue-light: "#6BB1FF"
  blue-tint: "#EDF5FF"
  blue-tint-alt: "#E6F0FF"
  navy-secondary: "#0B3558"
  slate-gray: "#5F6D77"
  graphite: "#3D464E"
  mist-gray: "#93A0AA"
  cool-white: "#F8F9FB"
  warm-white: "#FCFBF8"
  beige: "#F5F3EE"
  border: "#D8DCE0"
  border-blue: "#D4E0ED"
  lavender: "#B89FFA"
typography:
  caption:
    fontFamily: Wulkan Text
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body-small:
    fontFamily: Wulkan Text
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  body:
    fontFamily: Wulkan Text
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-large:
    fontFamily: Wulkan Text
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  subheading:
    fontFamily: Wulkan Text
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  title:
    fontFamily: Wulkan Text
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.01em
  heading:
    fontFamily: Wulkan Text
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.01em
  display-s:
    fontFamily: Wulkan Text
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.015em
  display-m:
    fontFamily: Wulkan Text
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -0.02em
  display-l:
    fontFamily: Wulkan Text
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.02em
rounded:
  hairline-chip-corner: 2px
  small-control: 4px
  button-input-link-chip: 8px
  card-panel: 16px
  large-card-feature-panel: 20px
  pill-rounded-full-control: 40px
spacing:
  2xs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 48px
---
# Calendly — Style Reference
> A white booking card floating on electric blue, ringed by soft slate shadow.

**Theme:** light

Calendly runs a bright, optimistic light system built on one electric brand blue (`#006BFF`) against a stack of near-white canvases — some cool (`#F8F9FB`), some deliberately warm (`#FCFBF8`, `#F5F3EE`). The signature move is the product surface as hero: a crisp white booking card lifted on a slate-tinted, multi-layer soft shadow, set against oversized organic blobs of blue and lavender. Type is friendly and geometric — a proprietary rounded sans (Calendly Sans / Gilroy) carries every headline at a calm medium weight (500), never heavy, with a Wulkan Text serif reserved for editorial italic accents. Ink is never pure black: the darkest value is a deep navy (`#071A31`) that also serves as an inverted surface. The rhythm is spacious and product-forward — generous white space, 8px-radius controls, and a restrained palette that lets the single blue do all the pointing.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Calendly Blue | `#006BFF` | `--color-blue` | The one signature accent — primary CTA fill, links, selected calendar cells, brand mark. Everything else defers to it. |
| Blue Pressed | `#004EBA` | `--color-blue-pressed` | Darker blue for hover/active/visited states of the primary blue; never a resting fill. |
| Blue Light | `#6BB1FF` | `--color-blue-light` | Decorative — the large hero blob and soft accent highlights, not a text or control color. |
| Blue Tint | `#EDF5FF` | `--color-blue-tint` | Pale wash behind selected/available calendar dates and hovered blue affordances. |
| Blue Tint Alt | `#E6F0FF` | `--color-blue-tint-alt` | Second pale-blue fill, interchangeable with the tint for hovered date cells. |
| Ink Navy | `#071A31` | `--color-ink` | Darkest value — all display headings, the inverted "Microsoft" button surface, logo-wall marks. Stands in for black. |
| Navy Secondary | `#0B3558` | `--color-navy-2` | Secondary headings, dark text links, subheads — one step lighter than the ink. |
| Slate Blue | `#476788` | `--color-slate-blue` | Muted body text and the outline/ghost button's border + label. |
| Slate Gray | `#5F6D77` | `--color-slate` | Neutral body/caption gray; also the tint color of every soft shadow (rgba 95,109,119). |
| Graphite | `#3D464E` | `--color-graphite` | Dense neutral text on light surfaces. |
| Mist Gray | `#93A0AA` | `--color-mist` | Placeholder / disabled / de-emphasized labels. |
| White | `#FFFFFF` | `--color-white` | Primary canvas and the floating card surface. |
| Cool White | `#F8F9FB` | `--color-surface-cool` | Cool off-white section background — the default alternating band. |
| Warm White | `#FCFBF8` | `--color-surface-warm` | Warm near-white; also the light text used on the navy inverted surface. |
| Beige | `#F5F3EE` | `--color-beige` | Warmer editorial section fill for a softer, human register. |
| Blue-Gray Surface | `#E7EDF6` | `--color-surface-bluegray` | Tinted panel/border for calendar chrome and quiet dividers. |
| Border | `#D8DCE0` | `--color-border` | Neutral hairline for inputs, cards, dividers. |
| Border Blue | `#D4E0ED` | `--color-border-blue` | Cool blue-gray border on tinted surfaces. |
| Neutral Fill | `#E4E6E9` | `--color-neutral-fill` | Light gray skeleton/placeholder blocks and inert chips. |
| Lavender | `#B89FFA` | `--color-lavender` | The one non-blue decorative accent — the large violet hero blob. Purely atmospheric, never on a control. |

## Tokens — Typography
### Calendly Sans / Gilroy — the geometric brand sans that carries every headline and control · `--font-display`
- **Substitute:** Gilroy, Geist, ui-sans-serif, system-ui, sans-serif
- **Weights:** 400, 500 (headline default), 600, 700
- **Sizes:** 72 / 60 / 48px display; 36 / 24 / 22px subheads
- **Line height:** ~1.05–1.15 on display, tightening as size grows
- **Letter spacing:** near-zero to slightly negative on large display; a rounded, friendly geometric skeleton (Calendly Sans ships as an oblique variable, 0–10deg)
- **Role:** Every hero headline, section title, button label and nav item. Held at medium weight (500) on display so headlines feel calm and human, never shouted.
### Wulkan Text — serif reserved for editorial italic accents · `--font-serif`
- **Substitute:** 'Wulkan Display', Georgia, 'Times New Roman', serif
- **Weights:** 400, 500, 600 — each with a true italic
- **Sizes:** used at pull-quote / accent scale, not body
- **Line height:** relaxed, editorial
- **Letter spacing:** default
- **Role:** A warm serif counterpoint — italic emphasis words and editorial flourishes against the geometric sans. Loaded in italics, signaling accent-only use.
### Geist — utilitarian variable sans for dense UI/mono-adjacent text · `--font-ui`
- **Substitute:** ui-sans-serif, system-ui, -apple-system, sans-serif
- **Weights:** 100–900 variable
- **Sizes:** 14 / 16px UI text
- **Line height:** ~1.4–1.5 for readable body
- **Letter spacing:** default
- **Role:** Interface plumbing and fine print where the brand sans isn't needed.
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 1.4 | 0 | `--text-caption` |
| Body Small | 14px | 1.45 | 0 | `--text-sm` |
| Body | 16px | 1.5 | 0 | `--text-base` |
| Body Large | 18px | 1.5 | 0 | `--text-lg` |
| Subheading | 22px | 1.3 | 0 | `--text-xl` |
| Title | 24px | 1.25 | -0.01em | `--text-2xl` |
| Heading | 36px | 1.15 | -0.01em | `--text-3xl` |
| Display S | 48px | 1.1 | -0.015em | `--text-display-sm` |
| Display M | 60px | 1.08 | -0.02em | `--text-display-md` |
| Display L | 72px | 1.05 | -0.02em | `--text-display-lg` |

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

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 2xs | 4px | `--spacing-2xs` |
| xs | 8px | `--spacing-xs` |
| sm | 12px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 24px | `--spacing-lg` |
| xl | 40px | `--spacing-xl` |
| 2xl | 48px | `--spacing-2xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Hairline / chip corner | 2px |
| Small control (button inner, date cell) | 4px |
| Button / input / link chip | 8px |
| Card / panel | 16px |
| Large card / feature panel | 20px – 24px |
| Pill / rounded-full control | 40px – 48px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Card Float | `rgba(95,109,119,0.04) 0px 4px 5px, rgba(95,109,119,0.03) 0px 8px 15px, rgba(95,109,119,0.08) 0px 30px 50px` | `--shadow-float` |
| Card Float Soft | `rgba(95,109,119,0.04) 0px 4px 5px, rgba(95,109,119,0.03) 0px 8px 15px, rgba(95,109,119,0.06) 0px 15px 30px` | `--shadow-float-soft` |
| Navy Ring | `rgb(7,26,49) 0px 0px 0px 1px` | `--shadow-ring` |
| Lift | `rgba(0,0,0,0.1) 0px 20px 25px -5px, rgba(0,0,0,0.1) 0px 8px 10px -6px` | `--shadow-lift` |

### Layout
- **Page max-width:** ~1200–1280px contained, centered
- **Section gap:** generous — large vertical rhythm between bands (~80–120px)
- **Card padding:** 24px (lg) inside floating panels
- **Element gap:** 16px (md) default; 8px (xs) between stacked controls

## Components
### Primary Button
**Role:** The single most important action — "Get started for free", "Sign up with Google", "Confirm".
Solid `#006BFF` fill, `#FFFFFF` label, `1px #006BFF` border, `8px` radius, `10px 16px` padding, 14px/600 weight. No shadow at rest. Hover deepens toward `#004EBA`. Exactly one blue action lives in any decision zone.

### Inverted Button
**Role:** A high-contrast alternative CTA paired beside the blue one — e.g. "Sign up with Microsoft".
Deep navy `#071A31` fill with `#FCFBF8`/white label, same `8px` radius and `10px 16px` padding, 14px/600. Uses the ink navy as a surface so it reads premium without competing with the blue for "primary."

### Outline / Ghost Button
**Role:** Secondary, lower-stakes actions — "Log In", "Talk to sales."
Transparent fill, `1px #476788` border and `#476788` label, `8px` radius, `10px 16px` padding, 14px/600. Quiet slate-blue that recedes behind the solid CTAs.

### Text Link
**Role:** Inline navigation and "Sign up free with email"-style affordances.
`#006BFF` at 700 weight, underlined for standalone links; nav-style links use `#0B3558`/`#071A31` at 600 with an `8px` `4px 8px` hover chip. Blue links carry the weight; navy links stay utilitarian.

### Floating Product Card
**Role:** The hero device — a live booking page ("Share your booking page") rendered as a crisp white panel.
`#FFFFFF` surface, `16px` radius, lifted on the slate-tinted `--shadow-float` (three stacked `rgba(95,109,119,*)` layers, up to 30/50px blur). Internal dividers use `#E7EDF6`. The product is the illustration.

### Calendar Cell
**Role:** Selectable dates inside the booking card.
Available dates fill with a pale `#EDF5FF` / `#E6F0FF` circle and `#006BFF` numerals; the selected date is a solid `#006BFF` disc with white text; inactive days are `#93A0AA`. Small radius (`4px`) or full circle per cell.

### Time-Slot Button
**Role:** Bookable time chips ("10:00am", "1:00pm") in the right rail.
White fill, `1px` blue-gray border, `#006BFF` label, `8px` radius. On selection the row splits into a navy "11:00am" state beside a solid blue "Confirm" — the only moment two dark controls sit together.

### Input Field
**Role:** Form controls (email capture, search).
White fill with a `1px #D8DCE0` hairline, `8px` radius; focus swaps to the `#071A31` navy 1px ring (`--shadow-ring`). Placeholder text `#93A0AA`.

### Logo Wall
**Role:** Social proof row — "Trusted by more than 100,000 of the world's leading organizations."
Monochrome customer marks rendered in ink navy `#071A31` on white, evenly spaced full-bleed, low contrast so they read as texture, not decoration.

### Skeleton / Placeholder Block
**Role:** Loading and de-emphasized content inside the product card.
Flat `#E4E6E9` rounded bars — no shimmer needed against the soft-shadowed white card.

### Decorative Blob
**Role:** Atmospheric background shapes behind the hero card.
Large organic fills of blue (`#006BFF` / `#6BB1FF`) and a single lavender (`#B89FFA`) mass, bleeding off-canvas. Purely mood — never interactive, never carrying text.

### Section Band
**Role:** Alternating page backgrounds that pace the scroll.
Cool `#F8F9FB` for product-forward bands, warm `#FCFBF8` / `#F5F3EE` for human/editorial bands. The warm-vs-cool alternation is the primary rhythm device.

## Do's and Don'ts
### Do
- Let `#006BFF` be the only accent that points — one blue CTA per decision zone, blue for links and selected states.
- Keep display headings at weight 500 in the geometric sans (`#071A31`) — calm, not bold.
- Float the product card on the slate-tinted `--shadow-float`; that soft `rgba(95,109,119,*)` shadow is the brand's depth signature.
- Alternate warm (`#FCFBF8`/`#F5F3EE`) and cool (`#F8F9FB`) near-whites to pace sections.
- Use the navy `#071A31` as an inverted *surface* for a second CTA, not as a second accent color.
- Reserve Wulkan Text strictly for italic editorial accents against the sans.

### Don't
- Don't introduce a second saturated accent — the lavender `#B89FFA` is atmospheric only and never touches a control.
- Don't use pure black; the darkest value is `#071A31`.
- Don't set headlines heavy (700+) — that breaks the friendly, medium-weight voice.
- Don't put two solid dark buttons side by side except the deliberate navy + blue "Confirm" pairing.
- Don't drop hard drop-shadows; depth is soft, slate-tinted, and multi-layered — or a single 1px navy ring.
- Don't let the logo wall gain color — keep customer marks monochrome navy.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Primary page canvas and the floating card face |
| 0 | Cool Band | `#F8F9FB` | Default alternating section background |
| 0 | Warm Band | `#FCFBF8` | Warmer near-white editorial band |
| 1 | Beige Band | `#F5F3EE` | Warmest human-register section fill |
| 1 | Blue-Gray Panel | `#E7EDF6` | Tinted calendar chrome / quiet inner panel |
| 1 | Blue Tint | `#EDF5FF` | Pale wash on selected/available date cells |
| 2 | Inverted | `#071A31` | Navy dark surface for CTAs and dark sections |

## Elevation
Depth is soft and slate-tinted, never harsh. The hero card sits on a three-layer shadow built entirely from `rgba(95,109,119,*)` — a 4/5px contact layer, an 8/15px mid layer, and a wide 30/50px ambient layer at 8% — giving a gentle, grounded float. Inputs and focus states instead use a crisp single `1px` navy ring (`rgb(7,26,49)`) with no blur. There is no glow and no colored shadow; elevation reads as "lifted paper on a bright desk," and most flat content sits directly on the white/near-white canvas with only a hairline border to separate it.

## Imagery
Product-as-hero. The primary "image" is a live rendering of Calendly's own booking UI — a white card with an avatar, calendar, and time slots — floated over oversized organic color blobs (blue + one lavender mass) that bleed off the viewport. Customer logos appear as a monochrome navy proof wall. Photography is minimal; illustration is limited to these soft geometric blobs and the product chrome itself. Icons are simple line/duotone marks (clock, camera, globe) inside the card. The effect is clean, optimistic SaaS — the interface itself is the illustration.

## Layout
Contained (~1200–1280px), centered, with a split hero: left column carries the headline + stacked CTAs, right column carries the floating product card over the color blobs. Sections are full-width bands that alternate warm and cool near-whites for rhythm, separated by generous vertical space. Navigation is a light top bar — wordmark left, dropdown nav center, ghost "Log In" + solid blue "Get started for free" right. Social proof (logo wall) sits immediately below the hero. Everything breathes; nothing is dense.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` (canvas), `#F8F9FB` (cool band), `#FCFBF8` (warm band)
- text: `#071A31` (headings/ink), `#5F6D77` / `#476788` (body/muted)
- surface: `#E7EDF6` (tinted panel), `#EDF5FF` (blue tint)
- border: `#D8DCE0` (neutral), `#D4E0ED` (blue-gray)
- accent: `#006BFF` (the only pointing color)
- primary action: `#006BFF` fill / `#FFFFFF` text; inverted alt = `#071A31` fill / white text

## Example Component Prompts
1. **Primary CTA**: Solid `#006BFF` button, white 14px/600 label, `8px` radius, `10px 16px` padding, no shadow at rest, hover deepens to `#004EBA`.
2. **Floating booking card**: `#FFFFFF` panel, `16px` radius, lifted on a three-layer slate shadow `rgba(95,109,119,0.04) 0 4px 5px, rgba(95,109,119,0.03) 0 8px 15px, rgba(95,109,119,0.08) 0 30px 50px`; inner dividers `#E7EDF6`.
3. **Hero headline**: Geometric sans (Gilroy / Calendly Sans) at 72px, weight 500, color `#071A31`, tight `1.05` line height, near-zero tracking.
4. **Calendar date cell**: available = `#EDF5FF` circle with `#006BFF` number; selected = solid `#006BFF` disc, white number; inactive = `#93A0AA`.
5. **Section band pair**: alternate a cool `#F8F9FB` band with a warm `#FCFBF8` band, generous vertical padding, contained 1200px, one blue CTA per band.

## Similar Brands
- **Intercom** — bright optimistic SaaS with a single confident brand hue and product-as-hero cards.
- **Notion** — warm-and-cool near-white surfaces with restrained ink type and soft floating UI panels.
- **Linear** — geometric medium-weight display sans and disciplined single-accent color logic (though darker in register).
- **Stripe** — floating product surfaces on soft multi-layer shadows over organic gradient/blob backgrounds.
- **Superhuman** — clean light canvas, one saturated blue accent, product interface framed as the marketing image.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-blue: #006BFF;
  --color-blue-pressed: #004EBA;
  --color-blue-light: #6BB1FF;
  --color-blue-tint: #EDF5FF;
  --color-blue-tint-alt: #E6F0FF;
  --color-ink: #071A31;
  --color-navy-2: #0B3558;
  --color-slate-blue: #476788;
  --color-slate: #5F6D77;
  --color-graphite: #3D464E;
  --color-mist: #93A0AA;
  --color-white: #FFFFFF;
  --color-surface-cool: #F8F9FB;
  --color-surface-warm: #FCFBF8;
  --color-beige: #F5F3EE;
  --color-surface-bluegray: #E7EDF6;
  --color-border: #D8DCE0;
  --color-border-blue: #D4E0ED;
  --color-neutral-fill: #E4E6E9;
  --color-lavender: #B89FFA;

  /* Typography — Families */
  --font-display: 'Calendly Sans', 'Gilroy', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Wulkan Text', 'Wulkan Display', Georgia, 'Times New Roman', serif;
  --font-ui: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 24px;
  --text-3xl: 36px;
  --text-display-sm: 48px;
  --text-display-md: 60px;
  --text-display-lg: 72px;
  --leading-display: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-2xl: 48px;

  /* Border Radius */
  --radius-hairline: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 48px;

  /* Shadows */
  --shadow-float: rgba(95,109,119,0.04) 0px 4px 5px 0px, rgba(95,109,119,0.03) 0px 8px 15px 0px, rgba(95,109,119,0.08) 0px 30px 50px 0px;
  --shadow-float-soft: rgba(95,109,119,0.04) 0px 4px 5px 0px, rgba(95,109,119,0.03) 0px 8px 15px 0px, rgba(95,109,119,0.06) 0px 15px 30px 0px;
  --shadow-ring: rgb(7,26,49) 0px 0px 0px 1px;
  --shadow-lift: rgba(0,0,0,0.1) 0px 20px 25px -5px, rgba(0,0,0,0.1) 0px 8px 10px -6px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-blue: #006BFF;
  --color-blue-pressed: #004EBA;
  --color-blue-light: #6BB1FF;
  --color-blue-tint: #EDF5FF;
  --color-blue-tint-alt: #E6F0FF;
  --color-ink: #071A31;
  --color-navy-2: #0B3558;
  --color-slate-blue: #476788;
  --color-slate: #5F6D77;
  --color-graphite: #3D464E;
  --color-mist: #93A0AA;
  --color-white: #FFFFFF;
  --color-surface-cool: #F8F9FB;
  --color-surface-warm: #FCFBF8;
  --color-beige: #F5F3EE;
  --color-surface-bluegray: #E7EDF6;
  --color-border: #D8DCE0;
  --color-border-blue: #D4E0ED;
  --color-neutral-fill: #E4E6E9;
  --color-lavender: #B89FFA;

  /* Typography — Families */
  --font-display: 'Calendly Sans', 'Gilroy', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Wulkan Text', 'Wulkan Display', Georgia, 'Times New Roman', serif;
  --font-ui: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 24px;
  --text-3xl: 36px;
  --text-display-sm: 48px;
  --text-display-md: 60px;
  --text-display-lg: 72px;
  --leading-display: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-2xl: 48px;

  /* Border Radius */
  --radius-hairline: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 48px;

  /* Shadows */
  --shadow-float: rgba(95,109,119,0.04) 0px 4px 5px 0px, rgba(95,109,119,0.03) 0px 8px 15px 0px, rgba(95,109,119,0.08) 0px 30px 50px 0px;
  --shadow-float-soft: rgba(95,109,119,0.04) 0px 4px 5px 0px, rgba(95,109,119,0.03) 0px 8px 15px 0px, rgba(95,109,119,0.06) 0px 15px 30px 0px;
  --shadow-ring: rgb(7,26,49) 0px 0px 0px 1px;
  --shadow-lift: rgba(0,0,0,0.1) 0px 20px 25px -5px, rgba(0,0,0,0.1) 0px 8px 10px -6px;
}
```