Exoflora

Design Specification — Exoflora

Overview

This design system was extracted programmatically from the source page. It is built on a dark canvas (#050505), ink text (#000000), a vivid accent (#D8C2FF). Display headings use a distinct face ("Playfair Display", serif) over the body stack ('Playfair Display'). Detected font weights: 400, 500, 600, 700, 800, 900. Detected style signatures: glassmorphism; soft-ui / layered elevation; gradient-rich / aurora; rounded / pill-heavy.

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Gradients

• `radial-gradient(circle at 68% 44%, rgba(216, 194, 255, 0.08), transparent 30%),

linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.02) 72%, rgba(0, 0, 0, 0.18) 100%)`

• `radial-gradient(ellipse at 22% 82%, rgba(0, 0, 0, 0.52), transparent 44%),

linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 20%, rgba(0,0,0,.5) 62%, rgba(0,0,0,.92) 100%)`

• `radial-gradient(ellipse at 72% 4%, rgba(191,238,255,.075), transparent 34%),

radial-gradient(ellipse at 14% 38%, rgba(216,194,255,.055), transparent 38%),

linear-gradient(180deg, #050505 0%, #070707 42%, #030303 100%)`

• `linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),

linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px)`

• linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent)
• linear-gradient(90deg, transparent, rgba(191,238,255,.34), rgba(255,255,255,.08), transparent)
• linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.018))
• radial-gradient(ellipse at 50% 0%, rgba(191,238,255,.08), transparent 60%), rgba(255,255,255,.025)
• `radial-gradient(ellipse at 56% 48%, rgba(191,238,255,.13), transparent 28%),

linear-gradient(90deg, rgba(0,0,0,.86), rgba(0,0,0,.28) 44%, rgba(0,0,0,.86)),

linear-gradient(180deg, rgba(0,0,0,.72), transparent 44%, rgba(0,0,0,.86))`

• `linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),

linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px)`

> 10 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: Playfair Display — stack: 'Playfair Display'

Display / heading typeface: "Playfair Display", serif (used for large headings; body uses the primary stack)

Font stacks (most used first)

• 'Playfair Display'
• "Playfair Display", serif
• "Inter", sans-serif
• "Playfair Display", serif !important
• 'Playfair Display', serif !important

Web font sources

• fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;1,400;1,500;1,600&display=swap
• fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 500, 600, 700, 800, 900

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 24px 90px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.16)
• inset 0 1px 0 rgba(255,255,255,.1), 0 30px 90px rgba(0,0,0,.42)
• 0 38px 110px rgba(0,0,0,.55), 0 0 60px rgba(191,238,255,.08)
• inset 0 1px 0 rgba(255,255,255,.12), 0 40px 120px rgba(0,0,0,.55)
• 0 0 42px rgba(191,238,255,.28)
• 0 28px 90px rgba(0,0,0,.46)
• inset 0 1px 0 rgba(255,255,255,.12), 0 34px 110px rgba(0,0,0,.48)
• 0 0 18px rgba(191,238,255,.7)
• 0 0 120px rgba(191,238,255,.16), inset 0 0 90px rgba(191,238,255,.06)
• 0 24px 100px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.16)

Layout

Container max-width: 900px

Grid columns (largest detected grid): 5

Breakpoints

• 640px
• 768px
• 900px
• 1024px

Animation & Motion

Transitions

• clip-path 1.25s cubic-bezier(.16,1,.3,1), transform 1.25s cubic-bezier(.16,1,.3,1), opacity .8s ease
• opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1)
• transform 1s cubic-bezier(.16,1,.3,1)
• transform .55s cubic-bezier(.16,1,.3,1), border-color .55s ease, background .55s ease, box-shadow .55s ease
• max-height .55s cubic-bezier(.16,1,.3,1)
• transform .35s cubic-bezier(.16,1,.3,1)
• transform .7s cubic-bezier(.16,1,.3,1), filter .7s ease
• transform .9s cubic-bezier(.16,1,.3,1), filter .9s ease
• transform .55s cubic-bezier(.16,1,.3,1), border-color .55s ease, background .55s ease
• opacity .9s cubic-bezier(.16,1,.3,1), visibility .9s ease
• `transform 1.05s cubic-bezier(.16,1,.3,1),

opacity .8s cubic-bezier(.16,1,.3,1),

background .45s ease,

border-color .45s ease`

Easing curves

• cubic-bezier(.16,1,.3,1)
• cubic-bezier(.16,1,.3,1)
• cubic-bezier(0.4, 0, 0.2, 1)

Keyframes

@keyframes heroReveal { 0% { opacity: 0; transform: translateY(28px); filter: blur(12px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes heroFadeUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes heroZoom { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes fieldMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes introGrid { to { transform: scale(1); opacity: .1; } }
@keyframes introOrbit { to { transform: translate(-50%, -50%) scale(1); opacity: .38; } }
@keyframes introFade { to { opacity: 1; } }
@keyframes introBrand { to { transform: translateY(0); opacity: 1; filter: blur(0); } }
@keyframes introLine { to { transform: translateX(100%); } }
@keyframes heroOnLoadImage { 0% { transform: scale(1.16); filter: brightness(.72) saturate(.9) blur(8px); } 100% { transform: scale(1); filter: brightness(1) saturate(1) blur(0); } }

Animations

• heroZoom 1.8s cubic-bezier(.16,1,.3,1) forwards
• fieldMarquee 28s linear infinite
• none
• introGrid 1.9s cubic-bezier(.16,1,.3,1) forwards
• introOrbit 1.85s cubic-bezier(.16,1,.3,1) forwards
• introFade .7s cubic-bezier(.16,1,.3,1) .14s forwards
• introBrand 1.08s cubic-bezier(.16,1,.3,1) .24s forwards
• introLine 1.2s cubic-bezier(.16,1,.3,1) .42s forwards
• heroOnLoadImage 2.2s cubic-bezier(.16,1,.3,1) forwards

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “Scents”

button-secondary — sample text: “Shop”

navigation-link

badge

Effects

• backdrop-filter: blur(18px)
• backdrop-filter: blur(16px)

Source Design Tokens (CSS custom properties)

:root {
  --card-y: 42px;
  --frame-img: var(--story-image-1);
  --body-bg: #050505;
}

Do's and Don'ts

Do

• Do reserve the accent #D8C2FF for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #050505; surfaces should stay within the detected neutral ramp.
• Do set large headings in "Playfair Display", serif with tight tracking (-.08em), and body copy in the primary stack.
• Do stick to the detected font weight(s): 400, 500, 600, 700, 800, 900.
• Do align spacing to the 4px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #050505;
  --color-primary: #D8C2FF;
  --color-accent: #D8C2FF;
  --color-surface: #EFFBFF;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #BFEEFF;
  --color-border: #EFFBFF;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #000000;
  --font-sans: 'Playfair Display';
  --font-size-display: 105.6px;
  --font-size-headline-lg: 36px;
  --font-size-headline-md: 30px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-md: 8px;
  --radius-lg: 36px;
  --radius-pill: 9999px;
  --shadow-sm: 0 24px 90px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.16);
  --shadow-md: 0 28px 90px rgba(0,0,0,.46);
  --shadow-lg: 0 24px 100px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.16);
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 56px;
  --font-display: "Playfair Display", serif;
  --tracking-display: -.08em;
  --tracking-label: .24em;
  --container-max: 900px;
}