FriedhatsOS

Design Specification — FriedhatsOS

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#020817), a vivid accent (#F1F5F9). All type is set in Handjet Variable. Detected font weights: 100, 400, 600, 700. Detected style signatures: technical / mono accents.

Logo asset(s): https://cdn.shopify.com/oxygen-v2/30330/23834/49449/4217598/assets/logo-Dw6-IS-9.jpg · https://cdn.shopify.com/oxygen-v2/30330/23834/49449/4217598/assets/character-border-2-C3YyQsRn.png

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)

Typography

Primary typeface: Handjet Variable — stack: Handjet Variable

Font stacks (most used first)

• Handjet Variable
• Ubuntu Mono
• Archivo Black
• monospace
• ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji
• ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
• inherit
• Ubuntu Mono,system-ui,monospace
• Ubuntu Mono,monospace
• Archivo Black,sans-serif

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 400, 600, 700

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 50px #0000004d
• 0 0 1px #ffffff80

Animation & Motion

Transitions

• transform .2s ease-in-out
• opacity .4s
• background-color .3s
• transform .3s

Easing curves

• cubic-bezier(.4,0,.2,1)
• cubic-bezier(.4,0,.2,1)
• var(--swiper-wrapper-transition-timing-function,initial)

Keyframes

@keyframes sticker-wiggle { 0%{transform:rotate(0)}4%{transform:rotate(-5deg)}8%{transform:rotate(5deg)}12%{transform:rotate(-3deg)}16%,to{transform:rotate(0)} }
@keyframes enter { 0%{opacity:var(--tw-enter-opacity,1);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))} }
@keyframes exit { to{opacity:var(--tw-exit-opacity,1);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))} }
@keyframes fall { 0%{transform:translateY(0)}to{transform:translateY(calc(120vh + 50px))} }
@keyframes swiper-preloader-spin { 0%{transform:rotate(0)}to{transform:rotate(360deg)} }

Components

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

button-secondary — sample text: “close”

button-primary — sample text: “Ethiopia Testi Keramo Peaberry Washed”

Source Design Tokens (CSS custom properties)

:root {
  --cart-aside-width: 640px;
  --menu-aside-width: 640px;
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: .5rem;
  --swiper-theme-color: #007aff;
  --swiper-navigation-size: 44px;
  --mobile-image: url(https://friedhats-cms.adamkramer.dev/media/HP-Hero-M-750x550-1.jpg);
  --desktop-image: url(https://friedhats-cms.adamkramer.dev/media/HP-Hero-D-1920x550.jpg);
}

Do's and Don'ts

Do

• Do reserve the accent #F1F5F9 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, 400, 600, 700.
• Do align spacing to the 8px 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-surface: #FFFFFF;
  --color-text-primary: #020817;
  --color-text-secondary: #64748B;
  --color-border: #E2E8F0;
  --color-primary: #0F172A;
  --color-secondary: #0F172A;
  --color-accent: #F1F5F9;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #020817;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #E5E7EB;
  --color-surface-container: #DDDDDD;
  --font-sans: Handjet Variable;
  --font-size-display: 60px;
  --font-size-headline-lg: 36px;
  --font-size-headline-md: 30px;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 9999px;
  --shadow-sm: 0 0 50px #0000004d;
  --shadow-md: 0 0 1px #ffffff80;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --tracking-label: .04em;
}