Branding

Design system reference and brand guidelines for Solvent. This page documents our visual identity including colors, typography, and logo usage.

Logo

On light backgrounds

On dark backgrounds

Logo file: /logo.svg

Color Palette

Cream

Primary background colors. cream-100 is the default page background.

cream-50

#FFFCF5

cream-100

#FEF9ED

cream-200

#FDF4DB

cream-300

#FCE9B8

Brown

Primary accent and text colors. brown-500 is used for primary text and accents.

brown-200

#E8DDD0

brown-300

#C4B5A5

brown-400

#7A6B62

brown-500

#5D524B

brown-600

#4A413B

brown-700

#37302B

brown-800

#241F1C

Accent

Brand accent color (#B43D35). Used for highlights, CTAs, and interactive elements.

accent-50

#FCE8E7

accent-100

#F9D1CF

accent-200

#F3A39F

accent-300

#EC746F

accent-400

#E6463F

accent (DEFAULT)

#B43D35

accent-500

#B43D35

accent-600

#90312A

accent-700

#6C2520

accent-800

#481815

accent-900

#240C0B

Typography

Playfair Display

--font-playfair

Headings and display text (serif)

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Inter

--font-inter

Body text and UI elements (sans-serif)

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

JetBrains Mono

--font-mono

Code and technical text (monospace)

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Display Sizes

display-xl

clamp(3rem, 10vw, 10rem) - Line height: 1

Display XL

display-lg

clamp(2.5rem, 6vw, 4rem) - Line height: 1.1

Display Large

display-md

clamp(2rem, 4vw, 3rem) - Line height: 1.2

Display Medium

Spacing & Layout

Container

Maximum content width with responsive padding.

.container-site
max-w-7xl (1280px)
px-4 sm:px-6 lg:px-8

Section Padding

Consistent vertical spacing for sections.

.section-padding
py-16 (64px)
md:py-24 (96px)
lg:py-32 (128px)

Usage Guidelines

Backgrounds

Use cream-100 as the primary background. Use cream-50 for cards and elevated surfaces.

Text Hierarchy

Headlines: brown-500/600. Body text: brown-400. Muted: brown-300.

Accent Usage

Reserve the accent color #B43D35 for CTAs, links, and important interactive elements.