Remixes of fragrances.com.ng
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: Fragrances
description: |
Fragrances.com.ng embraces a luxury e-commerce aesthetic grounded in
sophisticated simplicity and high-contrast clarity. The brand prioritizes
product photography and storytelling through bold hero imagery, supported by a
carefully restrained palette of professional teals and deep neutrals. The
visual personality is premium yet approachable—speaking to both curated
fragrance enthusiasts and everyday shoppers seeking designer scents. Generous
whitespace, sharp typography, and deliberate use of color-blocked bands create
a sense of editorial refinement. The interface avoids ornament; instead, it
relies on clean grids, precise spacing, and strategic accent colors to guide
attention to products and calls to action.
source:
url: "https://fragrances.com.ng/"
pagesAnalyzed: 1
extractedAt: 2026-10-19
tokensMeasured: true
colors:
primary: "#009BC2"
accent: "#5C6AC3"
canvas: "#F6F7F9"
surface-alt: "#FFFFFF"
on-primary: "#FFFFFF"
ink: "#282828"
body: "#414B56"
muted: "#A8AEBA"
faint: "#FFFFFF"
hairline: "#000000"
accent-1: "#34343C"
neutral-1: "#999999"
neutral-2: "#EAEAEA"
typography:
display:
fontFamily: Rajdhani
fontSize: 52px
fontWeight: 600
lineHeight: 1
letterSpacing: 0px
textTransform: uppercase
body-xl:
fontFamily: Rajdhani
fontSize: 24px
fontWeight: 500
lineHeight: 1.35
letterSpacing: 0px
body-lg:
fontFamily: Rajdhani
fontSize: 20px
fontWeight: 600
lineHeight: 1.35
letterSpacing: 0px
body-md:
fontFamily: Rajdhani
fontSize: 18px
fontWeight: 600
lineHeight: 1.35
letterSpacing: 0px
body-sm:
fontFamily: Rajdhani
fontSize: 14px
fontWeight: 500
lineHeight: 1.35
letterSpacing: 0px
body-xs:
fontFamily: Rajdhani
fontSize: 13px
fontWeight: 400
lineHeight: 1.35
letterSpacing: 0px
body-xs-uppercase:
fontFamily: Rajdhani
fontSize: 13px
fontWeight: 400
lineHeight: 1.35
letterSpacing: 1px
textTransform: uppercase
nav:
fontFamily: Rajdhani
fontSize: 14px
fontWeight: 600
lineHeight: 1.35
letterSpacing: 0px
textTransform: uppercase
button-md:
fontFamily: Rajdhani
fontSize: 16px
fontWeight: 500
lineHeight: 1.35
letterSpacing: 0px
textTransform: uppercase
button-sm:
fontFamily: Rajdhani
fontSize: 12px
fontWeight: 600
lineHeight: 4.17
letterSpacing: 0px
textTransform: uppercase
label-sm:
fontFamily: Rajdhani
fontSize: 14px
fontWeight: 400
lineHeight: 1.35
letterSpacing: 0px
label-xs:
fontFamily: Rajdhani
fontSize: 12px
fontWeight: 400
lineHeight: 2.5
letterSpacing: 0px
caption-sm:
fontFamily: Rajdhani
fontSize: 12px
fontWeight: 600
lineHeight: 1.35
letterSpacing: 0px
textTransform: uppercase
caption-xs:
fontFamily: Rajdhani
fontSize: 11px
fontWeight: 400
lineHeight: 1.35
letterSpacing: 0px
textTransform: uppercase
caption-xs-strong:
fontFamily: Rajdhani
fontSize: 11px
fontWeight: 600
lineHeight: 1.35
letterSpacing: 0px
textTransform: uppercase
rounded:
none: 0px
xs: 3px
sm: 5px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 40px
xxxl: 44px
section: 52px
band: 60px
borderWidths:
thin: 1px
medium: 2px
shadows:
sm: "rgba(0, 0, 0, 0.35) 0px 0px 12px 2px"
md: "rgba(187, 187, 187, 0.3) 2px 2px 2px 0px"
lg: "rgb(225, 225, 225) 0px 3px 3px 0px"
elevationStrategy: progressive
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#F6F7F9"
surface: "#FFFFFF"
surfaceRaised: "#F6F6F6"
text: "#282828"
textMuted: "#414B56"
border: "#000000"
accent: "#009BC2"
accentFg: "#000000"
focusRing: "#009BC2"
elevation: shadow
dark:
bg: "#091315"
surface: "#182123"
surfaceRaised: "#242D2F"
text: "#F5FBFD"
textMuted: "#9BA3A5"
border: "#30393A"
accent: "#009BC2"
accentFg: "#0B0B0C"
focusRing: "#009BC2"
elevation: "border+surface"
components:
button-primary:
typography: "{typography.button-md}"
textColor: "{colors.faint}"
border: "1px solid {colors.primary}"
height: 37.5938px
padding: "7px 30px 7px 30px"
rounded: 30px
backgroundColor: "{colors.primary}"
button-filled:
typography: "{typography.button-md}"
textColor: "{colors.faint}"
border: "1px solid {colors.accent}"
height: 37.5938px
padding: "7px 30px 7px 30px"
rounded: 30px
backgroundColor: "{colors.accent}"
button-primary-sm:
typography: "{typography.caption-sm}"
textColor: "{colors.faint}"
border: "1px solid {colors.primary}"
height: 32.1875px
padding: "7px 25px 7px 25px"
rounded: 25px
backgroundColor: "{colors.primary}"
button-secondary:
textColor: "{colors.ink}"
height: 37.5469px
padding: "10px 0px 10px 10px"
fontSize: 13px
fontFamily: Rajdhani
fontWeight: 500
lineHeight: 1.35
backgroundColor: "{colors.surface-alt}"
button-filled-lg:
typography: "{typography.nav}"
textColor: "{colors.faint}"
height: 42.8906px
padding: "12px 20px 12px 20px"
backgroundColor: "rgb(58, 61, 66)"
badge-text:
typography: "{typography.body-xs}"
textColor: "{colors.hairline}"
height: 20px
badge-icon:
textColor: "{colors.muted}"
height: 23px
fontSize: 23px
fontFamily: "Font Awesome 6 Brands"
fontWeight: 400
lineHeight: 1
navigation:
typography: "{typography.body-xs}"
textColor: "{colors.hairline}"
height: 42.8906px
footer:
typography: "{typography.label-sm}"
textColor: "{colors.muted}"
link:
typography: "{typography.button-md}"
textColor: "{colors.body}"
link-2:
typography: "{typography.body-xl}"
textColor: "{colors.hairline}"
states:
link-hover:
target: link
state: hover
textColor: "rgb(0, 107, 180)"
textDecoration: underline
link-active:
target: link
state: active
textColor: "rgb(255, 85, 1)"
textDecoration: underline
button-active:
target: button
state: active
textColor: "rgb(51, 51, 51)"
borderColor: "rgb(205, 205, 205)"
borderWidth: 1px
backgroundColor: "rgb(226, 226, 226)"
button-hover:
target: button
state: hover
textColor: "rgb(85, 85, 85)"
borderColor: "rgb(205, 205, 205)"
borderWidth: 1px
backgroundColor: "rgb(226, 226, 226)"
input-disabled:
target: input
state: disabled
opacity: 0.5
other-focus:
target: other
state: focus
boxShadow: none
input-focus:
target: input
state: focus
boxShadow: "rgb(104, 168, 224) 0px 0px 3px 1px"
other-hover:
target: other
state: hover
backgroundColor: "rgb(232, 232, 232)"
other-active:
target: other
state: active
textColor: "rgb(255, 85, 1)"
textDecoration: underline
nav-hover:
target: nav
state: hover
textColor: "rgb(51, 51, 51)"
card-hover:
target: card
state: hover
textColor: "rgb(117, 117, 117)"
breakpoints:
- width: 375
containerWidth: 355
gridColumns: 2
navLinksVisible: 5
menuToggleVisible: false
headingPx: 0
bodyPx: 13
sectionPaddingX: 0
- width: 768
containerWidth: 748
gridColumns: 5
navLinksVisible: 5
menuToggleVisible: false
headingPx: 0
bodyPx: 13
sectionPaddingX: 0
- width: 1024
containerWidth: 1004
gridColumns: 5
navLinksVisible: 5
menuToggleVisible: false
headingPx: 0
bodyPx: 13
sectionPaddingX: 0
- width: 1280
containerWidth: 1200
gridColumns: 5
navLinksVisible: 5
menuToggleVisible: false
headingPx: 0
bodyPx: 13
sectionPaddingX: 0
- width: 1440
containerWidth: 1400
gridColumns: 5
navLinksVisible: 5
menuToggleVisible: false
headingPx: 0
bodyPx: 13
sectionPaddingX: 0
coverage:
statesFound: 61
gradientsFound: 0
rolesUnassigned: 3
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Fragrances.com.ng embraces a luxury e-commerce aesthetic grounded in sophisticated simplicity and high-contrast clarity. The brand prioritizes product photography and storytelling through bold hero imagery, supported by a carefully restrained palette of professional teals and deep neutrals. The visual personality is premium yet approachable—speaking to both curated fragrance enthusiasts and everyday shoppers seeking designer scents. Generous whitespace, sharp typography, and deliberate use of color-blocked bands create a sense of editorial refinement. The interface avoids ornament; instead, it relies on clean grids, precise spacing, and strategic accent colors to guide attention to products and calls to action.
Key Characteristics
{colors.primary} — #009BC2): Primary action buttons, active states, brand accents, and hero highlights. Confident teal that signals premium positioning.{colors.accent} — #5C6AC3): Hero bands and decorative color-blocking. A rich periwinkle that adds visual depth to campaign sections.{colors.accent-1} — #34343C): Dark neutral used in decorative contexts; no assigned interaction role but present in interface ornamentation.{colors.canvas} — #F6F7F9): Default page background; a cool, barely-tinted white that reduces glare and unifies sections.{colors.surface-alt} — #FFFFFF): Alternating section bands, white card surfaces, and tertiary text on brand-colored backgrounds.{colors.ink} — #282828): Primary headings and foreground text. Near-black with subtle warmth for legibility.{colors.body} — #414B56): Body copy and secondary text. A slate-blue that maintains hierarchy while staying readable.{colors.muted} — #A8AEBA): Captions, secondary labels, and de-emphasized text. Light neutral for visual rest.{colors.hairline} — #000000): 1px borders, dividers, and fine rules. Pure black for crisp definition.{colors.neutral-1} — #999999): Medium gray for decorative elements and secondary dividers.{colors.neutral-2} — #EAEAEA): Light gray for subtle borders and faint background accents.Primary Font: Rajdhani (sans-serif, geometric, 200–900 weights available)
Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
The system relies entirely on Rajdhani for all text roles, providing a cohesive, modern aesthetic optimized for screen legibility and hierarchical clarity.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Rajdhani | 52px | 600 | 1 (52px) | 0px | All-caps, hero headlines; extreme condensation |
| Heading Large | Rajdhani | 24px | 500 | 1.35 (32.4px) | 1px | Section headers; tracked for elegance |
| Heading Medium | Rajdhani | 20px | 600 | 1.35 (27px) | 0px | Subsection titles; bold weight |
| Heading Small | Rajdhani | 18px | 600 | 1.35 (24.3px) | 0px | Card and widget headers |
| Body Large | Rajdhani | 18px | 600 | 1.35 (24.3px) | 0px | Prominent body text; bold variant |
| Body Medium | Rajdhani | 16px | 500 | 1.35 (21.6px) | 0px | Default link and link-like text |
| Body Default | Rajdhani | 14px | 500 | 1.35 (18.9px) | 1px | Primary body copy; tracked |
| Body Small | Rajdhani | 14px | 500 | 1.35 (18.9px) | 0px | Footnotes and label text |
| Label | Rajdhani | 14px | 400 | 1.35 (18.9px) | 1px | Form labels; regular weight with tracking |
| Button Medium | Rajdhani | 16px | 500 | 1.35 (21.6px) | 0px | Primary CTA button text; capitalized |
| Button Small | Rajdhani | 12px | 600 | 4.17 (50px) | 0px | Small button labels; all-caps, tall line-height |
| Caption | Rajdhani | 12px | 600 | 1.35 (16.2px) | 0px | Caption and small annotation text; bold |
| Caption XS | Rajdhani | 11px | 400 | 1.35 (14.85px) | 0px | Smallest captions; all-caps |
| Caption XS Strong | Rajdhani | 11px | 600 | 1.35 (14.85px) | 0px | Strong all-caps caption variant |
| Input | Rajdhani | 12px | 400 | 2.5 (30px) | 0px | Form input placeholder text; tall line-height |
| Link XS | Rajdhani | 13px | 400 | 1.35 (17.55px) | 0px | Small link text; default body color |
| Link XS Uppercase | Rajdhani | 13px | 400 | 1.35 (17.55px) | 1px | Small tracked link variant |
| Nav Link | Rajdhani | 14px | 600 | 1.35 (18.9px) | 0px | Navigation menu items; all-caps, bold |
{typography.display} — 52px) and some body text carry letter-spacing: 1px to increase elegance and reduce visual density.1 (solid) or 1.35 to prevent crowding.{typography.nav} — 14px, 600 weight, uppercase — signals interactive affordance and visual weight.{typography.button-md} (16px, weight 500, capitalized){colors.primary} (#009BC2){colors.surface-alt} (#FFFFFF){colors.primary} (#009BC2){rounded.full} (9999px / pill)#006B4 (RGB 0, 107, 180), text #FFFFFF#FF5501 (RGB 255, 85, 1), text #FFFFFF{typography.button-sm} (12px, weight 600, uppercase){colors.primary} (#009BC2){colors.surface-alt} (#FFFFFF){colors.primary} (#009BC2){rounded.full} (9999px / pill)#006B4, text #FFFFFF{typography.button-md} (16px, weight 500, capitalized){colors.accent} (#5C6AC3){colors.surface-alt} (#FFFFFF){colors.accent} (#5C6AC3){rounded.full} (9999px / pill)#FFFFFF#FFFFFF{typography.body-xs} (13px, weight 400){colors.surface-alt} (#FFFFFF){colors.ink} (#282828){rounded.none} (0px){typography.caption-sm} (12px, weight 600, uppercase){colors.surface-alt} (#FFFFFF){rounded.none} (0px){colors.surface-alt} (#FFFFFF){rounded.none} (0px){spacing.md} (16px) content padding{colors.primary} (#009BC2) and {colors.accent} (#5C6AC3){colors.surface-alt} (#FFFFFF) on colored bands{spacing.band} (60px) vertical{rounded.none} (0px){typography.label-xs} (12px, weight 400, line-height 2.5){colors.surface-alt} (#FFFFFF){colors.ink} (#282828){colors.hairline} (#000000){rounded.xs} (3px){typography.nav} (14px, weight 600, uppercase){colors.ink} (#282828){colors.surface-alt} (#FFFFFF){colors.primary} (#009BC2){typography.body-xs} (13px, weight 400){colors.body} (#414B56){typography.body-xs} (13px, weight 400){colors.hairline} (#000000){rounded.none} (0px){colors.muted} (#A8AEBA){rounded.none} (0px)The spacing system is built on a base unit of 4px with a geometric scale for flexibility and predictability.
{spacing.xxs} (4px) — subtle gaps between inline elements{spacing.xs} (8px) — padding in compact components{spacing.sm} (12px) — internal padding for buttons, inputs{spacing.md} (16px) — standard gutters between content blocks{spacing.lg} (20px) — spacing between major sections{spacing.xl} (24px) — section padding{spacing.xxl} (40px) — larger gaps{spacing.xxxl} (44px) — prominent spacing{spacing.section} (52px) — major section padding vertical{spacing.band} (60px) — hero band and color-blocked section paddingUsage Context:
{spacing.sm} (12px){spacing.md} (16px){spacing.md} (16px) at mobile, {spacing.xl} (24px) at desktop{spacing.section} (52px) for standard sections; {spacing.band} (60px) for hero/color-blocked areas| Viewport | Max Width | Columns | Gutter | Notes |
|---|---|---|---|---|
| 375px | 355px | 2 | Not specified | Mobile grid; narrow viewport |
| 768px | 748px | 5 | Not specified | Tablet; 5-column system |
| 1024px | 1004px | 5 | Not specified | Desktop; 5-column grid |
| 1280px | 1200px | 5 | Not specified | Large desktop; maintained 5-column |
| 1440px | 1400px | 5 | Not specified | Extra large; capped at 1400px |
Container Strategy:
Whitespace is leveraged to create visual hierarchy and breathing room without relying on heavy shadows or borders. The design uses:
{spacing.section} = 52px; {spacing.band} = 60px) to separate distinct content zones.{colors.hairline} (black) 1px rules used for critical dividers; most elements use color and spacing alone.This approach creates an uncluttered, premium feel that emphasizes product imagery and content flow over graphic embellishment.
The system employs minimal rounding, with sharp cards and selective pill-shaping on interactive elements:
{rounded.none} (0px) — cards, badges, overlays, secondary buttons, navigation{rounded.xs} (3px) — form inputs{rounded.sm} (5px) — secondary UI elements{rounded.full} (9999px) — primary and accent buttons onlyComponent Application:
{rounded.full} (pill-shaped for affordance){rounded.xs} (3px, subtle){rounded.none} (sharp, premium aesthetic){rounded.none} (flat)The system uses two distinct stroke weights for clarity and hierarchy:
1px — button borders, form field borders at rest, divider rules, general UI definition2px — form input field borders (when active or emphasized)Application:
{colors.hairline} (#000000)The design system uses minimal shadow and relies primarily on color-blocking and layering for depth. A single-tier shadow model is employed:
| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; color or border only | Default state for cards, buttons, most UI elements |
| Modal Overlay | rgba(0, 0, 0, 0.35) 0px 0px 12px 2px | Modals; deep, diffused shadow for prominence |
| Dropdown / Layer Lift | rgba(187, 187, 187, 0.3) 2px 2px 2px 0px | Dropdown menus; subtle float effect |
| Dropdown Alt | rgb(225, 225, 225) 0px 3px 3px 0px | Alternative dropdown variant; minimal lift |
| Focus Ring | rgb(0, 155, 194) 0px 0px 0px 2px inset | Button focus state; brand-colored outline |
Shadow Philosophy: The system prioritizes color-blocking and contrast over shadow depth. Most UI elements—cards, buttons, sections—are flat. Shadows are reserved for:
This approach maintains a clean, modern, product-focused aesthetic while avoiding the visual clutter of aggressive drop shadows.
The system employs opacity for state and visual hierarchy:
Usage:
The system defines a shallow stacking context with base, dropdown, and modal tiers:
Principles:
z-index: auto or low numeric values (1–6){rounded.full} with {colors.primary} #009BC2) for all primary CTAs. Their teal color and soft edges signal confidence and approachability.{rounded.none}) for product displays and content containers. This premium aesthetic differentiates the brand.{spacing.section} (52px) or {spacing.band} (60px) to create clear visual zones.{colors.primary} and {colors.accent} to segment hero and promotional areas. Pair with ample whitespace for editorial impact.{typography.nav}) to signal interactive menus and reinforce hierarchy.{colors.primary} inset ring for accessibility.{rounded.none}).{colors.neutral-1}, {colors.neutral-2}, and the muted scale.{rounded.xs} (3px). Sharp corners ({rounded.none}) are acceptable; avoid {rounded.full} for inputs.| Breakpoint | Viewport Width | Content Max-Width | Columns | Key Changes | Menu Toggle Visible |
|---|---|---|---|---|---|
| Mobile | 375px | 355px | 2 | Full-width sections; stacked nav; 2-column product grid | No |
| Tablet | 768px | 748px | 5 | Wider content; 5-column grid enabled | No |
| Desktop | 1024px | 1004px | 5 | Hero sections expand; full navigation visible | No |
| Large Desktop | 1280px | 1200px | 5 | Max-width enforced; centered layout | No |
| Extra Large | 1440px | 1400px | 5 | Capped at 1400px; largest viewport supported | No |
Observations:
{spacing.md} (16px) or {spacing.xl} (24px).Interactive elements are sized for reliable touch interaction:
{spacing.lg} (20px) height; typically 32–38px measured{typography.body-xs} (13px) to {typography.body-md} (16px); click area enhanced by padding ({spacing.sm} = 12px typical){typography.nav} (14px) with ample surrounding spacingThe layout adapts across breakpoints by:
Product grids:
Section padding:
{spacing.md} (16px) or {spacing.xl} (24px) gutters introducedHero sections:
Navigation:
Sidebar and content:
When implementing UI components, reference these semantic color roles:
{colors.primary} (#009BC2) — Use for primary buttons, links, active states, and hero highlights{colors.accent} (#5C6AC3) — Use for decorative color-blocking and campaign sections{colors.canvas} (#F6F7F9) — Default page background and subtle section alternation{colors.surface-alt} (#FFFFFF) — Card backgrounds, button fills, text on colored backgrounds{colors.ink} (#282828) — Primary headings and prominent text{colors.body} (#414B56) — Standard body copy and secondary information{colors.muted} (#A8AEBA) — Secondary captions and de-emphasized text{colors.hairline} (#000000) — 1px dividers and fine rulesFollow these rules to implement any component or layout variation:
Buttons are always pill-shaped ({rounded.full}) with either {colors.primary} (teal) or {colors.accent} (purple) fill. Secondary buttons are white with sharp corners ({rounded.none}).
Typography hierarchy uses weight shifts in Rajdhani only. No size changes between body and link text; instead, use weight 400 (light), 500 (medium), or 600 (bold) at fixed point sizes.
Spacing follows the scale base (4px). All padding, margins, and gaps are multiples of 4px: 8, 12, 16, 20, 24, 40, 44, 52, 60px. Never use arbitrary values.
Cards and containers remain flat ({rounded.none}, no shadow, white or canvas background). Depth comes from layout, color-blocking, and layering—not drop shadows.
Color-blocked hero sections use full-width bands of {colors.primary} or {colors.accent} with {colors.surface-alt} text. Pair with ample vertical spacing ({spacing.band} = 60px).
Form inputs have 2px borders ({colors.hairline}) with {rounded.xs} (3px) rounding. Focus state: inset shadow with {colors.primary}.
Navigation items are uppercase ({typography.nav}, 14px, 600 weight). Hover state: text color shifts to RGB(51, 51, 51); active state uses {colors.primary}.
Product grids scale responsively: 2 columns at 375px, 5 columns at 768px and above. Max-width container constrains layout; no breakpoint-specific type size changes.
Use {colors.hairline} (pure black) for 1px divider lines. Avoid introducing new stroke colors; stick to the defined palette.
Accessibility: All buttons and links include focus states (2px inset ring in {colors.primary}). Test keyboard navigation and screen reader compatibility.
{colors.accent-1} — #34343C, {colors.neutral-1} — #999999, {colors.neutral-2} — #EAEAEA) were extracted but have no explicit measured role; they are used decoratively or in limited contexts. Their precise purpose in the design system remains ambiguous.Generated from extraction of https://fragrances.com.ng/ on a single homepage view. Covers visible UI components and measured responsive behavior across 375px–1440px viewports. Review under "Known Gaps" for unmeasured surfaces and interaction states.