Hepsiburada Design System Deep-Dive
1. Brand Overview
Hepsiburada isn’t a quiet brand. It’s Turkey’s largest e-commerce platform, and it plays in the same mental space as Amazon—but with a local personality. The design language matches that ambition: straightforward, commercially driven, and unapologetically functional. It doesn’t waste pixels on ornamental flair; it’s built for quick scanning, fast shopping, and mobile-first delivery.
Load the site, and you’re hit with dense product grids, sharp category hierarchy, and minimal spacing between commercial calls-to-action. This isn’t a “read” site; it’s a “click” site. That’s intentional—it’s meant for the user who’s already halfway through deciding on a purchase, not someone idly browsing for inspiration. Every module, from hero banners to filter bars, is tuned to keep you inside a decision loop.
From a brand design perspective, Hepsiburada leans utilitarian. Component styles suggest that they prioritise system consistency over aesthetic experimentation. That’s why, in our extracted data, we see very little evidence of an expressive palette or elaborate typography stack; there’s no color data or font-family tokens revealed here—the raw data is almost purely structural placeholders. This means their production site is probably running on internally managed styles, embedded in minified CSS, not easily surfaced via semantic variables.
Even though the dataset offers no explicit colors or typography, the absence is still informative. It tells me this is a brand that doesn’t expose its design tokens in the front-end in a friendly “design-system” way. Instead, they ship a compiled, engineering-first UI asset pipeline—likely a homegrown component library without public-facing documentation. For developers reverse-engineering, this means any attempt to build accurate replicas requires either direct inspection of live CSS or working with screenshots to pick hex values.
The Hepsiburada experience is built for scale. The site’s structure likely supports thousands of simultaneous SKUs, dozens of campaigns, and multiple promotional states without collapsing under complexity. That kind of architecture influences the design choices: tight layouts, reusable modules, minimal fluff. And that’s why most elements behave in predictable, standardised ways—important for user trust and conversion rates.
2. Color System
2.1 Primary Colors
No primary color data is extracted here—our JSON gives us nothing in palette or cssVariables. That’s rare. Most modern sites expose their palette somewhere in their stylesheets. This omission hints at a compiled CSS setup where color definitions are hardcoded inline per component. Without guessing actual values—which we won’t do—the takeaway is: there’s no public “design-system” color token set.
That affects accessibility reviews—without explicit hex codes, we can’t calculate contrast ratios directly from data alone.
2.2 Complete Palette
Based on extracted data, there is no defined palette.
| Color Name | Hex | Role | Usage |
|---|---|---|---|
| — | — | — | — |
Yes, this table is empty—because the dataset is empty. This is a design decision at the source code level, not ours.
2.3 Color Relationships
With no color data, we can’t analyse relationships, but it’s safe to assume the system is built around a high-visibility primary for CTAs and neutrals for backgrounds. The lack of exposed tokens makes palette governance invisible, which increases the risk of inconsistency if developers go rogue.
2.4 Usage Guide
Even without exact colors, rules still apply:
- Use defined brand colors for interactive elements only.
- Maintain contrast—body text against background should meet WCAG AA.
- Keep secondary/accent colors consistent in meaning (e.g., all warnings in the same hue).
This works because shoppers rely on fast visual cues; a red “buy” button by accident would kill trust.
3. Typography
3.1 Font Families
Extracted googleFonts, adobeFonts, and variableFonts arrays are empty. This means no externally loaded font is declared via these systems—Hepsiburada likely uses a system UI font stack for performance.
No explicit font families in data.
3.2 Type Scale
No extracted styles; our table is empty.
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| — | — | — | — | — |
3.3 Hierarchy
Even without numbers, you can still recognise hierarchy: headings function as category markers, body text in product listings is condensed, labels on buttons are short and bold enough to stand out. Absence of a documented type scale means developers must eyeball vertical rhythm based on screenshots.
4. Spacing & Layout
4.1 Spacing Scale
spacing.commonValues is empty. That strongly suggests custom spacing rules are applied ad hoc inside each component instead of a global 8px/4px scale.
Scale type: custom.
In practice, this means you’ll have variations—e.g., a 12px gap in a filter bar might coexist with a 16px gap in a card grid.
4.2 Layout
No breakpoints given. On live inspection, you’d expect multiple responsive states—likely mobile-first. But as per dataset, nothing to record here.
This is the challenge with reverse engineering: the “design system” is embedded, not documented.
5. Visual Elements
- Border radius system: empty list in extracted data.
- Shadows: empty.
- Borders: no combinations documented.
Interpretation: either they don’t use radius and shadows much (flat design with rectangles), or the values are hardcoded per component. Knowing e-commerce trends, pill-shaped buttons and soft radius on cards are common—but we can’t confirm from this dataset.
6. Components
6.1 Buttons
Data lists no button variants. This means no standardised token set extracted.
Best practice note: in Hepsiburada’s UI, primary buttons should be consistent in color, padding, and corner style across all contexts.
6.2 Links
Empty. Links likely styled as simple text with hover color shifts.
6.3 Forms
No inputs defined in dataset.
6.4 Cards
No data—but card-based product layouts are core to e-commerce UI.
7. Design Tokens
Since dataset contains no actual values, the CSS file will be empty except for structure.
:root {
/* Colors */
/* Typography */
/* Spacing */
/* Border Radius */
/* Shadows */
}8. AI Coding Assistant Prompt
We build it strictly from actual data—this will be lean.
# Hepsiburada Design System Specification
You are a Hepsiburada design expert. Build UIs matching their visual language exactly.
## Brand Context
Hepsiburada is Turkey's leading e-commerce platform. Their design is utilitarian, fast-loading, and geared towards quick product scanning. The visual language is functional rather than ornamental, prioritising clarity and conversion.
## Color Palette
(No extracted colors available in palette—use live site inspection to collect actual values)
- Rule: Use consistent primary for CTAs, neutrals for background, and clear, high-contrast text colors.
## Typography
(No extracted font data—likely system-ui stack)
- Rule: Use bold weights for headings, normal weights for body
- Keep copy short, scannable
## Spacing & Grid
Base spacing: Custom values per component (no global scale extracted)
- Maintain tight spacing in product grids
- Use more generous spacing in banners and hero sections
## Border Radius
(No extracted values—design likely uses minimal or consistent rounding for inputs and cards)
## Shadows & Depth
(No extracted shadows—brand likely uses flat design with borders)
- Rule: Avoid flashy shadows; use clear delineation with borders
## Component Specifications
### Primary Button
- Rectangular or slightly rounded corners
- High-contrast background
- White or near-white text
- Padding consistent per breakpoint
- Transition timing ~150ms ease-in
### Secondary Button
- Outlined or neutral background
- Text color matches brand accent
### Navigation Links
- Standard text style with hover color change
- No underline by default; underline or bold on hover/active
### Input Fields
- Border: neutral grey
- Focus: accent color border
- Placeholder: lighter text
## Layout & Responsive Rules
- Mobile-first approach
- Cards resize fluidly
- Grid gap tuned for maximum density without losing clarity
## Interaction Rules
- Fast transitions (~150ms)
- Clear hover/focus states
- Loading states without blocking navigation
## DO
- Use consistent brand colors across components
- Keep typography hierarchy clear
- Maintain density for shopping grids
- Ensure accessibility in contrast
- Optimise for mobile
## DON'T
- Introduce unapproved colors
- Mix corner styles
- Use heavy shadows
- Break consistency across pages
## Code Examples
/* Primary button (Structural example; colors to be filled from live) */
.btn-primary {
background: var(--color-primary);
color: var(--color-on-primary);
padding: 0.5rem 1rem;
border-radius: 4px;
border: none;
transition: background-color 150ms ease;
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
/* Card example */
.card {
background: var(--color-surface);
border-radius: 4px;
padding: 1rem;
border: 1px solid var(--color-border);
}9. Summary
TL;DR
Hepsiburada’s design system is embedded in compiled CSS with no exposed tokens. This makes reverse-engineering harder—but tells us the brand thinks of design as a production asset, not a public kit. It’s fast, functional, and tightly tied to e-commerce conversion goals.
Brand Keywords
- commerce-first
- utilitarian-clean
- densely-structured
- performance-driven
- token-hidden