Design System

Brand Style Guide

The complete visual language for swetha.pro: palette, typography, gradients, and tokens used across the site.

Color Palette

Semantic tokens mapped to CSS variables. Hex values are extracted from the design token comments in src/styles.css.

Semantic Tokens

Background

--background

#070019

oklch(0.14 0.06 300)

Foreground

--foreground

#F5EFE6

oklch(0.96 0.02 90)

Card

--card

#1B0B2E

oklch(0.18 0.07 305)

Card Foreground

--card-foreground

#F5EFE6

oklch(0.96 0.02 90)

Primary

--primary

#B832B8

oklch(0.62 0.24 335)

Primary Foreground

--primary-foreground

#FCFCFC

oklch(0.99 0 0)

Secondary

--secondary

#2A153D

oklch(0.22 0.08 310)

Secondary Foreground

--secondary-foreground

#F5EFE6

oklch(0.96 0.02 90)

Muted

--muted

#241536

oklch(0.22 0.06 305)

Muted Foreground

--muted-foreground

#C2B4CC

oklch(0.78 0.05 310)

Accent

--accent

#3D1F4F

oklch(0.28 0.12 320)

Accent Foreground

--accent-foreground

#FCFCFC

oklch(0.99 0 0)

Destructive

--destructive

#C9372C

oklch(0.62 0.24 25)

Destructive Foreground

--destructive-foreground

#FCFCFC

oklch(0.99 0 0)

Border

--border

rgba(255,255,255,0.08)

oklch(1 0 0 / 8%)

Input

--input

rgba(255,255,255,0.12)

oklch(1 0 0 / 12%)

Ring

--ring

#B832B8

oklch(0.62 0.24 335)

Brand Aliases

Plum

--plum

#1B0B2E

oklch(0.18 0.07 305)

Magenta

--magenta

#B832B8

oklch(0.62 0.24 335)

Magenta Glow

--magenta-glow

#D93FD1

oklch(0.68 0.26 340)

Ivory

--ivory

#F5EFE6

oklch(0.96 0.02 90)

Lavender

--lavender

#C2B4CC

oklch(0.78 0.05 310)

Hairline

--hairline

rgba(255,255,255,0.08)

oklch(1 0 0 / 8%)

Success

--success

#3FAE6A

oklch(0.62 0.17 155)

Typography

Display type is Source Sans 3; body type is Open Sans.

Display Font — Source Sans 3

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

Body Font — Open Sans

Large body text

Regular body text for paragraphs and descriptions.

Base body text used for most UI copy and longer content.

Small text for captions, labels, and secondary details.

Extra-small text for fine print and metadata.

Utility Styles

Eyebrow LabelGradient Text

.eyebrow — uppercase, spaced, magenta label. .text-gradient-magenta — magenta-to-glow gradient text fill.

Gradients

Gradients are defined as CSS custom properties and exposed through Tailwind utilities.

Magenta Gradient

--gradient-magenta

bg-gradient-magenta

Hero Gradient

--gradient-hero

bg-gradient-hero (custom)

Card Gradient

--gradient-card

bg-gradient-card

Shadows & Effects

Shadow Glow

Utility: .shadow-glow

Variable: --shadow-glow

Shadow Elegant

Utility: .shadow-elegant

Variable: --shadow-elegant

Usage Cheat Sheet

Background

bg-background

Text

text-foreground

Muted text

text-muted-foreground

Primary button

bg-primary text-primary-foreground

Card surface

bg-card border border-hairline

Magenta gradient

bg-gradient-magenta

Gradient text

text-gradient-magenta

Eyebrow label

eyebrow

Focus ring

ring-ring