Scarlett Official - Shop All - Parfum Terbaik

Design Specification — Scarlett Official - Shop All - Parfum Terbaik

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#A51A5C). All type is set in 'Poppins'. Detected font weights: 300, 400, 500, 600, 700, 800. Detected style signatures: technical / mono accents.

Logo asset(s): https://scarlettofficial.id/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fscarlett-brand.ecb7a2c4.png&w=256&q=100 · https://scarlettofficial.id/_next/static/media/scarlett_logo.32c4f6af.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Typography

Primary typeface: Poppins — stack: 'Poppins'

Font stacks (most used first)

• 'Poppins'
• __Poppins_6bee3b
• 'Bricolage Grotesque'
• swiper-icons
• inherit
• system-ui,sans-serif
• SFMono-Regular,Menlo,Monaco,Consolas,monospace
• var(--ui-fonts-body)
• Poppins,sans-serif
• ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace

Web font sources

• fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz@12..96&family=Poppins:wght@300;400;500;600&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 500, 600, 700, 800

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 0 0 1px

Layout

Container max-width: 1280px

Grid columns (largest detected grid): 12

Breakpoints

• 30em
• 640px
• 768px
• 48em
• 1024px
• 1280px
• 80em
• 1440px

Animation & Motion

Transitions

• opacity .3s
• background-color .2s ease,color .2s ease

Easing curves

• cubic-bezier(0.4, 0, 1, 1)
• cubic-bezier(0, 0, 0.2, 1)
• cubic-bezier(0.4, 0, 0.2, 1)
• var(--ui-transition-easing-ease-in)
• var(--ui-transition-easing-ease-out)
• cubic-bezier(.4,0,.2,1)
• var(--swiper-wrapper-transition-timing-function,initial)

Keyframes

@keyframes nprogress-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes animation-14pkoxc { from{border-color:var(--skeleton-start-color);background:var(--skeleton-start-color);}to{border-color:var(--skeleton-end-color);background:var(--skeleton-end-color);} }
@keyframes tw-marquee { 0%{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--gap)))} }
@keyframes tw-marquee-vertical { 0%{transform:translateY(0)}to{transform:translateY(calc(-100% - var(--gap)))} }
@keyframes tw-pulse { 50%{opacity:.5} }
@keyframes enter { 0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))} }
@keyframes exit { to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))} }
@keyframes swiper-preloader-spin { 0%{transform:rotate(0deg)}to{transform:rotate(1turn)} }
@keyframes activity-slider-in { 0%{transform:translateZ(0) scale(.5);opacity:0}50%{transform:translateZ(0) scale(1.05);opacity:1}to{transform:translateZ(0) scale(1);opacity:1} }
@keyframes activity-slider-out { 0%{transform:translateZ(0) scale(1);opacity:1}50%{transform:translateZ(0) scale(.5);opacity:0}to{transform:translateZ(0) scale(.5);opacity:0} }
@keyframes shake-animation { 0%{transform:translate(0)}1.78571%{transform:translateY(5px)}3.57143%{transform:translate(0)}5.35714%{transform:translateY(5px)}7.14286%{transform:translate(0)}8.92857%{transform:translateY(5px)}10.71429%{transform:translate(0)}to{transform:translate(0)} }
@keyframes shake { 0%{transform:translate(1px,1px) rotate(0deg)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0deg)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0deg)}to{transform:translate(1px,-2px) r }

Animations

• 0.8s linear infinite alternate animation-14pkoxc
• none
• tw-marquee var(--duration) linear infinite
• tw-marquee-vertical var(--duration) linear infinite
• shake-animation 5s ease 0s

CTA labels found on page

