Huxley | Home

Design Specification — Huxley | Home

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#FF0000). All type is set in NB Architekt Light,sans-serif. Detected font weights: 300, 400. Detected style signatures: gradient-rich / aurora.

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.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(#000,#000,transparent)
• linear-gradient(0deg,transparent,rgba(0,0,0,.48) 90%)
• linear-gradient(to bottom,transparent,#000)
• linear-gradient(#fff,#fff),linear-gradient(#fff,#fff)
• conic-gradient(#000 0 25%, 0 50%)
• conic-gradient(transparent 0 25%,hsla(0,0%,100%,0) 0 50%)

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

Typography

Primary typeface: NB Architekt Light — stack: NB Architekt Light,sans-serif

Font stacks (most used first)

• NB Architekt Light,sans-serif
• NB Architekt Regular,sans-serif
• NB Architekt Light
• NB Architekt Regular

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Shadows

• inset 0 0 0 1000px transparent
• inset 0 1px 0

Layout

Container max-width: 949px

Grid columns (largest detected grid): 9

Breakpoints

• 949px
• 950px
• 1680px

Animation & Motion

Transitions

• padding-right
• opacity
• transform
• opacity steps(3)
• clip-path 10ms
• transform .2s steps(3)
• background-color 9999s ease-in-out 0s
• transform
• none
• opacity .4s ease-out
• width steps(3),background-color
• height steps(3),background-color

Easing curves

• steps(3)
• cubic-bezier(.4,0,.2,1)
• cubic-bezier(.47,0,.745,.715)
• cubic-bezier(.39,.575,.565,1)
• cubic-bezier(.445,.05,.55,.95)
• cubic-bezier(.55,.085,.68,.53)
• cubic-bezier(.25,.46,.45,.94)
• cubic-bezier(.455,.03,.515,.955)

Keyframes

@keyframes blink-46cae32c { 0%{opacity:1}8.3333333333%{opacity:0}16.6666666667%{opacity:1}25%{opacity:0}33.3333333333%{opacity:1}41.6666666667%{opacity:0}50%{opacity:1}58.3333333333%{opacity:0}66.6666666667%{opacity:1}75%{opacity:0}83.3333333333%{opacity:1}91.6666666667%{opacity:0}to{opacity:1} }
@keyframes blink-13c796a0 { 0%{opacity:1}8.3333333333%{opacity:0}16.6666666667%{opacity:1}25%{opacity:0}33.3333333333%{opacity:1}41.6666666667%{opacity:0}50%{opacity:1}58.3333333333%{opacity:0}66.6666666667%{opacity:1}75%{opacity:0}83.3333333333%{opacity:1}91.6666666667%{opacity:0}to{opacity:1} }
@keyframes scroll-d50c44b4 { 0%{opacity:1;transform:translateY(0)}20%{transform:translateY(6px)}40%{opacity:0;transform:translateY(12px)}to{opacity:0;transform:translateY(12px)} }
@keyframes scrollIn-d50c44b4 { 0%{opacity:0;transform:translateY(-12px)}20%{opacity:1;transform:translateY(-6px)}40%{transform:translateY(0)}to{transform:translateY(0)} }
@keyframes blink-ee3e284c { 0%{opacity:1}8.3333333333%{opacity:0}16.6666666667%{opacity:1}25%{opacity:0}33.3333333333%{opacity:1}41.6666666667%{opacity:0}50%{opacity:1}58.3333333333%{opacity:0}66.6666666667%{opacity:1}75%{opacity:0}83.3333333333%{opacity:1}91.6666666667%{opacity:0}to{opacity:1} }
@keyframes blink-096735d2 { 0%{opacity:1}8.3333333333%{opacity:0}16.6666666667%{opacity:1}25%{opacity:0}33.3333333333%{opacity:1}41.6666666667%{opacity:0}50%{opacity:1}58.3333333333%{opacity:0}66.6666666667%{opacity:1}75%{opacity:0}83.3333333333%{opacity:1}91.6666666667%{opacity:0}to{opacity:1} }
@keyframes blink-957aad69 { 0%{opacity:1}8.3333333333%{opacity:0}16.6666666667%{opacity:1}25%{opacity:0}33.3333333333%{opacity:1}41.6666666667%{opacity:0}50%{opacity:1}58.3333333333%{opacity:0}66.6666666667%{opacity:1}75%{opacity:0}83.3333333333%{opacity:1}91.6666666667%{opacity:0}to{opacity:1} }
@keyframes blink-5eb20d15 { 0%{opacity:1}8.3333333333%{opacity:0}16.6666666667%{opacity:1}25%{opacity:0}33.3333333333%{opacity:1}41.6666666667%{opacity:0}50%{opacity:1}58.3333333333%{opacity:0}66.6666666667%{opacity:1}75%{opacity:0}83.3333333333%{opacity:1}91.6666666667%{opacity:0}to{opacity:1} }
@keyframes blink-2a59b454 { 0%{opacity:1}8.3333333333%{opacity:0}16.6666666667%{opacity:1}25%{opacity:0}33.3333333333%{opacity:1}41.6666666667%{opacity:0}50%{opacity:1}58.3333333333%{opacity:0}66.6666666667%{opacity:1}75%{opacity:0}83.3333333333%{opacity:1}91.6666666667%{opacity:0}to{opacity:1} }
@keyframes blink-bc5e17d8 { 0%{opacity:1}8.3333333333%{opacity:0}16.6666666667%{opacity:1}25%{opacity:0}33.3333333333%{opacity:1}41.6666666667%{opacity:0}50%{opacity:1}58.3333333333%{opacity:0}66.6666666667%{opacity:1}75%{opacity:0}83.3333333333%{opacity:1}91.6666666667%{opacity:0}to{opacity:1} }
@keyframes blink-fb04ef3f { 0%{opacity:1}4.1666666667%{opacity:0}8.3333333333%{opacity:1}12.5%{opacity:0}16.6666666667%{opacity:1}20.8333333333%{opacity:0}25%{opacity:1}29.1666666667%{opacity:0}33.3333333333%{opacity:1}37.5%{opacity:0}41.6666666667%{opacity:1}45.8333333333%{opacity:0}50%{opacity:1}54.1666666667%{opacity:0}58.3333333333%{opacity:1}62.5%{opacity:0}66.6666666667%{opacity:1}70.8333333333%{opacity:0}75%{opacity:1}79.1666666667%{opacity:0}83.3333333333%{opacity:1}87.5%{opacity:0}91.6666666667%{opacity:1}95.83333 }
@keyframes glyph-blink { 0%{filter:blur(2px);opacity:0;transform:scale(.9)}15%{opacity:1;transform:scale(1)}30%{filter:blur(0)}50%{opacity:1}90%{background-image:repeating-conic-gradient(var(--black) 0 25%,var(--white) 0 50%);background-size:2px 2px}to{background-image:repeating-conic-gradient(var(--black-0) 0 25%,var(--white-0) 0 50%);opacity:0} }
@keyframes char-blink { 0%{color:transparent}50%{color:transparent}80%{color:var(--black)}95%{color:var(--current-color)}to{color:var(--current-color)} }
@keyframes char-only-blink { 0%{color:transparent}20%{color:var(--current-color);opacity:1}40%{color:var(--current-color);opacity:.8}90%{color:var(--current-color);opacity:1}to{color:var(--current-color)} }
@keyframes mask-glitch-1 { 0%{clip-path:polygon(0 48%,100% 48%,100% 49%,0 49%);opacity:0}14%{clip-path:polygon(0 12%,100% 12%,100% 52%,0 52%);opacity:1}28%{clip-path:polygon(0 5%,100% 5%,100% 45%,0 45%)}42%{clip-path:polygon(0 67%,100% 67%,100% 97%,0 97%)}56%{clip-path:polygon(0 30%,100% 30%,100% 60%,0 60%)}70%{clip-path:polygon(0 55%,100% 55%,100% 80%,0 80%)}84%{clip-path:polygon(0 18%,100% 18%,100% 38%,0 38%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1} }

Animations

• blink-46cae32c .12s step-end forwards
• blink-13c796a0 .12s step-end forwards
• name alternate
• blink-ee3e284c .12s step-end forwards
• blink-096735d2 .12s step-end forwards
• blink-957aad69 .12s step-end forwards
• blink-5eb20d15 .12s step-end forwards
• blink-2a59b454 .12s step-end forwards
• blink-bc5e17d8 .12s step-end forwards
• blink .12s step-end forwards

CTA labels found on page

• VIEW THE ORACLE
• VIEW HUXLEY
• Discover More
• SHOP ALL

Effects

• backdrop-filter: blur(8px)
• backdrop-filter: blur()

> Page contains canvas/WebGL elements — consider ambient effects layers.

Source Design Tokens (CSS custom properties)

:root {
  --perc: 100%;
  --hud-tick-size: 8px;
  --white-0: hsla(0,0%,100%,0);
  --white-5: hsla(0,0%,100%,.05);
  --white-10: hsla(0,0%,100%,.1);
  --white-15: hsla(0,0%,100%,.15);
  --white-20: hsla(0,0%,100%,.2);
  --white-25: hsla(0,0%,100%,.25);
  --white-30: hsla(0,0%,100%,.3);
  --white-35: hsla(0,0%,100%,.35);
  --white-40: hsla(0,0%,100%,.4);
  --white-45: hsla(0,0%,100%,.45);
  --white-50: hsla(0,0%,100%,.5);
  --white-55: hsla(0,0%,100%,.55);
  --white-60: hsla(0,0%,100%,.6);
  --white-65: hsla(0,0%,100%,.65);
  --white-70: hsla(0,0%,100%,.7);
  --white-75: hsla(0,0%,100%,.75);
  --white-80: hsla(0,0%,100%,.8);
  --white-85: hsla(0,0%,100%,.85);
  --white-90: hsla(0,0%,100%,.9);
  --white-95: hsla(0,0%,100%,.95);
  --black: #000;
  --black-0: transparent;
  --black-5: rgb(0 0 0/5%);
  --black-10: rgba(0,0,0,.1);
  --black-15: rgba(0,0,0,.15);
  --black-20: rgba(0,0,0,.2);
  --black-25: rgba(0,0,0,.25);
  --black-30: rgba(0,0,0,.3);
  --black-35: rgba(0,0,0,.35);
  --black-40: rgba(0,0,0,.4);
  --black-45: rgba(0,0,0,.45);
  --black-50: rgba(0,0,0,.5);
  --black-55: rgba(0,0,0,.55);
  --black-60: rgba(0,0,0,.6);
  --black-65: rgba(0,0,0,.65);
  --black-70: rgba(0,0,0,.7);
  --black-75: rgba(0,0,0,.75);
  --black-80: rgba(0,0,0,.8);
  --black-85: rgba(0,0,0,.85);
  --black-90: rgba(0,0,0,.9);
  --black-95: rgba(0,0,0,.95);
  --red: red;
  --red-0: rgba(255,0,0,0);
  --red-5: rgb(255 0 0/5%);
  --red-10: rgba(255,0,0,.1);
  --red-15: rgba(255,0,0,.15);
  --red-20: rgba(255,0,0,.2);
  --red-25: rgba(255,0,0,.25);
  --red-30: rgba(255,0,0,.3);
  --red-35: rgba(255,0,0,.35);
  --red-40: rgba(255,0,0,.4);
  --red-45: rgba(255,0,0,.45);
  --red-50: rgba(255,0,0,.5);
  --red-55: rgba(255,0,0,.55);
  --red-60: rgba(255,0,0,.6);
  --red-65: rgba(255,0,0,.65);
  --red-70: rgba(255,0,0,.7);
  --red-75: rgba(255,0,0,.75);
}

Do's and Don'ts

Do

• Do reserve the accent #FF0000 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 300, 400.
• 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-primary: #9C0703;
  --color-accent: #FF0000;
  --color-background: #FFFFFF;
  --color-surface: #F2F2F2;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #999999;
  --color-border: #666666;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F2F2F2;
  --color-surface-container: #D9D9D9;
  --color-surface-container-high: #CCCCCC;
  --font-sans: NB Architekt Light,sans-serif;
  --font-size-title-lg: 20px;
  --font-size-label-sm: 12px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --tracking-label: 1.92px;
  --container-max: 949px;
}