Remixes of flashdeales.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: Flashdeales
description: |
Flash Deals presents a clean, approachable marketplace aesthetic centered on
value and accessibility. The design balances a soft, welcoming foundation with
purposeful accent colours that guide attention to deals and calls to action.
The palette draws inspiration from nature (soft greens, earth tones) paired
with neutral grays that create calm, scannability. Typography is
straightforward and friendly rather than corporate, favoring readability and
hierarchy over decorative flourish. The overall mood is trustworthy yet
energetic—calm enough for browsing, engaging enough to inspire action on
limited-time offers.
source:
url: "https://flashdeales.com/"
pagesAnalyzed: 6
extractedAt: 2026-10-27
tokensMeasured: true
colors:
primary: "#E9ECEF"
link: "#019A04"
canvas: "#F5F5F5"
surface: "#FFFFFF"
surface-alt: "#095400"
ink: "#000000"
body: "#232323"
muted: "#404040"
faint: "#6C757D"
hairline: "#DEE2E6"
error: "#DC3545"
success: "#198754"
info: "#0DCAF0"
accent-1: "#0D6EFD"
typography:
heading-xxl:
fontFamily: Lato
fontSize: 34px
fontWeight: 700
lineHeight: 1
letterSpacing: 0px
heading-xl:
fontFamily: Lato
fontSize: 32px
fontWeight: 700
lineHeight: 1.4
letterSpacing: 0px
heading-lg:
fontFamily: Lato
fontSize: 28px
fontWeight: 500
lineHeight: 1.4
letterSpacing: 0px
heading-md:
fontFamily: Lato
fontSize: 24px
fontWeight: 500
lineHeight: 1.4
letterSpacing: 0px
heading-sm:
fontFamily: Lato
fontSize: 18px
fontWeight: 500
lineHeight: 1.4
letterSpacing: 0px
heading-xs:
fontFamily: Lato
fontSize: 14.4px
fontWeight: 700
lineHeight: 1.4
letterSpacing: 0px
body-xl:
fontFamily: Lato
fontSize: 24px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
body-lg:
fontFamily: Lato
fontSize: 20px
fontWeight: 700
lineHeight: 2.4
letterSpacing: 0px
body-md:
fontFamily: Lato
fontSize: 16px
fontWeight: 700
lineHeight: 1
letterSpacing: 0px
body-sm:
fontFamily: Lato
fontSize: 14px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-sm-loose:
fontFamily: Lato
fontSize: 14px
fontWeight: 400
lineHeight: 2.29
letterSpacing: 0px
body-sm-strong:
fontFamily: Lato
fontSize: 14px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
nav:
fontFamily: Lato
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
label-xl:
fontFamily: Lato
fontSize: 20px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
label-lg:
fontFamily: Lato
fontSize: 16px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 0px
caption-xs:
fontFamily: Lato
fontSize: 12px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
caption-xs-strong:
fontFamily: Lato
fontSize: 12px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
rounded:
none: 0px
xs: 3.2px
sm: 4px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 40px
section: 48px
band: 60px
borderWidths:
thin: 1px
shadows:
sm: "rgba(0, 0, 0, 0.15) 0px 8px 16px 0px"
md: "rgba(0, 0, 0, 0.075) 0px 2px 4px 0px"
elevationStrategy: progressive
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#F5F5F5"
surface: "#FFFFFF"
surfaceRaised: "#F5F5F5"
text: "#000000"
textMuted: "#232323"
border: "#DEE2E6"
accent: "#019A04"
accentFg: "#000000"
focusRing: "#019A04"
elevation: shadow
dark:
bg: "#0A140C"
surface: "#19221B"
surfaceRaised: "#252E27"
text: "#F5FBF5"
textMuted: "#9CA39C"
border: "#313A33"
accent: "#019A04"
accentFg: "#0B0B0C"
focusRing: "#019A04"
elevation: "border+surface"
components:
button-filled:
typography: "{typography.nav}"
textColor: "{colors.ink}"
border: "1px solid {colors.hairline}"
height: 38px
padding: "6px 12px 6px 12px"
rounded: "{rounded.sm}"
backgroundColor: "{colors.surface}"
button-outline:
typography: "{typography.nav}"
textColor: "{colors.faint}"
border: "1px solid {colors.hairline}"
height: 38px
padding: "6px 12px 6px 12px"
rounded: "{rounded.sm}"
button-outline-sm:
typography: "{typography.body-sm}"
textColor: "{colors.faint}"
border: "1px solid {colors.faint}"
height: 31px
padding: "4px 8px 4px 8px"
rounded: "{rounded.xs}"
button-filled-2:
typography: "{typography.nav}"
textColor: "{colors.accent-1}"
border: "1px solid {colors.hairline}"
height: 38px
padding: "6px 12px 6px 12px"
backgroundColor: "{colors.surface}"
card:
typography: "{typography.nav}"
textColor: "{colors.muted}"
border: "1px solid {colors.hairline}"
rounded: "{rounded.sm}"
backgroundColor: "{colors.surface}"
card-lg:
typography: "{typography.nav}"
textColor: "{colors.muted}"
border: "1px solid rgba(0, 0, 0, 0.125)"
rounded: "{rounded.sm}"
backgroundColor: "{colors.surface}"
navigation:
typography: "{typography.nav}"
textColor: "{colors.muted}"
padding: "8px 0px 8px 0px"
navigation-sm:
typography: "{typography.nav}"
textColor: "{colors.muted}"
height: 81px
padding: "8px 0px 8px 0px"
footer:
typography: "{typography.body-sm}"
textColor: "{colors.muted}"
backgroundColor: "{colors.surface-alt}"
link:
typography: "{typography.nav}"
textColor: "{colors.link}"
link-sm:
typography: "{typography.body-sm-loose}"
textColor: "{colors.surface}"
states:
link-hover:
target: link
state: hover
textColor: "rgb(10, 88, 202)"
input-disabled:
target: input
state: disabled
opacity: 1
other-focus:
target: other
state: focus
textColor: "rgb(33, 37, 41)"
boxShadow: "rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem"
borderColor: "rgb(134, 183, 254)"
backgroundColor: "{colors.surface}"
other-disabled:
target: other
state: disabled
opacity: 1
backgroundColor: "{colors.primary}"
button-hover:
target: button
state: hover
backgroundColor: "rgb(221, 224, 227)"
input-focus:
target: input
state: focus
boxShadow: "rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem"
borderColor: "rgb(134, 183, 254)"
input-active:
target: input
state: active
filter: "brightness(90%)"
button-disabled:
target: button
state: disabled
filter: none
opacity: 0.65
other-active:
target: other
state: active
backgroundColor: "rgb(182, 212, 254)"
button-focus:
target: button
state: focus
boxShadow: "rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem"
button-active:
target: button
state: active
textColor: "{colors.surface}"
borderColor: "rgb(10, 83, 190)"
backgroundColor: "rgb(10, 88, 202)"
breakpoints:
- width: 375
containerWidth: 375
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 16
sectionPaddingX: 12
- width: 768
containerWidth: 720
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 16
sectionPaddingX: 12
- width: 1024
containerWidth: 960
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 16
sectionPaddingX: 12
- width: 1280
containerWidth: 1140
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 16
sectionPaddingX: 12
- width: 1440
containerWidth: 1320
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 16
sectionPaddingX: 12
coverage:
statesFound: 61
gradientsFound: 0
rolesUnassigned: 1
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: true
Flash Deals presents a clean, approachable marketplace aesthetic centered on value and accessibility. The design balances a soft, welcoming foundation with purposeful accent colours that guide attention to deals and calls to action. The palette draws inspiration from nature (soft greens, earth tones) paired with neutral grays that create calm, scannability. Typography is straightforward and friendly rather than corporate, favoring readability and hierarchy over decorative flourish. The overall mood is trustworthy yet energetic—calm enough for browsing, engaging enough to inspire action on limited-time offers.
Key Characteristics
{colors.primary} — #E9ECEF): Primary CTA fills, brand accents, active states; a soft light gray used as the default interactive fill{colors.link} — #019A04): Inline hyperlinks and navigational text; a natural green signifying actionable content{colors.accent-1} — #0D6EFD): Unassigned decorative accent; appears in focus states and secondary interactive contexts{colors.canvas} — #F5F5F5): Default page background; a very light gray providing soft contrast to white surfaces{colors.surface} — #FFFFFF): Card, panel, and container backgrounds; pure white for content modules{colors.surface-alt} — #095400): Alternating section band; a deep forest green for hero or footer areas{colors.ink} — #000000): Primary headings and display text; pure black for maximum contrast{colors.body} — #232323): Main body copy and paragraph text; near-black for comfortable reading{colors.muted} — #404040): Captions, secondary text, and metadata; mid-gray for reduced emphasis{colors.faint} — #6C757D): Tertiary text, placeholder text, and disabled states; lighter gray for minimal visual weight{colors.hairline} — #DEE2E6): 1px borders, dividers, and subtle rule lines; barely-perceptible gray stroke{colors.error} — #DC3545): Error states, validation failures, and destructive actions; a clear red for immediate recognition{colors.success} — #198754): Success confirmations and positive states; a vibrant green matching the link accent{colors.info} — #0DCAF0): Informational states and auxiliary guidance; a bright cyan for neutral messagingPrimary: Lato, sans-serif (fallback stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) Secondary: None specified; system defaults for monospace where required.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Heading XXL | Lato | 34px | 700 | 1 | 0px | Maximum prominence; hero titles |
| Heading XL | Lato | 32px | 700 | 1.4 | 0px | Page section headers |
| Heading Large | Lato | 28px | 500 | 1.4 | 0px | Subsection titles |
| Heading Medium | Lato | 24px | 500 | 1.4 | 0px | Card titles, secondary headers |
| Heading Small | Lato | 18px | 500 | 1.4 | 0px | Tertiary headers |
| Heading XS | Lato | 14.4px | 700 | 1.4 | 0px | Compact headings |
| Body Large | Lato | 20px | 700 | 2.4 | 0px | Prominent body copy, callouts |
| Body XL | Lato | 24px | 700 | 1.5 | 0px | Feature text, emphasis |
| Body Medium | Lato | 16px | 700 | 1 | 0px | Strong body text, labels |
| Body Small | Lato | 14px | 400 | 1.5 | 0px | Regular body copy, default |
| Body Small Strong | Lato | 14px | 700 | 1.5 | 0px | Bold body emphasis |
| Body Small Loose | Lato | 14px | 400 | 2.29 | 0px | List items with generous line height |
| Label Large | Lato | 16px | 500 | 1.2 | 0px | Form labels, control text |
| Label XL | Lato | 20px | 400 | 1.5 | 0px | Large input or form context |
| Navigation | Lato | 16px | 400 | 1.5 | 0px | Nav links, menus |
| Caption XS | Lato | 12px | 400 | 1.5 | 0px | Tertiary metadata, timestamps |
| Caption XS Strong | Lato | 12px | 700 | 1.5 | 0px | Bold captions, badges |
Filled (Default)
#FFFFFF#0000006px 12px38px{typography.nav} (16px, 400, 1.5 line-height)1px solid {colors.hairline} (#DEE2E6){rounded.sm} (4px)#DDDFDF, text #2125290px 0px 0px 0.25rem rgba(13, 110, 253, 0.25), border #86B7FEOutline (Secondary)
rgba(0, 0, 0, 0))#6C757D6px 12px38px{typography.nav} (16px, 400, 1.5 line-height)1px solid {colors.hairline} (#DEE2E6){rounded.sm} (4px)#5C636A, text #FFFFFF, border #565E640px 0px 0px 0.25rem rgba(130, 138, 145, 0.5), border #565E64#565E64, border #515C5E#6C757D, border #6C757DOutline Small
rgba(0, 0, 0, 0))#6C757D4px 8px31px{typography.body-sm} (14px, 400, 1.5 line-height)1px solid #6C757D{rounded.xs} (3.2px)#5C636A, text #FFFFFF, border #565E64Filled with Icon / Split (Filled-2)
#FFFFFF#0D6EFD6px 12px38px{typography.nav} (16px, 400, 1.5 line-height)1px solid {colors.hairline} (#DEE2E6)0px 4px 4px 0px (right corners only)Semantic Button Variants (all share 38px height, 6px 12px padding, 16px font, 1px border, 4px radius unless noted)
#0D6EFD, text white, border #0D6EFD. Hover: #0B5ED7, Focus: shadow 0px 0px 0px 0.25rem rgba(49, 132, 253, 0.5). Active: #0A58CA. Disabled: opacity 0.65.#6C757D, text white. Hover: #5C636A. Focus: shadow 0px 0px 0px 0.25rem rgba(130, 138, 145, 0.5). Disabled: opacity 0.65.#198754, text white. Hover: #157347. Focus: shadow 0px 0px 0px 0.25rem rgba(60, 153, 110, 0.5). Active: #146C43. Disabled: opacity 0.65.#0DCAF0, text black. Hover: #31D2F2. Focus: shadow 0px 0px 0px 0.25rem rgba(11, 172, 204, 0.5). Disabled: opacity 0.65.#FFC107, text black. Hover: #FFCA2C. Focus: shadow 0px 0px 0px 0.25rem rgba(217, 164, 6, 0.5). Disabled: opacity 0.65.#DC3545, text white. Hover: #BB2D3B. Focus: shadow 0px 0px 0px 0.25rem rgba(225, 83, 97, 0.5). Disabled: opacity 0.65.#F8F9FA, text black. Hover: #F9FAFB. Focus: shadow 0px 0px 0px 0.25rem rgba(211, 212, 213, 0.5). Disabled: opacity 0.65.Default Card
#FFFFFF#4040400px (content padding handled by child elements)380.625px (measured; content-aware)212px{typography.nav} (16px, 400, 1.5 line-height)1px solid {colors.hairline} (#DEE2E6){rounded.sm} (4px)Large Card (default-lg)
#FFFFFF#4040400px408.188px212.156px{typography.nav} (16px, 400, 1.5 line-height)1px solid rgba(0, 0, 0, 0.125){rounded.sm} (4px)Text Input (Default State)
#FFFFFF#2323236px 12px38px{typography.label-xl} (20px, 400, 1.5 line-height)1px solid {colors.hairline} (#DEE2E6){rounded.sm} (4px)0px 0px 0px 0.25rem rgba(13, 110, 253, 0.25), border #86B7FE#E9ECEF, opacity 0.5Form Label
{typography.label-lg} (16px, 500, 1.2 line-height)#404040Navigation Default
#4040408px 0px602px{typography.nav} (16px, 400, 1.5 line-height)0pxNavigation Small (default-sm)
#4040408px 0px81px{typography.nav} (16px, 400, 1.5 line-height)0pxNavigation Link
{colors.link} (#019A04){typography.nav} (16px, 400, 1.5 line-height)#0A58CAFooter Link (default-sm)
#FFFFFF{typography.body-sm} (14px, 400, 1.5 line-height)32pxFooter Default
{colors.surface-alt} (#095400)#4040400px265px{typography.body-sm} (14px, 400, 1.5 line-height)0pxFlash Deals uses a consistent base-8 spacing scale for predictable rhythm and alignment:
{spacing.xxs} = 4px — Tight micro-spacing (button padding, icon gaps){spacing.xs} = 8px — Minimal spacing (input borders, small gaps){spacing.sm} = 12px — Small padding (form sections, compact cards){spacing.md} = 16px — Default padding and margins (bodies, containers){spacing.lg} = 20px — Comfortable spacing (section offsets, heading gaps){spacing.xl} = 24px — Generous spacing (major section margins){spacing.xxl} = 32px — Large section separation{spacing.xxxl} = 40px — Maximum inter-section spacing{spacing.section} = 48px — Full section padding blocks{spacing.band} = 60px — Hero and band section spacing{spacing.sm} (12px) and {spacing.md} (16px) for content inset on mobile and desktopFlash Deals prioritizes breathing room. Generous line heights (1.4–2.4), vertical spacing between sections ({spacing.section} and {spacing.band}), and minimal padding within cards create a calm, scannable interface. Whitespace is used functionally to separate ideas and reduce cognitive load rather than decoratively.
{rounded.none} = 0px — Images, full-bleed sections, sharp edges{rounded.xs} = 3.2px — Tight corners (small buttons, compact inputs){rounded.sm} = 4px — Default corner radius (buttons, cards, inputs, containers){rounded.full} = 9999px — Pill-shaped elements (rare; primarily for avatars or floating actions if present)1px — Default border width for buttons, inputs, cards, and dividersSystem uses exclusively 1px borders for hairlines and element definitions.
Flash Deals employs a progressive shadow system where depth is created through subtle, layered shadows rather than dramatic blur or offsets. The approach prioritizes color-blocking (surface vs. canvas backgrounds) with minimal supplementary shadows for lift.
| Level | Treatment | Use |
|---|---|---|
| Base / Flat | No shadow | Canvas backgrounds, default page areas, body text |
| Subtle (md) | rgba(0, 0, 0, 0.075) 0px 2px 4px 0px | Lightly elevated containers, hover states on cards |
| Moderate (sm) | rgba(0, 0, 0, 0.15) 0px 8px 16px 0px | Modals, dropdowns, significant floating content |
Shadow Philosophy: Shadows are used sparingly to indicate layering without dominating the visual hierarchy. Most depth comes from surface colour changes (white cards on light gray canvas). When shadows appear, they are near-transparent and suggest subtle lift rather than dramatic separation. This keeps the interface feeling open and accessible.
1 (100%) — All standard text, buttons, surfaces0.75 (75%) — Subtle hover state emphasis0.5 (50%) — Disabled form inputs, inactive controls0.25 (25%) — Focus ring halos, subtle overlays2 — Standard content, cards, default page elements9999 — Modals, dropdowns, tooltips, absolutely highest stacking contextThe shallow z-index scale (only two tiers) reflects a predominantly flat, single-layer interaction model with minimal stacking complexity.
{spacing.md} (16px) as the default padding for most containers; scale up to {spacing.xl} (24px) or {spacing.xxl} (32px) for major sections.{colors.ink} or {colors.body} on light backgrounds; use white text on dark surfaces.0px 0px 0px 0.25rem box shadows in the semantic colour's tint (e.g., rgba(13, 110, 253, 0.25) for blue buttons).{colors.hairline} for subtle borders (1px) separating sections or defining container edges.{rounded.sm}), images at 0px ({rounded.none}).| Viewport Width | Content Max Width | Grid Columns | Layout Change | Nav Visibility | Largest Heading Size |
|---|---|---|---|---|---|
| 375px (Mobile) | 375px | 1 | Single column, full-width content | Menu links hidden | Responsive (heading hierarchy maintained) |
| 768px (Tablet) | 720px | 1 | Single column, increased container width | Menu links hidden | Responsive (same hierarchy) |
| 1024px (Small Desktop) | 960px | 1 | Single column, wider container | Menu links hidden | Responsive (same hierarchy) |
| 1280px (Desktop) | 1140px | 1 | Single column, standard container | Menu links hidden | Responsive (same hierarchy) |
| 1440px (Large Desktop) | 1320px | 1 | Single column, maximum container | Menu links hidden | Responsive (same hierarchy) |
No layout grid shift occurs across breakpoints. The system maintains single-column layouts at all measured viewport widths. Content width increases progressively with viewport size; section padding remains consistent at {spacing.sm} to {spacing.md} horizontally.
38px (buttons, form inputs)70px (compact buttons, icon buttons)6px horizontally, 6px vertically for touch-friendly spacing within controls44px × 44px for mobile, achieved through padding and generous button sizing{spacing.sm} — 12px on both sides) ensures content remains readable on narrow viewports without additional responsive collapse.Use these semantic mappings to implement UI quickly:
{colors.accent-1} — #0D6EFD) for interactive focus states; light gray ({colors.primary} — #E9ECEF) for primary button fills{colors.link} — #019A04) for all hyperlinks; hover to #0A58CA{colors.canvas} — #F5F5F5){colors.surface} — #FFFFFF){colors.surface-alt} — #095400){colors.ink} — #000000){colors.body} — #232323){colors.muted} — #404040){colors.faint} — #6C757D){colors.hairline} — #DEE2E6){colors.error} — #DC3545){colors.success} — #198754){colors.info} — #0DCAF0)Follow these rules to stay on-brand:
{rounded.sm}) and 1px borders ({colors.hairline}); fill with semantic color or white background.{spacing.md} (16px); scale up in {spacing.lg} (20px) increments for section separation.0px 0px 0px 0.25rem box shadow in the semantic colour's 25% opacity tint (e.g., rgba(13, 110, 253, 0.25) for blue).0px); let content inside cards define spacing. Border: 1px hairline, 4px radius.rgba(0, 0, 0, 0.075) 0px 2px 4px 0px (subtle) or rgba(0, 0, 0, 0.15) 0px 8px 16px 0px (moderate) for modals.#E9ECEF); always maintain visual clarity.{colors.link} — #019A04), no underline by default; remove text-decoration on hover.{colors.surface-alt} — #095400) with white link text; maintain 265px minimum height.{colors.accent-1} (#0D6EFD) is marked decorative with no measured semantic role; it appears in focus rings and some interactive contexts but no primary usage pattern was established.Document Version: 1.0
Last Updated: Extracted from 6 pages of https://flashdeales.com/
Coverage: Public-facing pages only; authenticated surfaces and checkout flows excluded.