One black page,
one gradient.
How every Aftergroup product looks: the hand-drawn A, black and white with a single rose to purple gradient, two typefaces and one shape. Use this page to get our logos right, or to build something that sits next to ours.
01
Pure black, white type, hairline white strokes.
02
Colour comes from one place only: the rose to purple gradient.
03
Square shapes that rise into an arch on top, like the stroke of the A.
The hand-drawn A
A single brush-stroke A is shared by every product, and each wordmark pairs it with the product's name. The files are white on transparent and made for black grounds. Keep clear space of at least half the A's height around them, and do not recolour, outline, stretch or set them on a busy photo.
Black and white, then the gradient
Every surface is black, every word is white, and colour arrives only through the gradient. The tints exist for small jobs like focus rings and status, never as fills.
Signature gradient
linear-gradient(120deg, #eaa3c2 0%, #b072d4 52%, #6f52c8 100%). Used for active filters, hover text, overlays on artwork and the gradient band. Keep it at 120°.
Core and surfaces
Black
#000000
The page ground, everywhere.
White
#FFFFFF
Type, strokes and solid buttons.
Card
#0D0D0D
Cards, sheets and side panels.
Surface
#1A1A1A
Quiet fills and placeholders.
Line
#333333
Dividers and card borders.
Muted text
#A9A9B1
Secondary copy and field outlines.
Tints
Blush
#E79EC0
Focus rings, labels and accent text.
Blush deep
#CF6F9D
Blush on a lighter ground.
Indigo
#748CFC
Brand blue, used sparingly.
Indigo deep
#4A63D8
Checkboxes and the text caret.
Status
Error
#C75223
Errors and destructive actions.
Success
#389474
Confirmations.
Anek Telugu over IBM Plex Sans
Two Google Fonts. Weight steps hard between levels: 800 for display, 400 for body, 600 for labels and 700 for bold.
Display · Anek Telugu
Aa
500600700800
Every heading. Tracking −0.02em, tightening to −0.03em on section heads and −0.04em on the hero.
Body · IBM Plex Sans
Aa
400500600700
Everything else, including forms. It carries Cyrillic, so in Bulgarian it also sets the headings, at 700.
Scale
Hero
52 → 72 → 96px · −0.04em
- Sofia tonight
Section
clamp(36px, 5vw, 56px) · −0.03em
- Menus that sell
Page title
36 → 48px · −0.03em
- Book the night out
Card heading
22px / 28px · −0.03em
- Suggested cities
Lead
15.5px · line 1.6 · muted
- Guests scan, browse in their language and order without waiting for a printed card.
Body and UI
14px
- Thursday 9 Oct · 22:00 · Studio 5, Sofia
Caps label
11–12px · 500 · uppercase
- Terms · Privacy · For venues
The arch
Elements are square. Where one is rounded, only the two top corners curve, so a button or a picture rises like the A. Three sizes, chosen by the element, never one radius for everything.
Small · 8px
Buttons, pills, checkboxes, avatars.
Medium · 18px
List thumbnails and dropdowns.
Large · 44px
Card artwork and bottom sheets.
Buttons and pills
Square, hairline and uppercase with the arch on top. Solid is white on black and hollows out on hover; outline does the reverse. Heights are 32, 40 and 48px. Filter pills stay fully square, and the active one fills with the gradient.
Square becomes arch
Artwork rests square. On hover it takes the large arch over 200ms, the gradient fades in over it, and the title paints in the gradient. Try it.
Sofia
Plovdiv
Varna
Burgas
Gradient band
For calls to action and counters
Fully rounded, with a soft white catch along the top edge. It is the only shadow in the system, and it sits inside.
Icons
Lucide, drawn in white with a 1.5 stroke.
A 1152px column that eases in
Content column
1152px
Gutters grow 16 → 24 → 32px, then the margin takes over.
Section rhythm
clamp(72px, 8vw, 128px)
The space between sections on a page.
Fade up
0.5s · cubic-bezier(.22, 1, .36, 1)
Content rises 14px into place. The only entrance.
Hover
150ms colour · 200ms shape
Buttons swap colour; artwork takes the arch.
Reduced motion
Off
Every animation stops when the reader asks for less motion.
Writing about us or building with us?
Ask for other file formats, product screenshots or anything this page does not cover, and we will reply by email.