Remixes of snikei.webflow.io
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: Snikei
description: |
Snikei's design system embodies a contemporary, minimalist aesthetic grounded
in warm earth tones and sophisticated restraint. The visual language
prioritizes clean typography, ample whitespace, and product-centric imagery
set against neutral backgrounds that shift from cream to warm taupe. The brand
conveys premium quality through careful colour blocking—layering of discrete
surface colours rather than shadows—creating depth through intentional
contrast. Headings are bold and commanding, often paired with generous
negative space, while supporting elements remain modest in scale. The overall
mood is aspirational yet approachable: a modern footwear brand that values
clarity, sustainability, and contemporary design.
source:
url: "https://snikei.webflow.io/"
pagesAnalyzed: 1
extractedAt: 2026-10-30
tokensMeasured: true
colors:
primary: "#222222"
link: "#0000EE"
canvas: "#FFFFFF"
on-primary: "#FFFFFF"
ink: "#0C0407"
body: "#808080"
hairline: "#E0E0E0"
typography:
display-xxl:
fontFamily: Poppins
fontSize: 100px
fontWeight: 600
lineHeight: 1
letterSpacing: -4px
textTransform: capitalize
display-xl:
fontFamily: Inter
fontSize: 60px
fontWeight: 700
lineHeight: 1.1
letterSpacing: -1.8px
display-lg:
fontFamily: Inter
fontSize: 48px
fontWeight: 700
lineHeight: 1.33
letterSpacing: -1px
heading-lg:
fontFamily: Inter
fontSize: 32px
fontWeight: 700
lineHeight: 1.31
letterSpacing: -0.96px
heading-md:
fontFamily: Inter
fontSize: 20px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
heading-sm:
fontFamily: Inter
fontSize: 18px
fontWeight: 600
lineHeight: 1.67
letterSpacing: -0.54px
heading-xs:
fontFamily: Inter
fontSize: 14px
fontWeight: 600
lineHeight: 2.14
letterSpacing: 0px
body-xl:
fontFamily: Inter
fontSize: 20px
fontWeight: 500
lineHeight: 1.5
letterSpacing: -0.6px
body-xl-strong:
fontFamily: Inter
fontSize: 20px
fontWeight: 600
lineHeight: 1.5
letterSpacing: -0.6px
body-lg:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
body-lg-strong:
fontFamily: Inter
fontSize: 14px
fontWeight: 500
lineHeight: 1.43
letterSpacing: 0px
body-lg-loose:
fontFamily: Inter
fontSize: 14px
fontWeight: 500
lineHeight: 1.71
letterSpacing: 0px
body-lg-2:
fontFamily: Inter
fontSize: 14px
fontWeight: 600
lineHeight: 1.43
letterSpacing: 0px
caption-xs:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.67
letterSpacing: 0px
caption-xs-loose:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 2.5
letterSpacing: 0px
rounded:
none: 0px
xs: 6px
sm: 8px
md: 10px
lg: 12px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 40px
band: 52px
borderWidths:
thin: 1px
elevationStrategy: color-blocking
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F7F7F7"
surfaceRaised: "#EEEDED"
text: "#0C0407"
textMuted: "#808080"
border: "#E0E0E0"
accent: "#0000EE"
accentFg: "#FFFFFF"
focusRing: "#0000EE"
elevation: shadow
dark:
bg: "#090916"
surface: "#181824"
surfaceRaised: "#242430"
text: "#F5F5FE"
textMuted: "#9B9BA6"
border: "#30303B"
accent: "#6969FF"
accentFg: "#090916"
focusRing: "#4141FF"
elevation: "border+surface"
contrastFailures:
- "light: muted on bg = 3.95:1 (needs 4.5:1)"
components:
button-filled:
typography: "{typography.body-lg-2}"
textColor: "rgb(249, 249, 249)"
height: 46px
padding: "12px 16px 12px 16px"
rounded: "{rounded.lg}"
backgroundColor: "rgb(178, 158, 142)"
button-outline:
typography: "{typography.body-lg}"
textColor: "{colors.ink}"
border: "1px solid {colors.hairline}"
height: 46px
padding: "12px 16px 12px 16px"
rounded: "{rounded.lg}"
backgroundColor: "{colors.canvas}"
button-icon:
textColor: "{colors.on-primary}"
border: "1px solid {colors.hairline}"
height: 40px
fontSize: 40px
fontFamily: Inter
fontWeight: 400
lineHeight: 0.5
rounded: "{rounded.md}"
button-text:
typography: "{typography.body-lg}"
textColor: "{colors.on-primary}"
height: 26px
padding: "6px 0px 0px 0px"
backgroundColor: "{colors.canvas}"
card:
typography: "{typography.body-lg}"
textColor: "{colors.ink}"
card-sm:
typography: "{typography.body-lg}"
textColor: "{colors.link}"
rounded: "{rounded.lg}"
badge-text:
typography: "{typography.display-xl}"
textColor: "{colors.on-primary}"
height: 66px
badge-text-sm:
typography: "{typography.body-lg-loose}"
textColor: "{colors.ink}"
height: 28px
padding: "2px 8px 2px 8px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.canvas}"
link:
typography: "{typography.body-lg-strong}"
textColor: "rgb(51, 51, 51)"
link-sm:
typography: "{typography.body-lg}"
textColor: "{colors.body}"
states:
other-focus:
target: other
state: focus
outline: none
input-focus:
target: input
state: focus
borderColor: "rgb(56, 152, 236)"
other-hover:
target: other
state: hover
opacity: 1
button-hover:
target: button
state: hover
opacity: 0.8
link-hover:
target: link
state: hover
textDecoration: none
breakpoints:
- width: 375
containerWidth: 345
gridColumns: 2
navLinksVisible: 0
menuToggleVisible: false
headingPx: 36
bodyPx: 14
sectionPaddingX: 0
- width: 768
containerWidth: 728
gridColumns: 3
navLinksVisible: 0
menuToggleVisible: false
headingPx: 56
bodyPx: 14
sectionPaddingX: 0
- width: 1024
containerWidth: 984
gridColumns: 4
navLinksVisible: 0
menuToggleVisible: false
headingPx: 60
bodyPx: 14
sectionPaddingX: 0
- width: 1280
containerWidth: 1200
gridColumns: 4
navLinksVisible: 0
menuToggleVisible: false
headingPx: 60
bodyPx: 14
sectionPaddingX: 0
- width: 1440
containerWidth: 1200
gridColumns: 4
navLinksVisible: 0
menuToggleVisible: false
headingPx: 100
bodyPx: 14
sectionPaddingX: 0
coverage:
statesFound: 23
gradientsFound: 0
rolesUnassigned: 0
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Snikei's design system embodies a contemporary, minimalist aesthetic grounded in warm earth tones and sophisticated restraint. The visual language prioritizes clean typography, ample whitespace, and product-centric imagery set against neutral backgrounds that shift from cream to warm taupe. The brand conveys premium quality through careful colour blocking—layering of discrete surface colours rather than shadows—creating depth through intentional contrast. Headings are bold and commanding, often paired with generous negative space, while supporting elements remain modest in scale. The overall mood is aspirational yet approachable: a modern footwear brand that values clarity, sustainability, and contemporary design.
Key Characteristics
{colors.primary} — #222222): Deep charcoal used for primary CTAs, brand accent elements, active states, and key headings. Conveys sophistication and serves as the dominant interactive colour.{colors.canvas} — #FFFFFF): Clean white default page background and label colour on brand surfaces. Provides maximum contrast with primary text.{colors.ink} — #0C0407): Nearly black text colour for all headings and primary content. Nearly identical to primary but reserved for typography.{colors.body} — #808080): Mid-grey for body copy, secondary text, and descriptive labels. Creates visual hierarchy beneath headings.{colors.hairline} — #E0E0E0): Light grey for 1px borders, dividers, and subtle structural elements. Barely perceptible against white backgrounds.{colors.link} — #0000EE): Bright blue reserved for inline hyperlinks, maintaining web convention and accessibility.Primary: Poppins (font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)
Secondary: Inter (font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | Poppins | 100px | 600 | 1 | -4px | Hero heading; text-transform: capitalize |
| Display XL | Inter | 60px | 700 | 1.1 | -1.8px | Large section heading |
| Display LG | Inter | 48px | 700 | 1.33 | -1px | Display-size content |
| Heading LG | Inter | 32px | 700 | 1.31 | -0.96px | Primary section heading |
| Heading MD | Inter | 20px | 600 | 1.5 | 0px | Subheading / card title |
| Heading SM | Inter | 18px | 600 | 1.67 | -0.54px | Smaller section heading |
| Heading XS | Inter | 14px | 600 | 2.14 | 0px | Label heading / caption heading |
| Body XL | Inter | 20px | 500 | 1.5 | -0.6px | Large body text |
| Body XL Strong | Inter | 20px | 600 | 1.5 | -0.6px | Large body emphasis |
| Body LG | Inter | 14px | 400 | 1.43 | 0px | Default body copy |
| Body LG Strong | Inter | 14px | 500 | 1.43 | 0px | Body emphasis |
| Body LG 2 | Inter | 14px | 600 | 1.43 | 0px | Body strong (capitalize option) |
| Body LG Loose | Inter | 14px | 500 | 1.71 | 0px | Body with increased line height |
| Caption XS | Inter | 12px | 400 | 1.67 | 0px | Small captions |
| Caption XS Loose | Inter | 12px | 400 | 2.5 | 0px | Small captions with wide line height |
{typography.display-xxl}, {typography.display-xl}, {typography.display-lg}) employ tight negative letter-spacing (-4px to -1px) to enhance visual impact and premium feel.Filled / Primary
#B29E8E (warm taupe)#F9F9F9 (off-white){spacing.sm} {spacing.md} {spacing.sm} {spacing.md} (12px 16px){rounded.lg} (12px)Outline / Secondary
#FFFFFF (white){colors.ink} (#0C0407){spacing.sm} {spacing.md} {spacing.sm} {spacing.md} (12px 16px){colors.hairline} (#E0E0E0){rounded.lg} (12px)Icon
#FFFFFF (white){colors.hairline} (#E0E0E0){rounded.md} (10px)Text
#FFFFFF (white)#FFFFFF (white)Card Default
{colors.ink} (#0C0407){rounded.none} (0px)Card Default SM
{colors.link} (#0000EE){rounded.lg} (12px)Badge Text
#FFFFFF (white){rounded.none} (0px)Badge Text SM
#FFFFFF (white){colors.ink} (#0C0407){spacing.xxs} {spacing.xs} {spacing.xxs} {spacing.xs} (2px 8px){rounded.xs} (6px)Link Default
#333333 (dark grey){rounded.none} (0px)Link Default SM
{colors.body} (#808080){rounded.none} (0px)Base unit: 4px ({spacing.xxs}). The scale progresses in increments of 4px up to 52px, enabling granular and consistent alignment:
{spacing.xxs}: 4px — micro spacing, button gaps{spacing.xs}: 8px — small gutters, icon padding{spacing.sm}: 12px — compact spacing, badge padding{spacing.md}: 16px — button padding, medium gaps{spacing.lg}: 20px — component margins{spacing.xl}: 24px — section breaks{spacing.xxl}: 28px — larger offsets{spacing.xxxl}: 32px — substantial spacing{spacing.section}: 40px — section vertical spacing{spacing.band}: 52px — major layout sectionsThe design embraces generous negative space to emphasize content hierarchy. Headings sit in substantial whitespace, body text has loose line heights (1.4–1.7), and vertical sections are separated by {spacing.section} (40px) or {spacing.band} (52px). This creates a premium, breathing feel and prevents visual congestion even on content-rich pages.
{rounded.none}: 0px — cards, overlays, badges (flat aesthetic){rounded.xs}: 6px — small badges and accents{rounded.sm}: 8px — secondary UI elements{rounded.md}: 10px — icon buttons{rounded.lg}: 12px — primary buttons, card variants{rounded.full}: 9999px — fully rounded pill shapes (used sparingly)The design system employs color-blocking as its primary depth strategy. No traditional layered shadows are present; instead, depth emerges through strategic background colour changes. Surfaces shift between white ({colors.canvas}), warm taupe, and neutral greys to create visual separation and hierarchy.
| Level | Treatment | Use |
|---|---|---|
| Base | White (#FFFFFF) or neutral background | Default page surfaces, cards, containers |
| Elevated | Warm taupe (#B29E8E) or mid-grey (#808080) | Primary buttons, feature sections, highlights |
| Recessed | Light grey (#E0E0E0) | Borders, dividers, subtle texture |
| Overlay | Transparent to 96–98% opacity | Semi-transparent overlays and modals |
Shadow Philosophy: The system is intentionally flat. No box-shadow values are applied to create depth; instead, flat colour surfaces and strategic spacing provide all necessary visual distinction. This reinforces the premium, contemporary aesthetic and ensures clarity on all display sizes.
#B29E8E) for primary CTAs to maintain brand consistency and premium feel.{spacing.section} and {spacing.band} between major content blocks to create visual breathing room.{typography.display-xxl} (100px) with tight negative letter-spacing (-4px) for hero impact.{rounded.lg} (12px) to all interactive button states for cohesion.#0000EE) exclusively for inline hyperlinks to maintain web convention.#222222) for body text; reserve it for headings and CTAs.{rounded.none}.{spacing.sm} (12px) or decrease font size below 14px for standard buttons.{spacing.lg} (20px) between major sections; whitespace is a design asset.| Viewport | Width | Content Column | Grid Columns | Largest Heading | Body Font Size | Section Padding X |
|---|---|---|---|---|---|---|
| Mobile | 375px | 345px | 2 | 36px | 14px | 0px |
| Tablet | 768px | 728px | 3 | 56px | 14px | 0px |
| Laptop | 1024px | 984px | 4 | 60px | 14px | 0px |
| Desktop | 1280px | 1200px | 4 | 60px | 14px | 0px |
| Large Desktop | 1440px | 1200px | 4 | 100px | 14px | 0px |
Collapse Points: Navigation link visibility remains 0 across all breakpoints; the menu toggle never appears (site does not feature a hamburger menu in the measured layout). The largest heading scales from 36px (mobile) to 100px (large desktop) in discrete steps, reinforcing content hierarchy at each viewport.
#222222)#FFFFFF bg, #E0E0E0 border)#FFFFFF)#0C0407)#808080)#E0E0E0)#0000EE)#B29E8E){spacing.xxs} to {spacing.band}). Section breaks are {spacing.section} (40px) or {spacing.band} (52px) minimum.#B29E8E) with {rounded.lg} (12px); outlines are white with grey border. All buttons maintain 46px height and {spacing.sm} {spacing.md} padding.{colors.hairline} (#E0E0E0) for all lines and dividers.{rounded.none}); buttons and small components use {rounded.lg} (12px) or {rounded.md} (10px).#3898EC) on the border.