Navigation
CocktailScout

CocktailScout Design System v2

A fuller tonal system for CocktailScout — brand oxblood and brass each expanded into an 11-step scale, a warm neutral to replace flat gray, and semantic colors with light/base/dark triads. Components below are re-composed on top of these tokens so buttons, cards, tags, callouts and forms have real hover / pressed / muted states instead of relying on opacity-80.

Color

01

Two colors define the brand: Oxblood and Brass. Everything else — warm neutral, blue, semantic greens and reds — is functional. The neutral carries a slight red/amber undertone so it reads as paper-and-ink under gold light.

Primary
Oxblood
cs-red-900 · #330A0A
Accent
Brass
cs-gold-400 · #B6A555
Red — OXBLOOD (DARK RED)
Redcs-red
50 #FEF9F8
100 #F4EFEE
200 #E9DAD8
300 #D0C0BE
400 #BC8F8A
500 #A16F6A
600 #82534E
700 #5D3A37
800 #47211F
900 #330A0A
950 #0F0202
Gold — BRASS (GOLD)
Goldcs-gold
50 #FDFBEE
100 #F4F1E1
200 #EBDFA6
300 #D3C581
400 #B6A555
500 #938016
600 #706000
700 #524500
800 #382D00
900 #221A00
950 #080600
Ink — WARM NEUTRAL
Inkcs-ink
50 #FCF9F9
100 #F2EFEF
200 #E4DCDB
300 #CBC2C0
400 #ACA2A0
500 #887D7C
600 #675E5C
700 #4B4342
800 #322C2B
900 #1E1919
950 #070505
Blue — BLUE (INFO & LINKS)
Bluecs-blue
50 #F5F8FA
100 #EBF0F5
200 #D7E1EB
300 #B3C6D6
400 #8EAAC1
500 #6A8EAC
600 #4D708E
700 #1F486C
800 #183854
900 #10283C
950 #08141E
SEMANTIC — SUCCESS · WARNING · ERROR
Successcs-success
50 #E8F6EC
400 #46B26E
500 #16A34A
700 #0D7A35
Warningcs-warning
50 #FDF6DF
400 #E6AC0E
500 #CA8A04
700 #8D6002
Errorcs-error
50 #FCECEC
400 #E14A4A
500 #DC2626
700 #A01818

Typography

02

Cormorant Garamond (display serif) for headings — evokes classic bar menus. Inter for UI, body copy and numeric ratings. JetBrains Mono for token values, stats and counts.

Display Cocktail Rezepte
H1 / Hero Cocktail Rezepte & deine persönliche Bar
H2 Heute frisch gemixt
H3 / Card Long Island Iced Tea
Body 1.500+ Cocktail Rezepte — und mit Meine Bar siehst du sofort, was du mixen kannst.
Small vor 19 Minuten · von Ripuli
Mono / Stat 1.124.100 views · 14.3% ABV
Eyebrow KATEGORIE · KLASSIKER

Buttons

04
.btn-primary
.btn-gold
.btn-outline
.btn-soft
.btn-ghost
.btn-danger
.btn-link
[disabled]
Sizes
.btn-sm
.btn
.btn-lg
Loading
.btn-loading primary
.btn-loading gold
.btn-loading outline
Button group
On dark surfaces
.btn-gold
.btn-outline-gold
.btn-ghost-dark

Cards

05
Standard Card .card
The default container — white background, thin ink stroke, soft shadow. Works for recipe summaries, settings panels, or any structured content block.
Zuletzt aktualisiert · vor 3 Min.
Elevated Hover .card-elevated
Borderless — lifts to shadow-md on hover. Use for clickable recipe tiles or any card that links somewhere.
Hover to see the shadow rise
Empty State .card-ghost

Noch keine Zutaten in deiner Bar.

Jetzt hinzufügen
Gold Feature .card-gold
Premium highlight for editorial picks, seasonal tips, or curated recommendations. The warm brass gradient signals quality and curation.
Kuratiert von CocktailScout
Dark Feature .card-dark

