Remixes of haberdashmen.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Haberdashmen
description: |
This design system embodies a premium sports betting platform aesthetic with a
distinctly nocturnal, high-contrast personality. The visual language combines
deep navy and slate backgrounds with bright accent colors to create an
energetic yet professional environment. The color palette emphasizes
legibility in low-light conditions while maintaining a sophisticated,
trustworthy tone through restrained neutral typography. The system uses
minimal shadows, relying instead on strategic color-blocking and fine borders
to establish hierarchy and depth. This approach creates a clean, modern
interface optimized for rapid information consumption and confident
decision-making—essential for sports betting interfaces. The brand identity is
reinforced through consistent use of vibrant greens and occasional golden
accents that punctuate the cool foundation.
source:
url: "https://haberdashmen.com/"
pagesAnalyzed: 1
extractedAt: 2026-10-30
tokensMeasured: true
colors:
primary: "#94A3B8"
link: "#3B82F6"
canvas: "#0F1628"
surface: "#1E293B"
surface-alt: "#141D35"
ink: "#FFFFFF"
body: "#94A3B8"
hairline: "#334155"
accent-1: "#FACC15"
accent-2: "#22C55E"
typography:
display:
fontFamily: system-ui
fontSize: 44px
fontWeight: 800
lineHeight: 1.15
letterSpacing: 0px
heading-xl:
fontFamily: system-ui
fontSize: 32px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
heading-lg:
fontFamily: system-ui
fontSize: 22.4px
fontWeight: 700
lineHeight: 1.75
letterSpacing: 0px
heading-md:
fontFamily: system-ui
fontSize: 20px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 0px
heading-sm:
fontFamily: system-ui
fontSize: 17.6px
fontWeight: 700
lineHeight: 1.75
letterSpacing: 0px
heading-xs:
fontFamily: system-ui
fontSize: 16px
fontWeight: 600
lineHeight: 1.75
letterSpacing: 0px
body-xl:
fontFamily: system-ui
fontSize: 20.8px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 0px
body-lg:
fontFamily: system-ui
fontSize: 20px
fontWeight: 800
lineHeight: 1.3
letterSpacing: 0px
body-md:
fontFamily: system-ui
fontSize: 14.4px
fontWeight: 400
lineHeight: 1.75
letterSpacing: 0px
body-sm:
fontFamily: system-ui
fontSize: 13.6px
fontWeight: 400
lineHeight: 1.65
letterSpacing: 0px
body-sm-strong:
fontFamily: system-ui
fontSize: 13.6px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 0.54px
textTransform: uppercase
body-xs:
fontFamily: system-ui
fontSize: 12.8px
fontWeight: 400
lineHeight: 1.75
letterSpacing: 0px
nav:
fontFamily: system-ui
fontSize: 14px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
label:
fontFamily: system-ui
fontSize: 12.8px
fontWeight: 600
lineHeight: 1.75
letterSpacing: 0px
caption-sm:
fontFamily: system-ui
fontSize: 12px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
caption-sm-strong:
fontFamily: system-ui
fontSize: 12px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 1.2px
textTransform: uppercase
caption-xs:
fontFamily: system-ui
fontSize: 11.2px
fontWeight: 600
lineHeight: 1.6
letterSpacing: 0.9px
rounded:
none: 0px
xs: 6px
sm: 8px
md: 12px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 40px
borderWidths:
thin: 1px
elevationStrategy: color-blocking
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FAFAFC"
surface: "#F0F0F2"
surfaceRaised: "#E9E9EA"
text: "#181819"
textMuted: "#6D6D6E"
border: "#D7D7D9"
accent: "#5C6F8A"
accentFg: "#FFFFFF"
focusRing: "#7B8EA8"
elevation: shadow
dark:
bg: "#0F1628"
surface: "#1E293B"
surfaceRaised: "#303A4B"
text: "#FFFFFF"
textMuted: "#94A3B8"
border: "#334155"
accent: "#94A3B8"
accentFg: "#0B0B0C"
focusRing: "#94A3B8"
elevation: "border+surface"
gradients:
- context: hero
kind: linear
value: "linear-gradient(rgb(15, 22, 40) 0%, rgb(20, 29, 53) 100%)"
components:
button-filled:
typography: "{typography.body-sm-strong}"
textColor: "{colors.ink}"
height: 45.75px
padding: "12px 32px 12px 32px"
rounded: "{rounded.sm}"
backgroundColor: "{colors.accent-2}"
card:
textColor: "{colors.body}"
border: "1px solid {colors.hairline}"
padding: "24px 24px 24px 24px"
fontSize: 16px
fontFamily: system-ui
fontWeight: 400
lineHeight: 1.6
rounded: "{rounded.md}"
backgroundColor: "{colors.surface}"
card-sm:
textColor: "{colors.body}"
fontSize: 12.8px
fontFamily: system-ui
fontWeight: 400
lineHeight: 1.6
badge-filled:
typography: "{typography.caption-xs}"
textColor: "{colors.body}"
border: "1px solid {colors.hairline}"
height: 31.1094px
padding: "5.6px 16px 5.6px 16px"
rounded: 999px
backgroundColor: "{colors.surface}"
navigation:
typography: "{typography.nav}"
textColor: "{colors.body}"
height: 22.3906px
footer:
textColor: "{colors.body}"
padding: "32px 0px 32px 0px"
fontSize: 16px
fontFamily: system-ui
fontWeight: 400
lineHeight: 1.6
link:
typography: "{typography.body-md}"
textColor: "{colors.link}"
link-2:
textColor: "{colors.ink}"
fontSize: 14px
fontFamily: system-ui
fontWeight: 700
lineHeight: 1.6
states:
link-hover:
target: link
state: hover
textDecoration: underline
other-hover:
target: other
state: hover
backgroundColor: "rgba(255, 255, 255, 0.02)"
breakpoints:
- width: 375
containerWidth: 375
gridColumns: 4
navLinksVisible: 0
menuToggleVisible: true
headingPx: 28
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 768
gridColumns: 8
navLinksVisible: 0
menuToggleVisible: true
headingPx: 35
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 960
gridColumns: 3
navLinksVisible: 5
menuToggleVisible: false
headingPx: 44
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 960
gridColumns: 3
navLinksVisible: 5
menuToggleVisible: false
headingPx: 44
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 960
gridColumns: 3
navLinksVisible: 5
menuToggleVisible: false
headingPx: 44
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 3
gradientsFound: 1
rolesUnassigned: 2
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
tokens:
colors:
primary: "#94A3B8"
link: "#3B82F6"
accent-1: "#FACC15"
accent-2: "#22C55E"
canvas: "#0F1628"
surface: "#1E293B"
surface-alt: "#141D35"
ink: "#FFFFFF"
hairline: "#334155"
typography:
display:
size: 44px
weight: 800
lineHeight: 1.15
letterSpacing: 0px
heading-lg:
size: 22.4px
weight: 700
lineHeight: 1.75
letterSpacing: 0px
heading-sm:
size: 17.6px
weight: 700
lineHeight: 1.75
letterSpacing: 0px
heading-xs:
size: 16px
weight: 600
lineHeight: 1.75
letterSpacing: 0px
heading-xl:
size: 32px
weight: 400
lineHeight: 1.6
letterSpacing: 0px
heading-md:
size: 20px
weight: 700
lineHeight: 1.6
letterSpacing: 0px
body-md:
size: 14.4px
weight: 400
lineHeight: 1.75
letterSpacing: 0px
body-lg:
size: 20px
weight: 800
lineHeight: 1.3
letterSpacing: 0px
body-xl:
size: 20.8px
weight: 700
lineHeight: 1.6
letterSpacing: 0px
body-sm:
size: 13.6px
weight: 400
lineHeight: 1.65
letterSpacing: 0px
body-sm-strong:
size: 13.6px
weight: 700
lineHeight: 1.6
letterSpacing: 0.54px
textTransform: uppercase
body-xs:
size: 12.8px
weight: 400
lineHeight: 1.75
letterSpacing: 0px
nav:
size: 14px
weight: 400
lineHeight: 1.6
letterSpacing: 0px
label:
size: 12.8px
weight: 600
lineHeight: 1.75
letterSpacing: 0px
caption-sm:
size: 12px
weight: 400
lineHeight: 1.6
letterSpacing: 0px
caption-sm-strong:
size: 12px
weight: 700
lineHeight: 1.6
letterSpacing: 1.2px
textTransform: uppercase
caption-xs:
size: 11.2px
weight: 600
lineHeight: 1.6
letterSpacing: 0.9px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 40px
rounded:
none: 0px
xs: 6px
sm: 8px
md: 12px
full: 9999px
shadows: {}
borders:
thin: 1px
This design system embodies a premium sports betting platform aesthetic with a distinctly nocturnal, high-contrast personality. The visual language combines deep navy and slate backgrounds with bright accent colors to create an energetic yet professional environment. The color palette emphasizes legibility in low-light conditions while maintaining a sophisticated, trustworthy tone through restrained neutral typography. The system uses minimal shadows, relying instead on strategic color-blocking and fine borders to establish hierarchy and depth. This approach creates a clean, modern interface optimized for rapid information consumption and confident decision-making—essential for sports betting interfaces. The brand identity is reinforced through consistent use of vibrant greens and occasional golden accents that punctuate the cool foundation.
Key Characteristics
{colors.canvas} — #0F1628) and layered slate surfaces{colors.accent-2} — #22C55E for primary CTAs) against neutral grounds{colors.hairline} — #334155){colors.primary} — #94A3B8): Primary CTA fills, body copy on dark backgrounds, active states, and neutral-text roles. Used as the workhorse color throughout the interface for balance.{colors.link} — #3B82F6): Inline hyperlinks and secondary interactive elements. Provides web-standard link affordance without overwhelming the dark palette.{colors.accent-2} — #22C55E): Primary call-to-action buttons (PLAY buttons throughout cards), badges, and high-priority interactive elements. Signals action and encourages engagement.{colors.accent-1} — #FACC15): Decorative and supplementary accents; no measured role in primary interface. Used sparingly for visual interest and brand personality.{colors.canvas} — #0F1628): Default page background. Sets the nocturnal tone and provides the deepest, most recessive surface.{colors.surface} — #1E293B): Primary card and panel background. Elevated from canvas but maintains dark aesthetic; used for all content containers.{colors.surface-alt} — #141D35): Alternating section bands and secondary surfaces. Provides subtle visual separation without high contrast.{colors.ink} — #FFFFFF): Headings, strong labels, and high-priority text. Maximum contrast against dark backgrounds.{colors.primary} — #94A3B8): Body copy, supporting text, and lower-priority information. Maintains readability while reducing visual weight.{colors.hairline} — #334155): 1px card borders, dividers, and structural lines. Creates definition without harshness.Primary font stack: system-ui, fallback to -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif. The system uses native system fonts for optimal performance and familiarity across platforms. No secondary font family is deployed; the design relies on weight and size variation for hierarchy.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | system-ui | 44px | 800 | 1.15 | 0px | Page hero and primary H1; maximum visual impact. |
| Heading XL | system-ui | 32px | 400 | 1.6 | 0px | Section introductions and major divisions. |
| Heading Large | system-ui | 22.4px | 700 | 1.75 | 0px | Primary section headings (H2). |
| Heading Medium | system-ui | 20px | 700 | 1.6 | 0px | Card titles and subsection headings. |
| Heading Small | system-ui | 17.6px | 700 | 1.75 | 0px | Tertiary headings (H3). |
| Heading XS | system-ui | 16px | 600 | 1.75 | 0px | Small section labels (H4). |
| Body Large | system-ui | 20px | 800 | 1.3 | 0px | Emphasized body content or numeric displays. |
| Body XL | system-ui | 20.8px | 700 | 1.6 | 0px | Prominent information blocks (win percentages, amounts). |
| Body Medium | system-ui | 14.4px | 400 | 1.75 | 0px | Default body paragraph text. |
| Body Small | system-ui | 13.6px | 400 | 1.65 | 0px | Supporting text and secondary information. |
| Body XS | system-ui | 12.8px | 400 | 1.75 | 0px | Tertiary copy and fine print. |
| Button / Label Strong | system-ui | 13.6px | 700 | 1.6 | 0.54px | Primary button text; uppercase with tracking. |
| Navigation | system-ui | 14px | 400 | 1.6 | 0px | Nav links and menu items. |
| Label | system-ui | 12.8px | 600 | 1.75 | 0px | Table headers and form labels. |
| Caption Small | system-ui | 12px | 400 | 1.6 | 0px | Figure captions and annotations. |
| Caption Small Strong | system-ui | 12px | 700 | 1.6 | 1.2px | Emphasized captions; uppercase with tracking. |
| Caption XS | system-ui | 11.2px | 600 | 1.6 | 0.9px | Minimal labels and supplementary micro-text. |
{typography.body-lg} — 20px, 800; {typography.body-xl} — 20.8px, 700) highlight betting amounts and win percentages for quick scanning.{colors.accent-2} (#22C55E){colors.ink} (#FFFFFF){spacing.sm} {spacing.xxl} — 12px 32px{typography.body-sm-strong} — 13.6px{rounded.sm} — 8px{colors.surface} (#1E293B){colors.primary} (#94A3B8){spacing.xl} — 24px1px solid {colors.hairline} (#334155){rounded.md} — 12pxrgba(0, 0, 0, 0)){colors.primary} (#94A3B8){rounded.none} — 0px{colors.surface} (#1E293B){colors.primary} (#94A3B8){spacing.md} — 5.6px 16px{typography.caption-xs} — 11.2px1px solid {colors.hairline} (#334155){rounded.full} — 9999px (pill-shaped)rgba(0, 0, 0, 0)){colors.primary} (#94A3B8){typography.nav} — 14px{rounded.none} — 0px{colors.ink} (#FFFFFF)rgba(0, 0, 0, 0)){colors.ink} (#FFFFFF){rounded.none} — 0pxtext-decoration: underline)rgba(0, 0, 0, 0)){colors.link} (#3B82F6){typography.body-md} — 14.4px{rounded.none} — 0pxtext-decoration: underlinergba(0, 0, 0, 0)){colors.primary} (#94A3B8){spacing.xxl} 0 — 32px 0px{rounded.none} — 0pxThe spacing scale is built on a 4px base unit, doubling in most steps to create predictable, scalable rhythm:
{spacing.xxs} — 4px: Micro-adjustments and close pairings{spacing.xs} — 8px: Tight component grouping{spacing.sm} — 12px: Button padding (vertical), badge padding{spacing.md} — 16px: Card content padding (horizontal), standard gap{spacing.lg} — 20px: Heading margin, section separation{spacing.xl} — 24px: Card interior padding (comprehensive){spacing.xxl} — 32px: Footer padding, major section breaks{spacing.xxxl} — 40px: Hero and page-level spacingUsage Context: Card padding uses {spacing.xl} for comfortable breathing room; button padding uses {spacing.sm} vertically and {spacing.xxl} horizontally for a balanced, clickable target. Section breaks default to {spacing.lg} to {spacing.xxl}.
linear-gradient(rgb(15, 22, 40) 0%, rgb(20, 29, 53) 100%) background gradient; card sections use uniform {spacing.xxxl} padding on each side to maintain rhythm.The design prioritizes substantial whitespace to reduce cognitive load in a high-information environment. Card spacing follows the {spacing.xl} (24px) internal padding standard, while section separation defaults to {spacing.xxl} (32px) minimum. The dark background allows negative space to recede, making content appear to float—this reduces visual claustrophobia on screens with many betting options.
{rounded.none} — 0px: Links, navigation, footer, and transparent elements (sharp, neutral){rounded.xs} — 6px: Images and avatar borders (subtle rounding, organic feel){rounded.sm} — 8px: Primary button corners (modern, approachable, prominent){rounded.md} — 12px: Card containers (balanced, significant but not extreme){rounded.full} — 9999px: Badges and pills (fully rounded, badge semantics; avatar profiles){colors.hairline} — #334155), badge borders, and structural dividers. Creates clean definition without visual weight.The system employs color-blocking as its primary depth strategy: no multi-layer shadows are used. Depth emerges from shifts in surface color rather than shadow treatments.
| Level | Treatment | Use |
|---|---|---|
| Base / Canvas | {colors.canvas} (#0F1628) | Page background; deepest recessive layer. |
| Surface | {colors.surface} (#1E293B) | Card, panel, and container backgrounds; elevated from canvas. |
| Surface Alt | {colors.surface-alt} (#141D35) | Alternating section bands and secondary surfaces; subtle mid-tone. |
| Interactive | {colors.accent-2} (#22C55E) or {colors.link} (#3B82F6) | Buttons and links; advance through color, not shadow. |
Elevation Philosophy: The design rejects layered shadows in favor of color shifts across a cool slate palette. This approach maintains performance, reduces visual noise, and creates a modern, flat aesthetic. The slight color variations between canvas, surface alt, and surface create enough perceptual separation for scanning. Interactive elements advance through saturation and hue (bright green, electric blue) rather than through shadow depth.
No opacity ramp was measured in the extraction. The only opacity-bearing elements observed are backgrounds set to fully transparent (rgba(0, 0, 0, 0)). A hover state on generic elements uses rgba(255, 255, 255, 0.02) (2% white overlay) for subtle affordance; full opacity values for interactive elements are measured above.
No z-index scale was extracted from the site's stylesheets. Stacking order likely follows standard document flow (nav over content, modals over page) but specific numeric z-indices are not available. See Known Gaps.
{colors.accent-2} (#22C55E) for all primary call-to-action buttons (PLAY, submit, confirm). It signals action in a way that stands out against the dark palette.{spacing.xl} (24px) internal padding on all cards for consistent breathing room.text-decoration: underline on link hover to signal interactivity without changing color unpredictably.{typography.body-lg} or {typography.body-xl} for numeric displays (win percentages, betting amounts) to emphasize critical information.{colors.surface} — #1E293B) inside the page canvas ({colors.canvas} — #0F1628) to create natural hierarchical separation.{colors.canvas} without sufficient contrast; always layer content inside a surface ({colors.surface} or {colors.surface-alt}).{colors.accent-1} and {colors.accent-2}; stick to the measured palette.0.54px) and captions (0.9px, 1.2px) where emphasis is intentional.| Viewport (px) | Content Width | Grid Columns | Nav Links Visible | Menu Toggle | Display Size | Body Size | Section Padding |
|---|---|---|---|---|---|---|---|
| 375 | 375 | 4 | 0 | Yes | 28px | 16px | 0px |
| 768 | 768 | 8 | 0 | Yes | 35px | 16px | 0px |
| 1024 | 960 | 3 | 5 | No | 44px | 16px | 0px |
| 1280 | 960 | 3 | 5 | No | 44px | 16px | 0px |
| 1440 | 960 | 3 | 5 | No | 44px | 16px | 0px |
Key Transitions:
{spacing.md} (16px) provides comfortable separation in card layouts.{colors.accent-2} — #22C55E){colors.link} — #3B82F6){colors.canvas} — #0F1628){colors.surface} — #1E293B){colors.ink} — #FFFFFF){colors.primary} — #94A3B8){colors.hairline} — #334155){colors.accent-1} — #FACC15) and alternate surface ({colors.surface-alt} — #141D35){colors.accent-2} (#22C55E) background, {colors.ink} (#FFFFFF) text, rounded to {rounded.sm} (8px), with padding {spacing.sm} × {spacing.xxl} (12px 32px).{colors.surface} (#1E293B) with 24px interior padding, a 1px {colors.hairline} border, and {rounded.md} (12px) corners. Text defaults to {colors.primary} (#94A3B8) at {typography.body-md} (14.4px).{typography.display} — 44px, 800 weight) in {colors.ink} (#FFFFFF) on hero or prominent sections; they set the page tone.{typography.heading-lg} — 22.4px, 700 weight) also use {colors.ink} for hierarchy.{colors.link} (#3B82F6), no border radius, 0px padding, and underline on hover.{typography.body-xl} (20.8px, 700 weight) to command attention within card layouts.{colors.canvas} (#0F1628); nested containers lift to {colors.surface} or {colors.surface-alt}.{spacing.xl} (24px) inside containers and {spacing.xxl} (32px) between major sections.{colors.accent-1} — #FACC15 gold, {colors.accent-2} green before its use in buttons): They are described as decorative; their precise intended purpose beyond button fills and accents is not declared.{colors.ink}) and one generic hover (2% white overlay). Interactive state coverage is incomplete; component interaction design beyond these two examples is not documented.rgba(0, 0, 0, 0)) and fully opaque elements are measured.