Remixes of fhfhockey.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: Fhfhockey
description: |
Five Hole Fantasy Hockey's design embodies a dark, high-contrast sports
analytics platform with a commanding tech-forward aesthetic. The visual
personality merges the intensity of competitive fantasy sports with clean,
data-focused interfaces. Deep charcoal canvases punctuated by electric cyan
accents create a sense of urgency and precision—perfect for real-time draft
decisions and player performance tracking. The system employs bold, uppercase
typography and angular design elements that evoke both technical
sophistication and athletic energy. Gradient overlays and layered depth
suggest information hierarchy without sacrificing clarity, while the
restrained use of warm accent colors (#FFC857) provides visual relief and
guides users through critical interactions. This is a system designed for
intense focus: every element serves the player's analytical mission.
source:
url: "https://fhfhockey.com/draft-dashboard"
pagesAnalyzed: 6
extractedAt: 2026-11-06
tokensMeasured: true
colors:
primary: "#14A2D2"
link: "#FFC857"
canvas: "#202020"
surface: "#131518"
ink: "#FFFFFF"
body: "#F4F8FB"
muted: "#D9E2EA"
faint: "#CCCCCC"
hairline: "#505050"
success: "#A7B4C0"
accent-1: "#B5C1CC"
accent-2: "#07AAE2"
accent-3: "#3B82F6"
accent-4: "#122A34"
accent-5: "#33414A"
accent-6: "#6F858D"
neutral-1: "#AAAAAA"
typography:
display-lg:
fontFamily: "Roboto Condensed"
fontSize: 52px
fontWeight: 700
lineHeight: 0.95
letterSpacing: 1.04px
textTransform: uppercase
display-md:
fontFamily: "Roboto Condensed"
fontSize: 48px
fontWeight: 300
lineHeight: 1.17
letterSpacing: 0px
display-sm:
fontFamily: "Roboto Condensed"
fontSize: 40.32px
fontWeight: 700
lineHeight: 1.15
letterSpacing: 0px
heading-xxl:
fontFamily: "Roboto Condensed"
fontSize: 28px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
heading-xl:
fontFamily: "Roboto Condensed"
fontSize: 26.4px
fontWeight: 700
lineHeight: 1.05
letterSpacing: 0px
heading-lg:
fontFamily: Roboto
fontSize: 24px
fontWeight: 700
letterSpacing: 0px
heading-md:
fontFamily: "Roboto Condensed"
fontSize: 21.6px
fontWeight: 700
letterSpacing: 0.86px
textTransform: uppercase
heading-sm:
fontFamily: Roboto
fontSize: 18.72px
fontWeight: 700
letterSpacing: 0px
heading-xs:
fontFamily: "Roboto Condensed"
fontSize: 11px
fontWeight: 700
lineHeight: 1.4
letterSpacing: 0px
body-xl:
fontFamily: Roboto
fontSize: 16.8px
fontWeight: 400
lineHeight: 1.55
letterSpacing: 0px
body-lg:
fontFamily: Roboto
fontSize: 16px
fontWeight: 400
letterSpacing: 0px
body-lg-strong:
fontFamily: Roboto
fontSize: 16px
fontWeight: 700
letterSpacing: 0px
body-md:
fontFamily: Roboto
fontSize: 14.4px
fontWeight: 400
letterSpacing: 0px
body-sm:
fontFamily: Roboto
fontSize: 14px
fontWeight: 400
lineHeight: 1.4
letterSpacing: 0px
body-xs:
fontFamily: Roboto
fontSize: 12.8px
fontWeight: 400
lineHeight: 1.7
letterSpacing: 0px
button-xl:
fontFamily: Roboto
fontSize: 18px
fontWeight: 500
lineHeight: 1.17
letterSpacing: 0px
button-lg:
fontFamily: "Roboto Condensed"
fontSize: 15px
fontWeight: 400
letterSpacing: 0px
textTransform: uppercase
button-md:
fontFamily: "Roboto Condensed"
fontSize: 14px
fontWeight: 400
letterSpacing: 0px
textTransform: uppercase
button-sm:
fontFamily: "Roboto Condensed"
fontSize: 11.52px
fontWeight: 500
lineHeight: 1
letterSpacing: 0px
button-xs:
fontFamily: "Roboto Condensed"
fontSize: 11px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
button-xs-strong:
fontFamily: "Roboto Condensed"
fontSize: 11px
fontWeight: 700
lineHeight: 1.4
letterSpacing: 0.22px
textTransform: uppercase
label-xl:
fontFamily: "Roboto Condensed"
fontSize: 14px
fontWeight: 400
lineHeight: 2.71
letterSpacing: 0px
label-xl-strong:
fontFamily: Roboto
fontSize: 14px
fontWeight: 600
letterSpacing: 0px
label-lg:
fontFamily: Arial
fontSize: 13.3333px
fontWeight: 400
letterSpacing: 0px
label-md:
fontFamily: Roboto
fontSize: 13px
fontWeight: 500
letterSpacing: 0px
label-sm:
fontFamily: "Roboto Condensed"
fontSize: 10.88px
fontWeight: 600
letterSpacing: 0.65px
textTransform: uppercase
label-xs:
fontFamily: "Roboto Condensed"
fontSize: 10.4px
fontWeight: 400
letterSpacing: 0.83px
textTransform: uppercase
caption-lg:
fontFamily: Roboto
fontSize: 12px
fontWeight: 400
letterSpacing: 0px
caption-lg-strong:
fontFamily: Roboto
fontSize: 12px
fontWeight: 700
letterSpacing: 0px
caption-md:
fontFamily: Roboto
fontSize: 11.2px
fontWeight: 700
letterSpacing: 0px
caption-sm:
fontFamily: Roboto
fontSize: 10.88px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
caption-sm-strong:
fontFamily: Roboto
fontSize: 10.88px
fontWeight: 600
lineHeight: 1.2
letterSpacing: 0px
caption-xs:
fontFamily: Roboto
fontSize: 10.56px
fontWeight: 400
letterSpacing: 0.26px
code-xl:
fontFamily: ui-monospace
fontSize: 12px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0.96px
textTransform: uppercase
code-lg:
fontFamily: "Martian Mono"
fontSize: 11.52px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0px
code-lg-strong:
fontFamily: "Martian Mono"
fontSize: 11.52px
fontWeight: 500
lineHeight: 1.3
letterSpacing: 0px
code-md:
fontFamily: "Martian Mono"
fontSize: 11.36px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0px
code-sm:
fontFamily: "Martian Mono"
fontSize: 10.88px
fontWeight: 400
letterSpacing: 0px
code-xs:
fontFamily: "Martian Mono"
fontSize: 9.92px
fontWeight: 500
letterSpacing: 0.99px
textTransform: uppercase
rounded:
none: 0px
xs: 4px
sm: 6px
md: 7px
lg: 8px
xl: 10px
xxl: 12px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 36px
band: 48px
borderWidths:
thin: 1px
medium: 2px
thick: 3px
elevationStrategy: color-blocking
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#F8FCFE"
surface: "#EEF2F4"
surfaceRaised: "#E7EAEC"
text: "#11181B"
textMuted: "#686E6F"
border: "#D5D9DA"
accent: "#0F779A"
accentFg: "#FFFFFF"
focusRing: "#1294BF"
elevation: shadow
dark:
bg: "#202020"
surface: "#131518"
surfaceRaised: "#26282A"
text: "#FFFFFF"
textMuted: "#F4F8FB"
border: "#505050"
accent: "#14A2D2"
accentFg: "#0B0B0C"
focusRing: "#14A2D2"
elevation: "border+surface"
gradients:
- context: hero
kind: radial
value: "radial-gradient(at 50% 12%, rgba(6, 136, 181, 0.043), rgba(0, 0, 0, 0) 48%), none"
- context: hero
kind: mixed
value: "radial-gradient(at 16% 78%, rgba(20, 162, 210, 0.16), rgba(0, 0, 0, 0) 34%), radial-gradient(at 58% 72%, rgba(6, 136, 181, 0.12), rgba(0, 0, 0, 0) 48%), linear-gradient(105deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0.16)), none"
- context: section
kind: linear
value: "linear-gradient(rgba(255, 255, 255, 0.024), rgba(255, 255, 255, 0)), linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)), none"
- context: section
kind: linear
value: "linear-gradient(rgb(32, 32, 32) 0px, rgb(32, 32, 32) 3%, rgb(64, 64, 64) 3%, rgb(64, 64, 64) 8%, rgb(7, 170, 226) 8%, rgb(7, 170, 226) 65%, rgb(255, 255, 255) 65%, rgb(255, 255, 255) 70%, rgb(64, 64, 64) 70%, rgb(64, 64, 64) 75%, rgb(32, 32, 32) 75%, rgb(32, 32, 32) 80%, rgb(255, 255, 255) 80%, rgb(255, 255, 255) 100%)"
- context: hero
kind: linear
value: "linear-gradient(rgb(19, 21, 24) 0px, rgb(26, 29, 33) 100%)"
components:
button-outline:
textColor: "{colors.muted}"
border: "1px solid color(srgb 1 0.623529 0.262745 / 0.45)"
height: 26.0938px
padding: "2px 4px 2px 4px"
fontSize: 12px
fontFamily: "Roboto Condensed"
fontWeight: 400
lineHeight: 1.1
rounded: "4px 4px 0px 0px"
backgroundColor: "color(srgb 1 0.623529 0.262745 / 0.07)"
button-outline-2:
textColor: "{colors.muted}"
border: "1px solid color(srgb 1 0.784314 0.341176 / 0.45)"
height: 26.0938px
padding: "2px 4px 2px 4px"
fontSize: 12px
fontFamily: "Roboto Condensed"
fontWeight: 400
lineHeight: 1.1
rounded: "{rounded.xs}"
backgroundColor: "color(srgb 1 0.784314 0.341176 / 0.07)"
card:
textColor: "{colors.muted}"
border: "1px solid {colors.accent-3}"
padding: "7px 8px 7px 8px"
fontSize: 13px
fontFamily: "Roboto Condensed"
fontWeight: 400
lineHeight: 1.4
rounded: "{rounded.xl}"
backgroundColor: "color(srgb 0.231373 0.509804 0.964706 / 0.07)"
card-2:
textColor: "{colors.muted}"
border: "1px solid rgb(167, 139, 250)"
padding: "7px 8px 7px 8px"
fontSize: 13px
fontFamily: "Roboto Condensed"
fontWeight: 400
lineHeight: 1.4
rounded: "{rounded.xl}"
backgroundColor: "color(srgb 0.654902 0.545098 0.980392 / 0.07)"
badge-text:
textColor: "rgb(167, 139, 250)"
height: 20.6875px
fontSize: 18px
fontFamily: "Train One"
fontWeight: 700
lineHeight: 1.15
badge-text-2:
textColor: "{colors.accent-3}"
height: 20.6875px
fontSize: 18px
fontFamily: "Train One"
fontWeight: 700
lineHeight: 1.15
badge-filled:
textColor: "{colors.primary}"
border: "1px solid {colors.accent-2}"
height: 34px
padding: "2px 8px 2px 8px"
fontSize: 12px
fontFamily: "Roboto Condensed"
fontWeight: 600
rounded: "{rounded.xs}"
backgroundColor: "rgb(26, 29, 33)"
navigation:
textColor: "rgb(244, 246, 248)"
height: 64px
fontSize: 16px
fontFamily: "Roboto Condensed"
fontWeight: 400
footer:
textColor: "{colors.neutral-1}"
padding: "0px 10px 0px 10px"
fontSize: 10px
fontFamily: "Roboto Condensed"
fontWeight: 400
lineHeight: 1
footer-lg:
textColor: "rgb(192, 203, 211)"
border: "1px solid {colors.accent-5}"
padding: "24px 24px 24px 24px"
fontSize: 16px
fontFamily: "Roboto Condensed"
fontWeight: 400
backgroundColor: "rgb(20, 23, 25)"
link:
typography: "{typography.caption-lg-strong}"
textColor: "{colors.link}"
border: "1px solid {colors.link}"
padding: "6px 12px 6px 12px"
rounded: "{rounded.sm}"
link-lg:
typography: "{typography.button-lg}"
textColor: "rgb(244, 246, 248)"
padding: "0px 10.08px 0px 10.08px"
states:
input-focus:
target: input
state: focus
outline: none
input-focus-visible:
target: input
state: focus-visible
outline: "rgb(255, 193, 8) solid 3px"
outlineColor: "rgb(255, 193, 8)"
outlineWidth: 3px
other-hover:
target: other
state: hover
opacity: 1
transform: "scale(1.5)"
link-hover:
target: link
state: hover
transform: none
backgroundColor: "rgb(38, 49, 57)"
link-focus-visible:
target: link
state: focus-visible
outline: "{colors.accent-2} solid 2px"
outlineColor: "{colors.accent-2}"
outlineWidth: 2px
button-focus-visible:
target: button
state: focus-visible
outline: "{colors.primary} solid 2px"
outlineColor: "{colors.primary}"
outlineWidth: 2px
button-disabled:
target: button
state: disabled
opacity: 0.6
button-hover:
target: button
state: hover
backgroundColor: "rgb(38, 49, 57)"
other-disabled:
target: other
state: disabled
opacity: 0.62
boxShadow: none
transform: none
other-focus-visible:
target: other
state: focus-visible
outline: none
boxShadow: "rgba(7, 170, 226, 0.25) 0px 0px 0px 1px, rgba(7, 170, 226, 0.14) 0px 0px 24px"
borderColor: "rgba(7, 170, 226, 0.9)"
breakpoints:
- width: 375
containerWidth: 357
gridColumns: 2
navLinksVisible: 3
menuToggleVisible: true
headingPx: 12
bodyPx: 16
sectionPaddingX: 8
- width: 768
containerWidth: 744
gridColumns: 2
navLinksVisible: 3
menuToggleVisible: true
headingPx: 14
bodyPx: 16
sectionPaddingX: 8
- width: 1024
containerWidth: 1000
gridColumns: 6
navLinksVisible: 3
menuToggleVisible: true
headingPx: 14
bodyPx: 16
sectionPaddingX: 10
- width: 1280
containerWidth: 1256
gridColumns: 7
navLinksVisible: 4
menuToggleVisible: true
headingPx: 14
bodyPx: 16
sectionPaddingX: 8
- width: 1440
containerWidth: 1416
gridColumns: 7
navLinksVisible: 4
menuToggleVisible: true
headingPx: 14
bodyPx: 16
sectionPaddingX: 8
coverage:
statesFound: 61
gradientsFound: 5
rolesUnassigned: 7
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: true
Five Hole Fantasy Hockey's design embodies a dark, high-contrast sports analytics platform with a commanding tech-forward aesthetic. The visual personality merges the intensity of competitive fantasy sports with clean, data-focused interfaces. Deep charcoal canvases punctuated by electric cyan accents create a sense of urgency and precision—perfect for real-time draft decisions and player performance tracking. The system employs bold, uppercase typography and angular design elements that evoke both technical sophistication and athletic energy. Gradient overlays and layered depth suggest information hierarchy without sacrificing clarity, while the restrained use of warm accent colors ({colors.link} — #FFC857) provides visual relief and guides users through critical interactions. This is a system designed for intense focus: every element serves the player's analytical mission.
Key Characteristics
{colors.primary}) as the dominant brand accent, reinforcing team/draft energy{colors.link}) for secondary CTAs and highlights{colors.primary} — #14A2D2): Primary CTAs, active states, brand accent, focus outlines, and hover highlights throughout draft interfaces and data panels.{colors.link} — #FFC857): Secondary CTAs (e.g., "Read article" buttons), accents, and inline links requiring warm contrast against dark surfaces.{colors.accent-1} — #B5C1CC): No measured role; used for ornamental elements or hero graphics.{colors.accent-2} — #07AAE2): No measured role; used for accent layers and decorative overlays.{colors.accent-3} — #3B82F6): No measured role; used in card borders and card backgrounds for variety.{colors.accent-4} — #122A34): No measured role; deep neutral for layered depth effects.{colors.accent-5} — #33414A): No measured role; mid-tone neutral for secondary surface treatments.{colors.accent-6} — #6F858D): No measured role; lighter neutral for icon and divider accents.{colors.primary} (#14A2D2) for primary interactive elements, {colors.link} (#FFC857) for input focus outlines (3px solid).{colors.canvas} — #202020): Default page background; primary surface for all page layouts.{colors.surface} — #131518): Card, panel, and contained section backgrounds; sits darker than canvas for layered depth.{colors.ink} — #FFFFFF): Primary headings and display text; ensures maximum readability over dark backgrounds.{colors.body} — #F4F8FB): Body copy and secondary text; slightly warm white for readability without harsh contrast.{colors.muted} — #D9E2EA): Captions, secondary labels, and tertiary copy; mid-gray for hierarchy signaling.{colors.faint} — #CCCCCC): Placeholder text, disabled text, and quaternary information.{colors.hairline} — #505050): 1px borders, dividers, and grid lines; provides structure without visual weight.{colors.neutral-1} — #AAAAAA): No measured role; reserved for future neutral applications.{colors.success} — #A7B4C0): Confirmation states and success indicators (used sparingly; the system does not expose a full status ramp).Primary Body & UI: Roboto (sans-serif), fallback to system sans-serif.
Secondary / Display & Buttons: Roboto Condensed (sans-serif), fallback to system sans-serif. Often paired with text-transform: uppercase for emphasis.
Monospace / Data: Martian Mono, ui-monospace, SF Mono (for code and tabular data).
Decorative / Badges: Train One (serif display font, used sparingly for stylized labels).
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Roboto Condensed | 52px | 700 | 0.95 | 1.04px | text-transform: uppercase; hero page titles |
| Display LG | Roboto Condensed | 48px | 300 | 1.17 | 0px | Large hero display text |
| Display MD | Roboto Condensed | 40.32px | 700 | 1.15 | 0px | Major section headings |
| Heading XXL | Roboto Condensed | 28px | 700 | 1.2 | 0px | Large content headings |
| Heading XL | Roboto Condensed | 26.4px | 700 | 1.05 | 0px | Section subheadings |
| Heading MD | Roboto Condensed | 21.6px | 700 | — | 0.86px | text-transform: uppercase; section labels |
| Heading LG | Roboto Condensed | 24px | 700 | — | 0px | Card titles and module headings |
| Heading SM | Roboto Condensed | 18.72px | 700 | — | 0px | Subsection headings |
| Heading XS | Roboto Condensed | 11px | 700 | 1.4 | 0px | text-transform: uppercase; small section labels |
| Body XL | Roboto | 16.8px | 400 | 1.55 | 0px | Large body paragraphs |
| Body LG | Roboto | 16px | 400 | — | 0px | Primary body text |
| Body LG Strong | Roboto | 16px | 700 | — | 0px | Emphasized body paragraphs |
| Body MD | Roboto | 14.4px | 400 | — | 0px | Standard body copy |
| Body SM | Roboto | 14px | 400 | 1.4 | 0px | Secondary body text |
| Body XS | Roboto | 12.8px | 400 | 1.7 | 0px | Small body copy |
| Label XL Strong | Roboto Condensed | 14px | 600 | — | 0px | Strong form labels |
| Label LG | Arial | 13.33px | 400 | — | 0px | Input placeholder and form context |
| Label MD | Roboto | 13px | 500 | — | 0px | Medium form labels |
| Label SM | Roboto Condensed | 10.88px | 600 | — | 0.65px | text-transform: uppercase; small labels |
| Label XS | Roboto Condensed | 10.4px | 400 | — | 0.83px | text-transform: uppercase; tiny labels |
| Caption LG Strong | Roboto Condensed | 12px | 700 | — | 0px | Bold captions and labels |
| Caption LG | Roboto | 12px | 400 | — | 0px | Standard captions |
| Caption MD | Roboto Condensed | 11.2px | 700 | — | 0px | Small bold captions |
| Caption SM Strong | Roboto Condensed | 10.88px | 600 | 1.2 | 0px | Condensed strong captions |
| Caption SM | Roboto Condensed | 10.88px | 400 | 1.2 | 0px | Small condensed captions |
| Caption XS | Roboto Condensed | 10.56px | 400 | — | 0.26px | Tiny captions |
| Button XL | Roboto | 18px | 500 | 1.17 | 0px | Large button text |
| Button LG | Roboto Condensed | 15px | 400 | — | 0.6px | text-transform: uppercase; primary buttons, nav links |
| Button MD | Roboto Condensed | 14px | 400 | — | 0px | text-transform: uppercase; medium buttons |
| Button SM | Roboto Condensed | 11.52px | 500 | 1px | 0px | Small action buttons |
| Button XS | Roboto Condensed | 11px | 400 | 1px | 0px | Tiny buttons |
| Button XS Strong | Roboto Condensed | 11px | 700 | 1.4 | 0.22px | text-transform: uppercase; strong small buttons |
| Code XL | ui-monospace | 12px | 700 | 1.5 | 0.96px | text-transform: uppercase; monospace display |
| Code LG Strong | Martian Mono | 11.52px | 500 | 1.3 | 0px | Table headers and data labels |
| Code LG | Martian Mono | 11.52px | 400 | 1.3 | 0px | Inline code and data blocks |
| Code MD | Martian Mono | 11.36px | 400 | 1.3 | 0px | Medium code blocks |
| Code SM | Martian Mono | 10.88px | 400 | — | 0px | Small inline code |
| Code XS | Martian Mono | 9.92px | 500 | — | 0.99px | text-transform: uppercase; tiny code labels |
Primary / Filled
rgba(20, 162, 210, 0.1) (semitransparent primary)#FFFFFF (ink){spacing.sm} (12px) vertical, {spacing.md} (16px) horizontal{rounded.sm} (6px)1px solid #14A2D2 (primary){typography.button-lg} (Roboto Condensed, 15px, 400, uppercase, 0.6px letter-spacing)rgba(20, 162, 210, 0.12), border remains #14A2D2, text stays #FFFFFF2px solid rgba(20, 162, 210, 0.8)0.6Secondary / Ghost
rgba(20, 162, 210, 0.043) (very light primary wash)#FFFFFF (ink){spacing.sm} (12px) vertical, {spacing.md} (16px) horizontal{rounded.sm} (6px)1px solid rgba(20, 162, 210, 0.45){typography.button-lg} (Roboto Condensed, 15px, 400, uppercase, 0.6px letter-spacing)rgba(20, 162, 210, 0.055), border becomes rgba(20, 162, 210, 0.72), text turns #FFFFFF2px solid rgba(20, 162, 210, 0.8), border becomes #14A2D20.6Tertiary / Outline
#FFC857 (link){spacing.xs} (8px) vertical, {spacing.sm} (12px) horizontal{rounded.sm} (6px)1px solid #FFC857 (link){typography.caption-lg-strong} (Roboto, 12px, 700)#24C2F8 (brighter cyan), background remains transparent, text turns #FFFFFF3px solid #FFC857 (golden yellow)0.6Small / Compact
rgba(20, 162, 210, 0.1) (primary wash)#D9E2EA (muted)2px 4px{rounded.xs} (4px)1px solid rgba(255, 196, 87, 0.45) (warm accent, light){typography.button-xs} (Roboto Condensed, 11px, 400)rgba(20, 162, 210, 0.1), border darkens to rgba(255, 196, 87, 0.72)2px solid #14A2D20.5Default Card
rgba(59, 130, 246, 0.07) (blue tint)#D9E2EA (muted){spacing.sm} (12px){rounded.xl} (10px)1px solid #3B82F6 (blue accent)rgba(20, 162, 210, 0.24) 0px 0px 0px 1px, rgba(7, 170, 226, 0.2) 0px 0px 18px, transform translateY(-1px), border becomes rgba(7, 170, 226, 0.85)2px solid #14A2D2, border radius 10pxSecondary Card (Purple Accent)
rgba(167, 139, 250, 0.07) (purple tint)#D9E2EA (muted){spacing.sm} (12px){rounded.xl} (10px)1px solid #A78BFA (purple accent)Section Container
#131518 (surface)#F4F8FB (body){spacing.band} (48px) vertical, {spacing.xl} (24px) horizontal{rounded.none} (0px)1px solid #33414A (accent-5, subtle edge)rgba(20, 162, 210, 0.45), background lifts slightly to rgba(20, 162, 210, 0.043)Text Input (Focus)
rgba(0, 0, 0, 0.5) (dark overlay)#F4F8FB (body){spacing.md} (16px){rounded.xs} (4px)1px solid transparent (no visible border by default){typography.label-lg} (Arial, 13.33px, 400)3px solid #FFC857 (golden focus ring)#CCCCCC (faint)Dropdown / Select
rgba(0, 0, 0, 0.5) (dark)#F4F8FB (body){spacing.md} (16px){rounded.xs} (4px)1px solid rgba(80, 80, 80, 0.5) (hairline, semi-visible)Increment / Spinner Buttons
rgba(0, 0, 0, 0.2) (very dark)#D9E2EA (muted){spacing.xs} (8px){rounded.sm} (6px)1px solid rgba(80, 80, 80, 0.3) (minimal hairline)rgba(20, 162, 210, 0.8), text turns #FFFFFFNavbar (Primary)
#F4F8FB (body){spacing.none} (0px)rgba(38, 49, 57, 0.8), text remains #F4F8FB2px solid #14A2D2Nav Link
#F4F8FB (body){spacing.xs} (8px) horizontal{typography.button-lg} (Roboto Condensed, 15px, 400)#14A2D2 (primary), underline added#14A2D2, optional transform scaleX(1) with shadow rgba(20, 162, 210, 0.28) 0px 0px 7pxCTA Button (e.g., "Support")
#14A2D2 (primary)#FFFFFF (ink){spacing.xs} (8px) vertical, {spacing.sm} (12px) horizontal{rounded.md} (7px)0.8, background dims slightly2px solid rgba(20, 162, 210, 0.75)Text Badge
#A78BFA (purple accent) or #3B82F6 (blue accent)0px (no padding){rounded.none} (0px)Filled Badge
#131518 (surface)#14A2D2 (primary){spacing.xs} (8px) horizontal, {spacing.xxs} (4px) vertical{rounded.xs} (4px)1px solid #07AAE2 (accent-2, bright cyan){typography.button-md} (Roboto Condensed, 14px, 600)#24C2F8, background lifts to rgba(20, 162, 210, 0.12)Inline Link (Default)
#FFC857 (link)#FFFFFF (ink), text decoration persists2px solid #07AAE2 (accent-2)Large Link / Button-like
#F4F8FB (body)1px solid rgba(80, 80, 80, 0.3) (hairline)0px 10px horizontal{rounded.none} (0px)rgba(38, 49, 57, 0.8), text turns #FFFFFF, border remains hairline2px solid #14A2D2{spacing.xxs}){spacing.xxs} (4px): micro-spacing between tightly grouped elements (icon-text pairs, badge padding){spacing.xs} (8px): padding inside buttons, small component gaps{spacing.sm} (12px): padding in cards, space between form fields{spacing.md} (16px): input and button padding, section margins{spacing.lg} (20px): content gaps, sidebar spacing{spacing.xl} (24px): container padding, section edges{spacing.xxl} (28px): large content margins{spacing.xxxl} (32px): major section separation{spacing.section} (36px): content block spacing{spacing.band} (48px): hero sections, major layout divisions{spacing.band} (48px) padding top/bottom{spacing.md} (16px) gapsThe system embraces spacious, breathing layouts that prioritize clarity over density. Large gutters between cards (16–24px) reduce cognitive load during intense fantasy draft decisions. Section separations are clean and generous ({spacing.band} — 48px) rather than compressed. Headings carry substantial top margin ({spacing.lg} to {spacing.xl}) to break visual monotony and signal content hierarchy. Button groups maintain {spacing.sm} (12px) gaps, never crowding actions. The overall effect is one of controlled white space as information architecture—emptiness is intentional and functional.
{rounded.none} = 0px: sharp-edged badges, some section containers, and structural elements{rounded.xs} = 4px: input fields, small buttons, tiny badges{rounded.sm} = 6px: primary buttons, secondary buttons, nav CTA buttons{rounded.md} = 7px: primary CTA buttons (e.g., Support), some image corners{rounded.lg} = 8px: image thumbnail corners{rounded.xl} = 10px: card borders, large interactive surfaces{rounded.xxl} = 12px: reserved for future large containers{rounded.full} = 9999px: circular avatars, pill-shaped badge pills (when used)Component mapping:
{rounded.sm} (6px) — sharp but not harsh{rounded.xl} (10px) — generous rounding reinforces softness against dark background{rounded.xs} (4px) — minimal rounding for utilitarian feel{rounded.full} (9999px) — full circles for profile images{rounded.none} (0px) for text badges (decorative), {rounded.xs} for filled badges1px): hairline borders on inputs, cards, and most interactive elements; defines grid structure and content edges2px): focus outlines on buttons and form fields; provides clear focus-visible feedback3px): input focus outlines (e.g., golden focus ring on text inputs); reserved for high-contrast accessibilityWhere they apply:
1px)1px)2px) or thick (3px) depending on context1px)3px, e.g., #FFC857)The system employs a color-blocking depth strategy rather than traditional multi-level shadows. Depth comes from surface color shifts (canvas → surface → card tints) and optional hover lift effects. Shadows, when applied, are subtle and single-tier—used sparingly for hover states and focus feedback rather than for structural layering.
| Level | Treatment | Use |
|---|---|---|
| Base / Flat | No shadow; canvas background #202020 | Default page surface; cards resting state |
| Hover / Lift | rgba(20, 162, 210, 0.24) 0px 0px 0px 1px, rgba(7, 170, 226, 0.2) 0px 0px 18px or rgba(20, 162, 210, 0.24) 0px 10px 22px, rgba(7, 170, 226, 0.22) 0px 0px 26px | Card and button hover states; transform: translateY(-1px or -2px) |
| Interactive Focus | rgba(20, 162, 210, 0.28) 0px 0px 7px (link hover), or outline ring (2px solid #14A2D2) | Focused links and buttons; optional subtle glow |
| Pressed / Disabled | Shadow removed; opacity drops to 0.5–0.62; no transform | Disabled buttons and inactive elements |
Shadow Philosophy: Shadows are deliberately minimal and warm-tinted (cyan with greenish tints). They serve as visual confirmation of interaction (hover lift, focus glow) rather than structural depth. The absence of shadows on resting elements keeps the interface flat and data-focused, while their appearance on hover creates an affordance of interactivity. This restraint prevents visual noise during intense analytical sessions.
0.10 (10%): ultra-light overlay or disabled state border0.50 (50%): semi-transparent disabled buttons0.55 (55%): disabled interactive elements0.62 (62%): disabled card/container opacity0.70 (70%): hover states on some elements0.80 (80%): button hover background shift0.90 (90%): near-opaque overlays, semi-visible elementsUse contexts:
0.5–0.620.10–0.16 (light wash over element)1.0 (full opacity for clarity)0.70–0.80The system employs a simple stacking ladder for layering interactive and positional elements:
| Layer | Z-index | Use |
|---|---|---|
| Base / Content | 1–5 | Page backgrounds, cards, standard components |
| Dropdown / Menu | 10–20 | Dropdown menus, select lists, popovers |
| Modal / Overlay | 30–50 | Modal dialogs, full-page overlays, notifications |
Stacking rules:
{colors.primary} (#14A2D2) liberally for primary CTAs, focus outlines, and active states; it is the system's dominant brand accent and drives urgency.{colors.link} (#FFC857) with primary CTAs as a secondary warm accent for visual relief and secondary actions; the gold-cyan contrast is a signature of this system.{colors.canvas} and {colors.surface}) for all content; this is dark mode first, not an optional theme.{spacing.md} to {spacing.band} between sections; whitespace aids readability during intense data analysis.1px hairlines for borders; they define structure without visual noise.{rounded.xl} (10px) for a modern, soft appearance against sharp typography.{rounded.sm} (6px), small compact buttons use {rounded.xs} (4px).{colors.faint} (#CCCCCC) for placeholders and disabled states to signal inactivity without harshness.{colors.success}).>4px) to form inputs; they should use {rounded.xs} (4px) for utilitarian clarity.3px except in rare accessibility contexts (focus rings).{spacing.xs} (8px) between buttons, {spacing.sm} (12px) between cards.0.5 for interactive elements; readability suffers below that threshold.{colors.accent-1} through {colors.accent-6}) to data elements; they are reserved for hero graphics, hero bands, and branding ornaments, not data visualization.| Viewport | Content Width | Grid Cols | Nav Links Visible | Menu Toggle | Notes |
|---|---|---|---|---|---|
| Mobile 375px | 357px | 2 | 3–4 | Yes | Sidebar collapses; mobile stacking begins |
| Tablet 768px | 744px | 2 | 3–4 | Yes | Still compact; nav remains accessible |
| Desktop 1024px | 1000px | 6 | 3–4 | Yes | Full grid unlocked; data tables expand |
| Large 1280px | 1256px | 7 | 4+ | Yes | Optimal reading width; maximum content density |
| XL 1440px | 1416px | 7 | 4+ | Yes | Full-width optimized; hero sections max out |
Key behavioral transitions:
{typography.heading-lg} → {typography.body-lg} in some contexts){spacing.xs} (8px) minimum; buttons in a group maintain {spacing.sm} (12px) gaps to prevent mis-taps.{typography.body-lg} (16px) or {typography.heading-sm} (18.72px); cards stack vertically; grid collapses to 1–2 columns.{typography.heading-sm} (18.72px); 2-column grid for cards; section padding halves to {spacing.xl} (24px).{typography.heading-lg} or larger; 6–7 column grid; section padding returns to {spacing.band} (48px); images and video embeds expand to full width.{typography.body-md} or {typography.body-lg}) remains constant across breakpoints; only display and heading sizes contract on mobile to preserve hierarchy within tighter viewports.object-fit: cover and scale proportionally; border radius applied consistently ({rounded.lg} for images, {rounded.xl} for cards).| Role | Name | Hex |
|---|---|---|
| Primary CTA | Primary / Brand | #14A2D2 |
| Secondary Link | Link | #FFC857 |
| Page Background | Canvas | #202020 |
| Card Surface | Surface | #131518 |
| Headings | Ink | #FFFFFF |
| Body Text | Body | #F4F8FB |
| Secondary Text | Muted | #D9E2EA |
| Placeholder / Disabled | Faint | #CCCCCC |
| Borders / Dividers | Hairline | #505050 |
| Success / Confirmation | Success | #A7B4C0 |
{colors.canvas} — #202020) as the default page background; never assume light backgrounds.{colors.primary} — #14A2D2). Use it for all primary CTAs, focus states, and brand highlights. It is the driving color of the system.{rounded.xl} (10px) with thin 1px borders in tints of blue or purple (e.g., #3B82F6, #A78BFA). Resting cards have 0.07 opacity wash backgrounds.rgba(20, 162, 210, 0.1) fill with 1px solid #14A2D2 border and {rounded.sm} (6px). Hover state lifts with a shadow and border brightening.1px hairline border and {rounded.xs} (4px). Focus state applies a thick 3px golden (#FFC857) outline.{colors.link} — #FFC857) as inline text color; on hover, they turn full #FFFFFF (ink). They have no background by default.rgba(20, 162, 210, ...) 0px Xpx Ypx) + transform: translateY(-1px or -2px) on hover. No multi-level shadow stacking.{spacing.md} (16px) for component gutters, {spacing.xl} (24px) for container padding, {spacing.band} (48px) for major section breaks.#14A2D2 (primary) or 3px solid #FFC857 (gold for inputs). They must remain visible even on dark backgrounds.{typography.display-lg} or {typography.heading-xl} for major headings, {typography.body-md} or {typography.body-lg} for body paragraphs, and {typography.caption-sm} or smaller for metadata and timestamps.{colors.accent-1} through {colors.accent-6}) are for hero graphics, logo accents, and brand ornaments—not for data visualization or UI components.#14A2D2) for confirmations, and the success gray ({colors.success} — #A7B4C0) for non-critical confirmations only.{colors.success} — #A7B4C0) was identified. Error, warning, and info colors were not found or may not be exposed by the design system.{colors.accent-1} through {colors.accent-6}, {colors.neutral-1}) have no documented role. They appear in gradients or decorative layers but are not tied to specific UI patterns; treat them as reserved or experimental.Extraction Summary: This design system was derived from 6 pages of Five Hole Fantasy Hockey's public web presence. The tokens and patterns reflect a dark-first, data-intensive sports analytics UI emphasizing cyan (#14A2D2) as the primary brand accent, bold uppercase typography (Roboto Condensed), and restrained shadow depth. The system is well-suited for rapid prototyping of draft dashboards, player comparison tools, and real-time sports data interfaces. For surfaces, interactions, or styling not covered here, refer to the component patterns section or escalate design questions to ensure brand consistency.