Home | Global Watch Company

Design Specification — Home | Global Watch Company

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#121212), a vivid accent (#DAFFC2). All type is set in Poppins. Detected font weights: 100, 200, 300, 400, 500, 600, 700, 800, 900. Detected style signatures: technical / mono accents.

Logo asset(s): https://globalwatchco.com/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Fs.mkswft.com%2FRmlsZTo1M2RhNTFlOC1jNjFhLTQ3MjItYjI5YS1hMjJlNDhjOTFlMGU%3D%2FGWC_Logo_Blue_Horizontal.png&w=3840&q=75 · https://storage.googleapis.com/s.mkswft.com/RmlsZTo2NWI4NDc5Ni00MjBmLTRmMTMtOWExNC03MDQ1OWVlMTY2YjQ=/GWC_Logo_Blue_Horizontal_Mobile.svg

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

> 3 gradient definitions were detected but all were framework utility templates (unresolvable custom-property stops), so no concrete gradients could be extracted.

Typography

Primary typeface: Poppins — stack: Poppins

Font stacks (most used first)

• Poppins
• var(--font-family-body)
• classico-urw,sans-serif
• var(--font-family-heading)
• Inter
• "classico-urw"
• Roboto Mono
• "helvetica-lt-pro"
• var(--font-family-mono)
• inherit

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 200, 300, 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 0 rgba(0,0,0,0),0 0 rgba(0,0,0,0)
• 0 0 rgba(0,0,0,0)
• 0 0 0 1px rgb(/10%),0 3px 0 rgb(/10%)
• 0 0 rgba(0,0,0,0),0 0 rgba(0,0,0,0),0 25px 50px -12px rgba(0,0,0,.25)
• 0 0 rgba(0,0,0,0),0 0 rgba(0,0,0,0),0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)

Layout

Container max-width: 1024px

Grid columns (largest detected grid): 12

Breakpoints

• 640px
• 768px
• 1024px
• 1280px
• 1281px

Animation & Motion

Transitions

• -webkit-transform 750ms cubic-bezier(0.16, 0.84, 0.44, 1) 0ms,filter 750ms cubic-bezier(0.16, 0.84, 0.44, 1) 0ms,opacity 750ms ease 0ms
• transform 750ms cubic-bezier(0.16, 0.84, 0.44, 1) 0ms,filter 750ms cubic-bezier(0.16, 0.84, 0.44, 1) 0ms,opacity 750ms ease 0ms
• all 0ms

Easing curves

• cubic-bezier(.4,0,.6,1)
• cubic-bezier(.4,0,.2,1)
• cubic-bezier(0,0,.2,1)
• cubic-bezier(.4,0,.2,1)
• cubic-bezier(0,0,.2,1)
• cubic-bezier(.4,0,1,1)
• var(--ease-in)
• var(--ease-in-out)

Keyframes

@keyframes fadeIn { 0%{opacity:0}to{opacity:1} }
@keyframes spin { to{-webkit-transform:rotate(1turn);transform:rotate(1turn)} }
@keyframes enter { 0%{opacity:1;opacity:var(--tw-enter-opacity,1);-webkit-transform:translateZ(0) scaleX(1) rotate(0);transform:translateZ(0) scaleX(1) rotate(0);-webkit-transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0));transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw- }
@keyframes exit { to{opacity:1;opacity:var(--tw-exit-opacity,1);-webkit-transform:translateZ(0) scaleX(1) rotate(0);transform:translateZ(0) scaleX(1) rotate(0);-webkit-transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0));transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale, }
@keyframes shimmer { to{content:var(--tw-content);-webkit-transform:translateX(100%);transform:translateX(100%)} }
@keyframes pulse { 50%{opacity:.5} }
@keyframes collapse { 0%{height:var(--radix-accordion-content-height)}to{height:0} }
@keyframes expand { 0%{height:0}to{height:var(--radix-accordion-content-height)} }
@keyframes fade-in { 0%{opacity:0}to{opacity:1} }
@keyframes slide-in-top { 0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0);transform:translateY(0)} }

Animations

