Skroutz Design System Deep Dive

1. Brand Overview

Skroutz is a Greek e-commerce aggregator and marketplace platform. Think Amazon meets price comparison, but with a distinctly local personality. The design language leans clean, utilitarian, and transactional—this isn’t about lifestyle storytelling, it’s about product discovery and purchase efficiency. The UI is built to handle a ton of information without feeling cluttered. You get dense grids, multiple price points, vendor listings, specs, ratings—all in an interface that still looks approachable.

The vibe is functional minimalism with a dash of warmth. The functional side comes from the heavy use of neutral grays and black (#101010, #707070, #363636), precise typography (TT Commons Pro throughout), and a strict 8px spacing scale. The warmth shows up in the brand accent orange (#f68b24) and some friendly rounded corners (8px and 16px radii are everywhere). They’ve built a color token system that’s not just “brand + gray”—there are entire sub-palettes for marketplace greens, informational blues, danger reds, and “plus” purples. This is a marketplace that has visual language for different product categories baked into the design.

The target audience is broad—anyone from deal hunters to brand-conscious buyers—but the design clearly prioritizes clarity over ornamentation. You won’t find big hero images dominating the above-the-fold; instead, you get immediate search, category navigation, and product cards. This works because Skroutz’s value proposition is speed and accuracy in finding the right product at the right price.

From a designer’s perspective, this system is tight. They’re consistent with their grid, their type hierarchy is shallow but effective, and their use of semantic color tokens keeps category-specific styling under control. From a developer perspective, the Vuetify framework backbone means component behavior is predictable. I love that they’ve resisted the temptation to overcomplicate hover/active states—most interactions are subtle but clear. The only odd choice: some buttons have font-size: 0px in the data (icon-only buttons), which is functional but you have to be careful with accessibility.

2. Color System

2.1 Primary Colors

Primary is rgb(16, 16, 16) → #101010. It’s a near-black, used for text, headers, and some button backgrounds. Psychologically, black conveys authority and clarity. In a high-density content site like Skroutz, it’s a safe anchor color—everything else hangs off this. It’s less harsh than pure #000, but still high contrast on white (#ffffff) backgrounds.

Their bright accent is #f68b24—a saturated orange. This is the attention-grabber for hover/focus states and some link accents. Orange in e-commerce says “act now” without the aggression of pure red. Compared to competitors like Amazon’s #FF9900, Skroutz’s orange is slightly deeper and more vivid.

There’s also a strong secondary brand blue: #0971c8. This shows up in CTAs, follow buttons, and image highlights. Blue is trust, reliability—often used for “safe” actions.

2.2 Complete Palette

2.3 Color Relationships

There’s a pattern: neutrals hold the structure, semantic colors flag actions and categories. Primary text (#101010) on white (#ffffff) is AAA contrast per WCAG. The blues (#0971c8, #2898f5) on white also meet contrast for accessibility. The orange (#f68b24) on white is borderline AAA for large text but fine for UI accents. They avoid low-contrast combos except for disabled states (#bbb on #f1f1f1), which is intentional.

There’s no explicit dark mode in the tokens—these are all light-mode oriented. Dark backgrounds (Marketplace Green 10, Plus BG 9) are category-specific, not global themes.

2.4 Usage Guide

Works:

• #101010 text on #ffffff background—clean, high contrast.
• #0971c8 buttons on white—trustworthy and visible.
• #f68b24 for hover/focus—draws attention without screaming.

Avoid:

• Orange text on dark green backgrounds—low contrast.
• Gray (#707070) text on #f1f1f1 for anything critical—too muted.
• Using category colors outside their contexts—breaks semantic consistency.

3. Typography

3.1 Font Families

Everything is TT Commons Pro. No fallbacks listed in data, so it’s likely custom/self-hosted. No Google or Adobe font sources in the data. That’s bold—single font family means consistency but you have to handle weights carefully.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is subtle. The largest size is 22px—there’s no huge jump to 32px+ you see in marketing sites. This keeps the interface compact. Headings use 700 weight for emphasis, body and captions stick to 400–500. Uppercase is reserved for smaller headings and links—good for labels and category names. The shallow scale means you rely on weight and spacing more than size for hierarchy. Works well for dense product grids.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. Values are multiples or halves:

4.2 Layout

Breakpoints range from 300px up to 1920px. They’re clearly tuned for mobile-first, then scale up through tablet, small desktop, large desktop. Vuetify grid system likely handles container widths—no fixed max width in the data, but given breakpoints, expect content to reflow aggressively.

5. Visual Elements

Border Radius

They love rounded corners. Common values:

• 4px: inputs, buttons, badges
• 8px: cards, images
• 16px: badges, modals
• 25px: pill-ish containers
• 26px: search input (very pill)
• 32px: large buttons
• 50%: avatars, circular buttons

Shadows

Primary shadow: rgba(0, 0, 0, 0.18) 0px 0px 8px — soft, subtle, used for floating elements. Small shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px. Not heavy—depth is minimal.

Borders

1px solid with various grays (#bbbbbb, #f1f1f1, #e8e8e8). Borders are used more than shadows for separation.

6. Components

6.1 Buttons

Example: Slider button (.slider-btn):

Default:

• BG: #ffffff
• Color: #707070
• Padding: 0px
• Radius: 50%
• Border: none
• Shadow: rgba(0,0,0,0.18) 0px 0px 8px
• Opacity: 0.9

Hover:

• BG: #e21915
• Color: #000000
• Border: 1px solid #bbbbbb

Active:

• BG: #f68b24
• Color: var(--color-icon-base-0)
• Transform: scale(0.9)

Focus:

• BG: var(--color-background-informative-6)
• Color: var(--color-text-base-0)

Icon-only buttons often have font-size: 0px—accessibility watch.

6.2 Links

Default colors vary from transparent to #707070 to #101010. No underline by default, underline on hover. Color shifts to var(--color-icon-neutral-8) on hover.

6.3 Forms

Search input:

• Default BG: #f1f1f1
• Border: none (transparent)
• Radius: 26px
• Padding: 16px 140px 16px 46px
• Focus BG: transparent
• Focus Border: #f68b24
• Focus shadow: rgba(9, 113, 200, 0.1) 0px 0px 0px 2px

6.4 Cards

Borders: 1px solid #e8e8e8. Radius: 8px or 16px. Shadows: minimal or none.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #101010;
  --color-secondary-transparent: transparent;
  --color-neutral-gray: #707070;
  --color-white: #ffffff;
  --color-dark-gray: #363636;
  --color-brand-blue: #0971c8;
  --color-black: #000000;
  --color-gray-153: #999999;
  --color-gray-241: #f1f1f1;
  --color-gray-187: #bbbbbb;
  --color-brand-orange: #f68b24;
  /* ... include ALL semantic colors from palette ... */

  /* Typography */
  --font-family-base: "TT Commons Pro";
  --font-size-xxl: 22px;
  --font-size-xl: 18px;
  --font-size-lg: 16px;
  --font-size-md: 14px;
  --font-size-sm: 13px;
  --line-height-tight: 1.35;
  --line-height-normal: 1.40;
  --line-height-loose: 1.60;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-50: 50px;
  --space-80: 80px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 25px;
  --radius-pill: 26px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.05) 0px 1px 2px;
  --shadow-md: rgba(0, 0, 0, 0.18) 0px 0px 8px;
}

8. AI Coding Assistant Prompt

# Skroutz Design System Specification

You are a Skroutz design expert. Build UIs matching their visual language exactly.

## Brand Context
Skroutz prioritizes functional clarity with subtle warmth. Interfaces are dense but legible, with a strict 8px grid and consistent typography. Semantic color tokens define category and action contexts.

## Color Palette
- Primary: #101010 — Text, headers, icons
- Neutral Gray: #707070 — Secondary text, icons
- White: #ffffff — Background, text on dark
- Dark Gray: #363636 — Icon/text in actions
- Brand Blue: #0971c8 — CTAs, follow buttons
- Black: #000000 — Icon counts
- Gray 153: #999999 — Disabled text
- Gray 241: #f1f1f1 — Inputs BG
- Gray 187: #bbbbbb — Borders
- Brand Orange: #f68b24 — Hover/focus accents
[... include all extracted colors with usage ...]

## Typography
Font family: "TT Commons Pro"

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| Button LG | 22px | 400 | 1.40 | Icon buttons |
| H1 | 22px | 700 | 1.40 | Page titles |
| Link LG | 22px | 700 | 1.40 | Navigation links |
| H1 | 18px | 700 | 1.40 | Section titles |
| Body | 16px | 400 | 1.60 | Main text |
| Label | 14px | 500 | 1.40 | Form labels |
| Caption | 13px | 400 | 1.40 | Meta info |

## Spacing & Grid
Base: 8px. Scale: 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 50, 80px.

## Border Radius
- sm: 4px — inputs, small buttons
- md: 8px — cards
- lg: 16px — large cards
- xl: 25px — pill containers
- pill: 26px — search input
- full: 50% — circular buttons, avatars

## Shadows & Depth
- md: rgba(0,0,0,0.18) 0px 0px 8px
- sm: rgba(0,0,0,0.05) 0px 1px 2px

## Components

### Primary Button
Default:
```css
background: #ffb800;
color: #101010;
padding: 8px 16px;
border-radius: 32px;
border: none;
font-weight: 500;
font-size: 16px;
```
Hover: background: #db6921;  
Focus: outline: 1px solid #0863b0;  
Active: background: #ba8600; transform: scale(0.9);

### Secondary Button
BG: transparent; border: 1px solid #e8e8e8; color: #101010; hover BG: #6e37e2.

### Navigation Links
No underline by default; underline on hover; color shifts to neutral-8.

### Input Fields
BG: #f1f1f1; radius: 26px; padding: 16px 140px 16px 46px; focus border: #f68b24; focus shadow: rgba(9,113,200,0.1) 0px 0px 0px 2px.

### Card
BG: #ffffff; border: 1px solid #e8e8e8; radius: 8px; padding: 16px.

## Layout & Responsive Rules
Breakpoints: 300px → 1920px. Mobile-first scaling. Maintain 8px grid gaps.

## Interaction Rules
Transitions: 150ms ease for state changes. Focus indicators: 1px solid category color. Loading states: opacity changes.

## DO
- Use only palette colors
- Maintain 8px grid
- Use TT Commons Pro for all text
- Map category colors to correct contexts
- Keep hover states subtle

## DON'T
- Invent new colors
- Mix sharp and rounded corners
- Overuse shadows
- Set font-size: 0px for text elements

## Code Examples

Primary button:
```css
.btn-primary {
  background: #ffb800;
  color: #101010;
  padding: 8px 16px;
  border-radius: 32px;
  font-size: 16px;
  font-weight: 500;
}
.btn-primary:hover { background: #db6921; }
.btn-primary:focus { outline: 1px solid #0863b0; }
```

Card:
```css
.card {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 16px;
}
```

Input:
```css
.input-search {
  background: #f1f1f1;
  border-radius: 26px;
  padding: 16px 140px 16px 46px;
}
.input-search:focus {
  border-color: #f68b24;
  box-shadow: rgba(9,113,200,0.1) 0px 0px 0px 2px;
}
```

9. Summary

TL;DR: Skroutz’s design system is functional, category-aware, and built for dense product data. Black/gray neutrals keep it grounded, semantic colors add clarity. TT Commons Pro type, 8px grid, and consistent corner rounding make it tight.

Brand Keywords:

• functional-minimalist
• category-semantic
• grid-disciplined
• subtle-warmth