Inverted look for stat tiles or promo callouts. Oxblood ground, brass accents.

1.5k
Rezepte
14k+
Mitglieder
98%
Zufrieden
Community · täglich frisch
Interactive Card
Headers accept right-aligned action clusters — edit, share, or overflow menus. The ghost button style keeps them unobtrusive.
Long Island Iced Tea Klassiker

Tags & Labels

06
DARK — Brand
Primary Gold
SOFT — Status
Neutral Info Aktiv Review Archiv
SOFT — Category
Klassiker Aperitif Longdrink
MINI — Meta
IBA 14.3% ABV 5 MIN ★ 8.6

Callouts

07
Neutral Callout Nützlich für allgemeine Hinweise oder Randnotizen.
Pro-Tipp Für eine klare Textur: Eis mit einem Muddler vor dem Shaken leicht anstoßen.
Important Enthält Zutaten mit hohem Zuckergehalt — nicht für Diabetiker empfohlen.
Community Notiz Dieses Rezept wurde zuletzt von zoidberg am 14.04. überarbeitet.
Gespeichert Dein Rezept ist in „Meine Bar" verfügbar.
Achtung Eine deiner Zutaten ist in der Community als selten markiert.

Forms

08
TEXT INPUTS — .input-field

Nur Buchstaben, Zahlen und Leerzeichen erlaubt.

Gilt für input, select und textarea gleichermaßen.

CHECKBOXES — .check-field · .check-label
RADIO BUTTONS — .radio-field · .check-label
ERROR STATES — .input-error · .label-error · .check-field-error

Das Passwort ist zu kurz (mind. 8 Zeichen).

Dieses Feld ist erforderlich.

Zustimmung erforderlich

Bitte alle Felder bestätigen.

Kategorie (Pflichtfeld)

Bitte eine Option wählen.

DISABLED — disabled attribute

Deaktivierte Inputs via nativen disabled-Attr.

Einstellungen (gesperrt)

Tables

09
Spirituose Preis Alk. Geschmack Im Sortiment seit
Hendrick's Gin
Gin · Schottland
 34,90 € 41,4 %
BlumigGurkeZitrus
 12.03.2021
Monkey 47
Gin · Schwarzwald
 42,50 € 47,0 %
KräuterWaldbeereWürzig
 05.11.2021
Diplomático Reserva Exclusiva
Rum · Venezuela
 39,80 € 40,0 %
KaramellVanilleSüß
 18.06.2022
Don Julio Blanco
Tequila · Mexiko
 52,00 € 38,0 %
AgaveFrischZitrus
 02.01.2023
Lagavulin 16
Whisky · Islay
 78,90 € 43,0 %
RauchigTorfSalzig
 29.09.2020
Cointreau
Likör · Frankreich
 24,90 € 40,0 %
OrangeSüßFrisch
 08.02.2020

Spacing

10

Base unit is 4px. All spacing, padding, margin, and gap values are multiples of this base. Bars below are rendered at 4× scale for visibility.

SCALE

0.5
2px
1
4px
1.5
6px
2
8px
2.5
10px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
20
80px
24
96px

COMMON USAGE

px-3 py-2 Button padding
px-4 py-3 Input / field padding
p-4 Card inner padding
p-6 Card section padding
gap-1 Tag & badge groups
gap-2 Button groups, form rows
gap-4 Card grids
gap-6 Page sections
mb-4 Form field spacing
mb-8 / mb-12 Section separators

GRID — COLUMN LAYOUTS

grid-cols-1 Detail pages, articles, forms
col 1
grid-cols-2 Split panels, settings, ingredient tables
col 1
col 2
grid-cols-3 Recipe card grids, feature rows
col 1
col 2
col 3
grid-cols-4 Dense thumbnail grids, icon sets
col 1
col 2
col 3
col 4

CONTAINER — MAX WIDTHS

.max-w-sm
384px
.max-w-md
448px
.max-w-xl
576px
.max-w-2xl
672px
.max-w-4xl
896px
.max-w-7xl
1280px