Style Guide & Design Guidelines

Comprehensive guide for consistency and unified UX across all Tasteline products.

1. Color Palette

Primary

#cf3247

Accent

#221f1f

Secondary

#ffffff

Text

#717171

2. Typography & Headings

H1. Main Title

Font: Philosopher Regular | Size: 120px | Weight: 400

Sub Heading1 Title

Font: Philosopher Regular | Size: 90px | Weight: 400

H2. Section Header

Font: Philosopher Regular | Size: 70px | Weight: 400

H3. Subsection Title

Font: Philosopher Medium | Size: 36px | Weight: 500

H4. Card Title

Font: Philosopher Regular | Size: 28px | Weight: 400

Heading5. Card Title

Font: Philosopher Medium | Size: 22px | Weight: 500

H5. Minor Title

Font: Philosopher Medium | Size: 20px | Weight: 500

H6. Supporting Heading

Font: Philosopher Regular | Size: 20px | Weight: 400

Body text example using Inter Tight. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

3. Button Elements

4. Font Family

Philosopher Font (Headings) Archivo Font (Buttons) Marcellus Font (Topbar Special Text) Intertight Font (Text)

4. Inputs & Forms

5. Essential Components

Standard Card

Cards are versatile containers for content and actions.