• fade-in .9s ease-out forwards
• pulse 2s cubic-bezier(.4,0,.6,1) infinite
• slide-in-top .5s ease-out forwards
• spin 1s linear infinite
• shimmer 1.5s infinite

Components

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

button-secondary — sample text: “Subscribe”

button-primary — sample text: “Discover”

badge

CTA labels found on page

• Subscribe
• Discover

Source Design Tokens (CSS custom properties)

:root {
  --primary: 96 100% 68%;
  --accent: 96 100% 88%;
  --background: 0 0% 100%;
  --foreground: 0 0% 7%;
  --success: 116 78% 65%;
  --error: 0 100% 60%;
  --warning: 40 100% 60%;
  --info: 220 70% 45%;
  --contrast-100: 0 0% 93%;
  --contrast-200: 0 0% 82%;
  --contrast-300: 0 0% 70%;
  --contrast-400: 0 0% 54%;
  --contrast-500: 0 0% 34%;
  --font-variation-settings-body: "slnt" 0;
  --font-variation-settings-heading: "slnt" 0;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-base: 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);
  --footer-logo-width: 230px;
  --ink-regular: #000;
  --ink-brand: #122353;
  --ink-silver: #999EA1;
  --ink-plat: #E6E6E6;
  --ink-rose: #BFA5AE;
  --footer-bg: hsl(var(--background));
  --footer-focus: hsl(var(--primary));
  --dur-100: 100ms;
  --dur-400: 400ms;
  --select-light-item-text: black;
  --ease-in: cubic-bezier(0.4,0,1,1);
  --ease-in-out: cubic-bezier(0.4,0,0.2,1);
  --ease-out: cubic-bezier(0,0,0.2,1);
  --faq-hero-bg: #4b4b4b;
  --carousel-light-button: #ff00ff;
  --carousel-dark-button: #ff00ff;
  --carousel-focus: #ff00ff;
  --carousel-light-scrollbar: #ff00ff;
  --select-light-icon: var(--ink-rose);
  --select-light-trigger-border: var(--ink-silver);
  --breadcrumbs-hover: var(--ink-rose);
  --animated-underline-font-family: var(--font-family-poppins);
  --breadcrumbs-secondary-text: var(--ink-silver);
  --font-family-inter: "Inter","Inter Fallback";
  --font-family-dm-serif-text: "DM Serif Text","DM Serif Text Fallback";
  --font-family-poppins: "Poppins","Poppins Fallback";
  --font-family-roboto-mono: "Roboto Mono","Roboto Mono Fallback";
  --primary-mix-white-75: 98.2 100% 93%;
  --primary-mix-black-75: 97.24, 74.36%, 7.65%;
  --font-family-heading: Poppins;
  --font-family-body: var(--font-family-inter);
  --font-family-accent: var(--font-family-roboto-mono);
  --banner-background: rgb(191, 165, 174);
}

Do's and Don'ts

Do

• Do reserve the accent #DAFFC2 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): 100, 200, 300, 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.
• Don't add gradients — the source page uses flat fills exclusively.

Design Tokens (copy-paste)

:root {
  --color-background: #FFFFFF;
  --color-text-primary: #121212;
  --color-primary: #9DFF5C;
  --color-accent: #DAFFC2;
  --color-surface: #EBEBEB;
  --color-secondary: #000000;
  --color-text-secondary: #BFA5AE;
  --color-border: #999EA1;
  --color-on-primary: #121212;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #121212;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F7F7F7;
  --color-surface-container: #EDEDED;
  --color-surface-container-high: #EBEBEB;
  --color-surface-container-highest: #E5E7EB;
  --font-sans: Poppins;
  --font-size-display: 64px;
  --font-size-headline-lg: 36px;
  --font-size-headline-md: 30px;
  --font-size-title-lg: 20.6px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14.4px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
  --shadow-sm: 0 0 rgba(0,0,0,0),0 0 rgba(0,0,0,0);
  --shadow-md: 0 0 0 1px rgb(/10%),0 3px 0 rgb(/10%);
  --shadow-lg: 0 0 rgba(0,0,0,0),0 0 rgba(0,0,0,0),0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  --space-xs: 2.2857136px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --tracking-display: -0.01em;
  --tracking-label: 0.2em;
  --container-max: 1024px;
}