# Korkodilosathens · Design system migration spec

> Source: https://korkodilosathens.com  ·  Curated by OpenDesign  ·  en

> This casino platform demonstrates how dark themes with metallic accents can create premium positioning while remaining functional and conversion-focused through clear CTAs.

## 1. Identity DNA

The design system for Korkodilos Athens operates with the spatial logic of a high-end casino lobby — a curated environment where darkness is not an absence but a material, and gold functions as the single, authoritative accent that guides attention. Every decision, from typographic weight to section padding, reinforces a singular premise: that exclusivity is achieved through restraint, not accumulation.

**One-liner:** A premium, dark-themed casino platform combining luxurious gold accents with bold typography to create an immersive entertainment destination.
**Keywords:** Casino · Entertainment · Luxury · Digital Platform
**Analogy:** A high-end digital casino lobby that feels exclusive yet accessible

## 2. Color

The palette is a study in deliberate reduction, built on near-black grounds (#0D0F14, #1A1D28) that establish a sense of depth and enclosure. Gold (#D4AF37) appears as the sole accent, reserved exclusively for interactive elements and trust signals, creating a binary visual language of dark surface and precious highlight.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0D0F14` | main background |
| `--bg-soft` | `#1A1D28` | card background |
| `--bg-quiet` | `#131620` | quiet area |
| `--ink` | `#E5E7EB` | body text |
| `--muted` | `#9CA3AF` | placeholder |
| `--accent` | `#D4AF37` | single accent |
| `--line` | `rgba(42, 46, 66, 1.0)` | divider |

**Color principle:** Dark luxury with gold accents creating a premium casino atmosphere

Color in this system is not decorative but functional — a strict hierarchy where gold denotes action and trust against a field of controlled darkness.

## 3. Typography

Typography employs Inter as a humanist sans-serif, leveraging its clarity for the extensive information hierarchy of a gaming platform. Bold weights (700–800) are non-negotiable for all display text, creating a confident, imperative voice, while a generous 1.7 line-height on body copy ensures legibility against dark backgrounds.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 800 | -1px | Main headline welcome message |
| h2 | 32px | 1.2 | 700 | 0 | Section headers like 'Start in 3 Steps' |
| h3 | 20px | 1.3 | 700 | 0 | Card titles for game categories |
| body | 16px | 1.7 | 400 | 0 | Descriptive paragraph text |
| small | 14px | 1.5 | 400 | 0 | Card descriptions and secondary text |
| stat | 32px | 1.2 | 800 | 0 | Large numbers like '8.000+' and '3.000€' |

**Type rules:**
- Bold weights (700-800) for headlines and statistics to create visual hierarchy
- Generous line-height (1.7) for body text to improve readability on dark backgrounds
- Tight line-height (1.1-1.2) for display text to create impactful headlines

## 4. Spacing

The rhythm is measured and generous, establishing a consistent vertical cadence through 24px and 32px increments between elements, and expanding to a full 80px of breathing room between major content sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 80 / 96 px
- **Rhythm:** Consistent 24px/32px vertical spacing with generous 80px section padding

## 5. Surfaces

Surfaces are defined by subtle, layered depth rather than overt decoration. Cards and inputs rest on a slightly elevated dark ground (#1A1D28) with a 1px border in a muted blue-grey, while a restrained two-layer shadow system provides just enough lift to separate elements from the primary black ground.

- **Radius:** sm 8px · md 12px · lg 20px · pill 999px
- **Shadows:**
  - 0 4px 6px -1px rgba(0, 0, 0, 0.1)
  - 0 2px 4px -1px rgba(0, 0, 0, 0.06)
- **Borders:** 1px solid rgba(42, 46, 66, 1.0) on cards, gold borders on buttons

## 6. Layout

The layout skeleton is built on a full-width, centered column, beginning with a dominant hero section that commands immediate attention. Below, content resolves into 2- and 3-column card grids, maintaining consistent alignment and generous horizontal margins that prevent visual crowding.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width dark hero with centered content, 2-column card grids below

## 7. Motion & Interaction

Motion is treated as a polish layer, not a narrative device. All transitions are smooth and measured at 0.25s, applied consistently to color and transform changes on interactive elements to provide feedback without disrupting the platform's composed, luxurious pace.

- **Durations:** micro 220ms · small 250ms · medium 350ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Color transitions on hover (0.25s)
  - Transform transitions on interactive elements (0.25s)
  - Max-height transitions for expandable content (0.35s)

- **Hover:** Color change on navigation items, subtle transform on buttons
- **Click:** Immediate visual feedback with color transitions
- **Transition:** Smooth 0.25s color and transform transitions throughout
- **Keyboard:** Standard focus states with visible outlines

## 8. Voice & Don'ts

The editorial voice is confident and welcoming, balancing luxurious exclusivity with clear, action-oriented propositions. Headlines lean on bold, imperative statements in Greek, while calls-to-action communicate specific value — a tone that is premium but never aloof.

- **Tone:** Confident, luxurious, and welcoming
- **Headline style:** Bold, imperative statements in Greek that emphasize exclusivity and experience
- **CTA style:** Action-oriented with clear value propositions (e.g., 'Claim 3.000€ Bonuses')
- **Avoid:** Cheap or discount-focused language / Overly casual or playful tone / Cluttered visual hierarchy

### Don'ts
- ❌ Don't use bright or neon colors — screenshot shows a restrained dark palette with gold accents only
- ❌ Don't use decorative or serif fonts — screenshot shows clean humanist sans-serif throughout
- ❌ Don't create crowded layouts — screenshot shows generous 80px vertical spacing between sections
- ❌ Don't use thin or light font weights for headlines — screenshot shows bold 700-800 weight for all headers
- ❌ Don't use rounded pill shapes for cards — screenshot shows 12px border-radius on card components
- ❌ Don't use white backgrounds — screenshot shows consistent dark theme (#0D0F14 to #1A1D28)
- ❌ Don't use small text for statistics — screenshot shows large 32px bold numbers for key metrics

The system deliberately avoids bright neons, decorative serifs, cramped layouts, and thin font weights — each exclusion reinforcing the foundational principle of restrained, dark luxury.

## System Prompt (paste into AI tool)

```
This is a premium online casino platform with a luxurious dark theme. The design uses a sophisticated color palette centered on very dark backgrounds (#0D0F14 primary, #1A1D28 cards) with gold (#D4AF37) as the dominant accent color for buttons, highlights, and trust signals. Typography is humanist sans-serif (Inter) with bold weights (700-800) creating strong visual hierarchy. Key characteristics include generous vertical spacing (80px sections), 12px border-radius on cards, and gold gradient buttons. Critical don'ts: never use bright or neon colors (the palette is strictly dark + gold), never use thin font weights for headlines (bold is essential), and never create cramped layouts (generous whitespace is fundamental to the premium feel). The design balances exclusivity with accessibility through clear CTAs and trust-building statistics.
```