• Sort By.css-1hzyiq5{display:-webkit-inline-box;display:-webk
• Categories.css-1hzyiq5{display:-webkit-inline-box;display:-w
• .css-xl71ch{pointer-events:none;-webkit-flex:1 1 auto;-ms-fl
• 1
• 2

Source Design Tokens (CSS custom properties)

:root {
  --main-font: '__Poppins_6bee3b', '__Poppins_Fallback_6bee3b';
  --chakra-ring-inset: var(--chakra-empty,/*!*/ /*!*/);
  --chakra-ring-offset-width: 0px;
  --chakra-ring-offset-color: #fff;
  --chakra-ring-color: rgba(66, 153, 225, 0.6);
  --chakra-ring-offset-shadow: 0 0 #0000;
  --chakra-ring-shadow: 0 0 #0000;
  --chakra-space-x-reverse: 0;
  --chakra-space-y-reverse: 0;
  --ui-colors-transparent: transparent;
  --ui-colors-current: currentColor;
  --ui-colors-black: #000000;
  --ui-colors-white: #FFF;
  --ui-colors-whiteAlpha-50: rgba(255, 255, 255, 0.04);
  --ui-colors-whiteAlpha-100: rgba(255, 255, 255, 0.06);
  --ui-colors-whiteAlpha-200: rgba(255, 255, 255, 0.08);
  --ui-colors-whiteAlpha-300: rgba(255, 255, 255, 0.16);
  --ui-colors-whiteAlpha-400: rgba(255, 255, 255, 0.24);
  --ui-colors-whiteAlpha-500: rgba(255, 255, 255, 0.36);
  --ui-colors-whiteAlpha-600: rgba(255, 255, 255, 0.48);
  --ui-colors-whiteAlpha-700: rgba(255, 255, 255, 0.64);
  --ui-colors-whiteAlpha-800: rgba(255, 255, 255, 0.80);
  --ui-colors-whiteAlpha-900: rgba(255, 255, 255, 0.92);
  --ui-colors-blackAlpha-50: rgba(0, 0, 0, 0.04);
  --ui-colors-blackAlpha-100: rgba(0, 0, 0, 0.06);
  --ui-colors-blackAlpha-200: rgba(0, 0, 0, 0.08);
  --ui-colors-blackAlpha-300: rgba(0, 0, 0, 0.16);
  --ui-colors-blackAlpha-400: rgba(0, 0, 0, 0.24);
  --ui-colors-blackAlpha-500: rgba(0, 0, 0, 0.36);
  --ui-colors-blackAlpha-600: rgba(0, 0, 0, 0.48);
  --ui-colors-blackAlpha-700: rgba(0, 0, 0, 0.64);
  --ui-colors-blackAlpha-800: rgba(0, 0, 0, 0.80);
  --ui-colors-blackAlpha-900: rgba(0, 0, 0, 0.92);
  --ui-colors-gray-50: #F7FAFC;
  --ui-colors-gray-100: #EDF2F7;
  --ui-colors-gray-200: #E2E8F0;
  --ui-colors-gray-300: #CBD5E0;
  --ui-colors-gray-400: #A0AEC0;
  --ui-colors-gray-500: #718096;
  --ui-colors-gray-600: #4A5568;
  --ui-colors-gray-700: #2D3748;
  --ui-colors-gray-800: #1A202C;
  --ui-colors-gray-900: #171923;
  --ui-colors-red-50: #FFF5F5;
  --ui-colors-red-100: #FED7D7;
  --ui-colors-red-200: #FEB2B2;
  --ui-colors-red-300: #FC8181;
  --ui-colors-red-400: #F56565;
  --ui-colors-red-500: #E53E3E;
  --ui-colors-red-600: #C53030;
  --ui-colors-red-700: #9B2C2C;
  --ui-colors-red-800: #822727;
  --ui-colors-red-900: #63171B;
  --ui-colors-orange: #F9A83D;
  --ui-colors-yellow: #FFC549;
  --ui-colors-green-50: #F0FFF4;
  --ui-colors-green-100: #C6F6D5;
  --ui-colors-green-200: #9AE6B4;
  --ui-colors-green-300: #68D391;
  --ui-colors-green-400: #48BB78;
}

Do's and Don'ts

Do

• Do reserve the accent #A51A5C for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 300, 400, 500, 600, 700, 800.
• Do align spacing to the 4px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add gradients — the source page uses flat fills exclusively.

Design Tokens (copy-paste)

:root {
  --color-primary: #ED5089;
  --color-accent: #A51A5C;
  --color-background: #FFFFFF;
  --color-surface: #FEF3F6;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #828F9B;
  --color-border: #FFCAE3;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #E2E8F0;
  --color-surface-container: #CBD5E0;
  --font-sans: 'Poppins';
  --font-size-display: 72px;
  --font-size-headline-lg: 36px;
  --font-size-headline-md: 30px;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12.5px;
  --radius-sm: 6px;
  --radius-md: 7px;
  --radius-pill: 50%;
  --shadow-md: 0 0 0 1px;
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --tracking-label: 0.3px;
  --container-max: 1280px;
}