Amerika'dan Alışverişin Adresi | Amerikasepetim

Design Specification — Amerika'dan Alışverişin Adresi | Amerikasepetim

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#212529), a vivid accent (#007BFF). All type is set in "Exo2 Regular". Detected font weights: 400, 500, 700. Detected style signatures: glassmorphism; soft-ui / layered elevation; gradient-rich / aurora; rounded / pill-heavy; technical / mono accents.

Logo asset(s): https://amerikasepetim.com/themes/default/assets/images/logo.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)

Gradients

• linear-gradient(134deg,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.6) 100%)
• linear-gradient(135deg,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.54) 100%,rgba(255,255,255,0.1) 100%)

Typography

Primary typeface: Exo2 Regular — stack: "Exo2 Regular"

Font stacks (most used first)

• "Exo2 Regular"
• "Exo2 Medium"
• "Exo2 SemiBold"
• -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
• "Poppins Regular"
• "Poppins Medium"
• "Poppins SemiBold"
• "Exo2 Bold"
• "Exo2 Black"
• sans-serif

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 500, 700

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 1px 20px -1px rgba(8,6,0,0.15)
• 0 1px 20px -1px rgba(0,0,0,0.15)
• 0 .25rem .75rem rgba(0,0,0,.1)
• none
• 0px 1px 20px -1px rgba(0,0,0,0.15)
• 5px 5px 20px 1px rgba(204,204,204,0.35)

Layout

Container max-width: 720px

Breakpoints

• 575px
• 576px
• 768px
• 991px
• 992px
• 1199px
• 1200px
• 1300px

Animation & Motion

Transitions

• opacity .15s linear
• none
• height .35s ease
• -webkit-transform .3s ease-out
• transform .3s ease-out
• transform .3s ease-out,-webkit-transform .3s ease-out
• height .5s ease-in-out
• transform .1s ease

Easing curves

• linear

Keyframes

@keyframes progress-bar-stripes { from{background-position:1rem 0}to{background-position:0 0} }
@keyframes spinner-border { to{-webkit-transform:rotate(360deg);transform:rotate(360deg)} }
@keyframes spinner-grow { 0%{-webkit-transform:scale(0);transform:scale(0)}50%{opacity:1;-webkit-transform:none;transform:none} }
@keyframes fadeOut { 0%{opacity:1}100%{opacity:0} }
@keyframes fancybox-rotate { 100%{transform:rotate(360deg)} }
@keyframes fancybox-dash { 0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px} }
@keyframes fancybox-fadeIn { from{opacity:0}to{opacity:1} }
@keyframes fancybox-fadeOut { to{opacity:0} }
@keyframes fancybox-zoomInUp { from{transform:scale(0.97) translate3d(0,16px,0);opacity:0}to{transform:scale(1) translate3d(0,0,0);opacity:1} }
@keyframes fancybox-zoomOutDown { to{transform:scale(0.97) translate3d(0,16px,0);opacity:0} }
@keyframes fancybox-throwOutUp { to{transform:translate3d(0,-30%,0);opacity:0} }
@keyframes fancybox-throwOutDown { to{transform:translate3d(0,30%,0);opacity:0} }
@keyframes fromBottom { 0%{transform:translateY(10px)}100%{transform:translate(0px)} }
@keyframes fromTop { 0%{transform:translateY(-10px)}100%{transform:translate(0px)} }
@keyframes fade { 0%{opacity:0}100%{opacity:1} }
@keyframes spin { 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)} }

Animations

• spin 1.7s linear infinite
• fade 0.5s
• 0.5s fade
• 0.3s fade
• 0.5s fromBottom

CTA labels found on page

• BENİM İÇİN AL
• PAKET OLUŞTUR

Effects

• backdrop-filter: blur(10px)

Source Design Tokens (CSS custom properties)

:root {
  --body-bg: #fff;
  --body-color: #212529;
  --brand: #F50;
}

Do's and Don'ts

Do

• Do reserve the accent #007BFF 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): 400, 500, 700.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #FFFFFF;
  --color-text-primary: #212529;
  --color-primary: #FF5500;
  --color-accent: #007BFF;
  --color-surface: #ECECEC;
  --color-secondary: #000000;
  --color-text-secondary: #999896;
  --color-border: #3A3934;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FBFBFB;
  --color-surface-container: #FAFAFA;
  --color-surface-container-high: #F8F9FA;
  --color-surface-container-highest: #F7F7F7;
  --font-sans: "Exo2 Regular";
  --font-size-display: 45px;
  --font-size-headline-lg: 40px;
  --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: 12px;
  --radius-sm: 3.2px;
  --radius-md: 10px;
  --radius-lg: 43px;
  --radius-pill: 100%;
  --shadow-sm: 0 1px 20px -1px rgba(8,6,0,0.15);
  --shadow-md: none;
  --shadow-lg: 5px 5px 20px 1px rgba(204,204,204,0.35);
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 45px;
  --tracking-label: 1.8px;
  --container-max: 720px;
}