Remixes of shopmy.us
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: Shopmy
description: |
ShopMy's design system embodies a sophisticated, editorial aesthetic rooted in
luxury curation and human taste. The palette moves between refined neutrals
and deep, dramatic surfaces, accented by a striking electric blue that signals
interactivity. Typography leverages elegant serif and humanist sans-serif
typefaces to convey authority and accessibility simultaneously. The overall
mood is intentional and curated—every element feels purposeful, never
algorithmic. Photography and product imagery are treated as primary design
material, afforded generous whitespace and dark anchoring surfaces that make
them shine. The system favors clarity and restraint over visual noise,
reflecting a brand philosophy centered on the "obsessed" human curator, not
machine recommendation.
source:
url: "https://shopmy.us/home"
pagesAnalyzed: 1
extractedAt: 2026-11-05
tokensMeasured: true
colors:
primary: "#0000EE"
canvas: "#FFFFFF"
surface: "#F2F2F2"
surface-alt: "#000000"
ink: "#000000"
hairline: "#4A4A4A"
neutral-1: "#333333"
neutral-2: "#1F1F1F"
typography:
display-xxl:
fontFamily: Tobias
fontSize: 100px
fontWeight: 300
lineHeight: 1
letterSpacing: 0px
display-xl:
fontFamily: Tobias
fontSize: 70px
fontWeight: 400
lineHeight: 1.05
letterSpacing: -3px
display-lg:
fontFamily: Tobias
fontSize: 60px
fontWeight: 300
letterSpacing: 0px
heading-md:
fontFamily: Tobias
fontSize: 30px
fontWeight: 300
letterSpacing: 0px
heading-sm:
fontFamily: "DM Sans"
fontSize: 18px
fontWeight: 300
lineHeight: 1.4
letterSpacing: 0px
body-xl:
fontFamily: Tobias
fontSize: 24px
fontWeight: 400
letterSpacing: 0px
body-lg:
fontFamily: "DM Sans"
fontSize: 16px
fontWeight: 400
lineHeight: 1.4
letterSpacing: 0px
body-md:
fontFamily: "DM Sans"
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
body-md-strong:
fontFamily: "DM Sans"
fontSize: 14px
fontWeight: 700
lineHeight: 1.43
letterSpacing: 1.26px
textTransform: uppercase
nav:
fontFamily: "DM Sans"
fontSize: 16px
fontWeight: 400
lineHeight: 0.88
letterSpacing: 0.4px
button:
fontFamily: "DM Sans"
fontSize: 13px
fontWeight: 700
letterSpacing: 0.4px
caption-xs:
fontFamily: "DM Sans"
fontSize: 12px
fontWeight: 400
letterSpacing: 0px
caption-xs-strong:
fontFamily: "DM Sans"
fontSize: 12px
fontWeight: 500
lineHeight: 1
letterSpacing: 1.2px
textTransform: uppercase
rounded:
none: 0px
xs: 4px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 36px
band: 40px
borderWidths:
thin: 1px
shadows:
sm: "rgba(0, 0, 0, 0.2) 0px 0px 10px 0px"
elevationStrategy: single-tier
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F2F2F2"
surfaceRaised: "#E8E8E8"
text: "#000000"
textMuted: "#595959"
border: "#4A4A4A"
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"
components:
button-secondary:
typography: "{typography.caption-xs-strong}"
textColor: "{colors.canvas}"
border: "1px solid {colors.surface-alt}"
height: 38px
padding: "12px 24px 12px 24px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.surface-alt}"
button-outline:
typography: "{typography.button}"
textColor: "{colors.canvas}"
border: "1px solid {colors.canvas}"
height: 40px
padding: "10px 20px 10px 20px"
rounded: "{rounded.xs}"
button-text:
typography: "{typography.button}"
textColor: "{colors.canvas}"
height: 40px
padding: "10px 20px 10px 20px"
rounded: "{rounded.xs}"
navigation:
textColor: "{colors.canvas}"
height: 40px
fontSize: 16px
fontFamily: "DM Sans"
fontWeight: 400
link:
textColor: "{colors.primary}"
fontSize: 16px
fontFamily: "DM Sans"
fontWeight: 400
link-sm:
typography: "{typography.nav}"
textColor: "{colors.canvas}"
states:
button-hover:
target: button
state: hover
backgroundColor: "rgba(255, 255, 255, 0.8)"
button-disabled:
target: button
state: disabled
textColor: "rgb(184, 184, 184)"
backgroundColor: "rgba(255, 255, 255, 0.1)"
input-focus:
target: input
state: focus
borderColor: "rgb(118, 118, 118)"
borderWidth: 1px
other-hover:
target: other
state: hover
rounded: "50%"
backgroundColor: "rgb(219, 219, 219)"
other-active:
target: other
state: active
textColor: "rgb(0, 122, 135)"
borderColor: "rgb(128, 232, 224)"
borderWidth: 1px
backgroundColor: "rgb(128, 232, 224)"
button-focus:
target: button
state: focus
opacity: 0.95
other-focus:
target: other
state: focus
outline: none
nav-hover:
target: nav
state: hover
textDecoration: underline
button-focus-visible:
target: button
state: focus-visible
outline: "{colors.neutral-2} solid 2px"
outlineColor: "{colors.neutral-2}"
outlineWidth: 2px
button-active:
target: button
state: active
opacity: 0.6
breakpoints:
- width: 375
containerWidth: 367
gridColumns: 2
navLinksVisible: 20
menuToggleVisible: true
headingPx: 34
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 760
gridColumns: 2
navLinksVisible: 20
menuToggleVisible: true
headingPx: 52
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 1016
gridColumns: 4
navLinksVisible: 3
menuToggleVisible: true
headingPx: 64
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1240
gridColumns: 4
navLinksVisible: 3
menuToggleVisible: true
headingPx: 70
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1240
gridColumns: 4
navLinksVisible: 3
menuToggleVisible: true
headingPx: 70
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 61
gradientsFound: 0
rolesUnassigned: 2
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
ShopMy's design system embodies a sophisticated, editorial aesthetic rooted in luxury curation and human taste. The palette moves between refined neutrals and deep, dramatic surfaces, accented by a striking electric blue that signals interactivity. Typography leverages elegant serif and humanist sans-serif typefaces to convey authority and accessibility simultaneously. The overall mood is intentional and curated—every element feels purposeful, never algorithmic. Photography and product imagery are treated as primary design material, afforded generous whitespace and dark anchoring surfaces that make them shine. The system favors clarity and restraint over visual noise, reflecting a brand philosophy centered on the "obsessed" human curator, not machine recommendation.
Key Characteristics
{colors.primary} — #0000EE): Electric blue used for primary CTAs, active states, and brand accent throughout. Draws attention without overwhelming the editorial layout.{colors.canvas} — #FFFFFF): Default page background, providing clean white space for product imagery and content.{colors.surface} — #F2F2F2): Light gray card and panel background, creating subtle differentiation from canvas without high contrast.{colors.surface-alt} — #000000): Deep black alternating section bands, headings, and primary text. Creates dramatic color blocks that anchor the layout.{colors.hairline} — #4A4A4A): Medium gray for 1px borders, dividers, and subtle visual separations. Sits between dark ink and lighter neutrals.{colors.neutral-1} — #333333): Dark charcoal gray with no assigned semantic role; used decoratively in specific UI contexts.{colors.neutral-2} — #1F1F1F): Near-black neutral reserved for specialized surfaces; no formal role assignment.No error, success, warning, or informational state colors were extracted from the site. The design system does not declare a semantic color ramp; refer to "Known Gaps" for details.
Primary (Display & Headings): Tobias (serif)
Secondary (Body, Navigation, Buttons, Captions): DM Sans (humanist sans-serif)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | Tobias | 100px | 300 | 1.0 | 0px | Hero and largest display text |
| Display LG | Tobias | 60px | 300 | not measured | 0px | Large hero or feature displays |
| Display XL | Tobias | 70px | 400 | 1.05 | −3px | Main headings; tight negative tracking |
| Heading MD | Tobias | 30px | 300 | not measured | 0px | Section-level headings |
| Heading SM | DM Sans | 18px | 300 | 1.4 | 0px | Subsection headings |
| Body XL | Tobias | 24px | 400 | not measured | 0px | Large body and prominent text |
| Body LG | DM Sans | 16px | 400 | 1.4 | 0px | Standard body text and links |
| Body MD | DM Sans | 14px | 400 | 1.43 | 0px | Secondary body and link text |
| Body MD Strong | DM Sans | 14px | 700 | 1.43 | 1.26px | Uppercase strong emphasis; 1.26px tracking |
| Button | DM Sans | 13px | 700 | not measured | 0.4px | Button labels; 0.4px tracking |
| Navigation | DM Sans | 16px | 400 | 0.88 | 0.4px | Nav links and top menu items |
| Caption XS | DM Sans | 12px | 400 | not measured | 0px | Small captions and metadata |
| Caption XS Strong | DM Sans | 12px | 500 | 1.0 | 1.2px | Uppercase small caps; 1.2px tracking |
#000000 (black)#FFFFFF (white)12px 24px38px1px solid #000000{rounded.xs} (4px)12px ({typography.caption-xs})50012pxbackground-color: rgba(255, 255, 255, 0.8) (white with 80% opacity)color: #B8B8B8; background-color: rgba(255, 255, 255, 0.1) (light gray text, nearly transparent white)rgba(0, 0, 0, 0) (transparent)#FFFFFF (white)10px 20px40px1px solid #FFFFFF{rounded.xs} (4px)13px ({typography.button})700background-color: rgba(255, 255, 255, 0.15) (white with 15% opacity)color: #B8B8B8; border-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1)rgba(0, 0, 0, 0) (transparent)#FFFFFF (white)10px 20px40px{rounded.xs} (4px)13px ({typography.button})700background-color: rgba(255, 255, 255, 0.2) (white with 20% opacity)color: #B8B8B8rgba(0, 0, 0, 0) (transparent)#FFFFFF (white)0px40px{rounded.none} (0px)16px ({typography.nav})4000.4pxtext-decoration: underline (underline appears on hover)outline: none (outline removed for cleaner appearance)#0000EE ({colors.primary})16px ({typography.body-lg})400text-decoration: none (no underline; relies on color shift or opacity)#FFFFFF (white)16px ({typography.body-lg})40014pxopacity: 0.8 (slightly faded)The system uses an 4px base unit scaled into 10 tiers, each serving distinct spatial contexts:
{spacing.xxs} = 4px — micro-spacing between inline elements{spacing.xs} = 8px — tight spacing within dense UI{spacing.sm} = 12px — small gaps between related items{spacing.md} = 16px — default spacing for most relationships{spacing.lg} = 20px — medium separation between logical blocks{spacing.xl} = 24px — generous spacing for feature sections{spacing.xxl} = 28px — large breathing room{spacing.xxxl} = 32px — extra-large section spacing{spacing.section} = 36px — vertical spacing between major sections{spacing.band} = 40px — generous padding for full-width color bands1240px (content remains constrained above 1440px)0px — full-width sections extend edge-to-edgeShopMy embraces generous whitespace as an editorial principle. Large dark and light blocks alternate vertically, with ample breathing room around typography and imagery. This creates a gallery-like experience where products and content feel curated, never cramped. Negative space is intentional; it signals luxury and human curation over algorithmic density.
{rounded.none} = 0px — applied to images, cards, and modals; sharp edges dominate{rounded.xs} = 4px — applied to buttons only; subtle softness without compromising edge definition1px — used on button borders (outline and secondary variants) and hairline dividers| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; solid background or transparent | Default surface, canvas, text |
| Raised | rgba(0, 0, 0, 0.2) 0px 0px 10px 0px | Dropdowns and modals |
The system employs color-blocking and single-tier shadow elevation. Depth comes primarily from contrasting surface colors (white canvas, light gray surface, deep black bands) rather than a layered shadow hierarchy. A single, soft drop shadow (0px 0px 10px 0px with 20% black) is reserved for interactive floats like dropdowns. This restraint keeps the design clean and editorial, allowing photography and typography to remain the focal point.
0.80 (80%) — used in hover states for button fills and overlays; subtle but noticeable0.65 (65%) — used in hover states for certain elements to create a faded, interactive feedbackz-index: 1 — default contentz-index: 2, 3, 5 — elevated UI elementsz-index: 10 — dropdowns and menus above base contentz-index: 100 — sticky headers and persistent navigation4px rounding; cards, images, and modals remain sharp (0px).#0000EE) exclusively for primary CTAs and interactive states. It's a signal; avoid using it elsewhere.0px 0px 10px 0px) is the maximum; color-blocking is the primary depth tool.#333333, #1F1F1F) as primary text or backgrounds. These are decorative only; stick to #000000 (ink) and #FFFFFF (canvas) for main surfaces.1240px above 1280px viewports, maintaining editorial control.| Viewport | Min Width | Content Width | Grid Columns | Nav Links Visible | Largest Heading | Notes |
|---|---|---|---|---|---|---|
| Mobile | 320px–767px | 367px | 2 | No (menu toggle) | 34px | Primary mobile layout |
| Tablet | 768px–1023px | 760px | 2 | No (menu toggle) | 52px | Tablet transition; nav collapses |
| Desktop | 1024px–1279px | 1016px | 4 | 3 visible | 64px | Full grid; partial nav |
| Large Desktop | 1280px+ | 1240px | 4 | 3 visible | 70px | Max-width constraint applies |
Key Changes:
0px (full-width bands extend edge-to-edge).While specific touch target minimums were not extracted, industry best practice (48px minimum) should be observed for all interactive elements (buttons, links, nav items). The extracted button heights (38px and 40px) approach this threshold and should be tested on touch devices; consider increased padding or hit areas in mobile contexts if needed.
0px throughout; full-width color bands preserve visual drama at all sizes.{colors.primary} — #0000EE){colors.canvas} — #FFFFFF){colors.surface} — #F2F2F2){colors.surface-alt} — #000000){colors.hairline} — #4A4A4A)Start with color blocks. The layout is driven by alternating white and black full-width sections. Establish the vertical rhythm before adding components.
Apply typography hierarchy strictly. Display sizes use Tobias serif (60px+); everything below uses DM Sans. Maintain the −3px tracking on Display XL headings.
Keep edges sharp by default. Only buttons receive 4px rounding; cards, images, and containers remain 0px. This is core to the aesthetic.
Use the electric blue sparingly. Reserve #0000EE for primary CTAs, active states, and critical brand moments. It's a signal, not a fill color for surfaces.
Build depth through surface color, not shadows. A single soft shadow (0px 0px 10px 0px) lifts dropdowns only. Contrast and color-blocking carry the design's visual language.
Implement extracted hover/focus states exactly. Opacity shifts, color changes, and underlines are intentional interaction feedback. Test keyboard and mouse navigation against the extracted state table.
Respect the max-width constraint. Content stays within 1240px above 1280px; ensure sections and grids honor this boundary.
Scale headings responsively. Heading sizes adapt by viewport (34px mobile, 70px desktop) but never change font-family. Maintain serif authority across all sizes.
{colors.neutral-1} (#333333) and {colors.neutral-2} (#1F1F1F) were extracted but have no formal semantic role. They are decorative only and should not be used as primary text or background surfaces.0.80, 0.65) was derived from extracted hover states. Other opacity values may exist but were not explicitly documented as a reusable scale.