Instant Soup
ConsortiumEpisodesMusicArtistsPostsAbout
Sign In
Instant Soup

Spontaneous music, created live. Collaborative music sessions bringing artists together in Cyprus.

Explore

  • Episodes
  • Music
  • Artists
  • Posts

About

  • About Us
  • Consortium
  • Branding

Stay Updated

Get notified about new episodes and releases.

© 2026 Instant Soup. All rights reserved.

BrandingAbout
Design System

Brand Guidelines

The visual language of Instant Soup. A color system derived from musical harmony, creating a cohesive and meaningful identity.

8 Colors
Musical Scale
9 Accent Variables
Page-level Theming

Scale Harmony

7 colors derived from musical scale degrees

PrimaryC
--root

Primary actions, CTAs, brand identity

#DD3C54
WarningD
--second

Consortium, highlights, attention

#EED75A
GrowthE
--third

New releases, success, music

#54DD3C
SuccessF#
--fourth

Positive feedback, harmony

#3CDDC4
LinksG
--fifth

Links, secondary actions, info

#3CA4DD
PremiumA
--sixth

Featured content, special items

#743CDD
AccentB
--seventh

Creative accents, highlights

#DD3CA4
NeutralN
--neutral

Page backgrounds, cards, containers

#1A1A2E
Neutral-InvertedN
--neutral-inverted

Swapped variant of Neutral

#F1F1F2
Primary-InvertedC
--root-inverted

Swapped variant of Primary

#F8EAEB
Premium-InvertedA
--sixth-inverted

Swapped variant of Premium

#F0EAF6

Variant System

Each color has 5 variants for different contexts

Color
Base --primary
Dark
Medium --muted-foreground
Light --muted + --secondary
Pale --card
Page --background
Foreground --foreground + --card-foreground + secondary-foreground + --accent-foreground
Accent --accent
Primary

#DD3C54

#e1556a

#ee9eaa

#F5D5D9

#F8EAEB

#F4F1EE

#DD3C54

#1A1A2E

Warning

#EED75A

#f0dc6f

#f7ebad

#F9F3DA

#F9F6E8

#F4F1EE

#EED75A

#1A1A2E

Growth

#54DD3C

#6ae155

#aaee9e

#E0F5DB

#EFF8EC

#F4F1EE

#54DD3C

#1A1A2E

Success

#3CDDC4

#55e1cc

#9eeee2

#D5F4EE

#EBF7F4

#F4F1EE

#3CDDC4

#1A1A2E

Links

#3CA4DD

#55b0e1

#9ed2ee

#D5E9F3

#EBF2F6

#F4F1EE

#3CA4DD

#1A1A2E

Premium

#743CDD

#8655e1

#ba9eee

#E0D5F3

#F0EAF6

#F4F1EE

#743CDD

#1A1A2E

Accent

#DD3CA4

#e155b0

#ee9ed2

#F5D5E8

#F8EAF1

#F4F1EE

#DD3CA4

#1A1A2E

Neutral

#1A1A2E

#4A4A5E

#8d8d97

#DDDDE0

#FBFAF9

#F4F1EE

#1A1A2E

#DD3C54

Neutral-Inverted

#F1F1F2

#DDDDE0

#8D8D97

#4A4A5E

#1A1A2E

#1A1A2E

#F1F1F2

#DD3C54

Primary-Inverted

#F8EAEB

#F5D5D9

#EE9EAA

#E1556A

#DD3C54

#100607

#F8EAEB

#DD3C54

Premium-Inverted

#F0EAF6

#E0D5F3

#AA88E8

#AA88E8

#743CDD

#150620

#F0EAF6

#743CDD

Accent System

Semantic CSS variables + page-level theme classes — all in one system

CSS Variables (9 tokens)

--accentBase

Main color for buttons, links

--accent-foregroundText

Text on accent backgrounds

--accent-foreground-secondaryAlt

Secondary text on accent

--accent-darkHover

Hover, focus, active states

--accent-mediumBorder

Borders, secondary elements

--accent-lightBackground

Light tint for sections

--accent-paleSubtle

Very subtle highlights

--accent-pagePage

Page background color

--accent-cardCard

Card component background

Theme Classes (7 base + 7 inverted)

.accent-primary
#DD3C54
.accent-success
#3CDDC4
.accent-premium
#743CDD
.accent-secondary
#3CA4DD
.accent-warning
#EED75A
.accent-creative
#DD3CA4
.accent-neutral
#4A4A5E

Page Mapping

Which accent class each page uses

Page
Class
Accent
Home
(default)
Primary
Episodes
.accent-primary-inverted
Primary-Inverted
Music
.accent-primary-inverted
Primary-Inverted
Artists
.accent-primary-inverted
Primary-Inverted
Posts
.accent-primary-inverted
Primary-Inverted
About
.accent-primary-inverted
Primary-Inverted
Consortium
.accent-premium-inverted
Premium-Inverted
Branding
.accent-neutral
Neutral

Typography

Font families and scale for consistent hierarchy

Headings

Dela Gothic One

Display, h1 titles

Font variable: --font-h1

Body

Inter

Paragraphs, UI text, descriptions

Font variable: --font-body (Inter)

Mono

JetBrains Mono

Episode numbers, code snippets

Font variable: --font-mono

Type Scale

h1Page Titletext-6xl md:text-8xl
h2Section Titletext-4xl
h3Subsectiontext-2xl
h4Card Titletext-xl
pBody text for paragraphs and descriptionstext-base

Need More Details?

Explore our color system in action across the site, or check out the CSS variables in globals.css.