Type System

Typography

Typography reinforces precision and technical authority. Inter provides clean, tight headings while JetBrains Mono signals developer-centric data.

Primary Typeface

Headings and UI elements

Inter

Weights: Bold (700), Extra Bold (800)

Tracking: -2% (tight) to emphasize precision

Usage: All headings, button labels, navigation items

The quick brown fox jumps over the lazy dog

Secondary Typeface

Data, labels, and code

JetBrains Mono

Weights: Regular (400), Medium (500)

Purpose: Technical details, code snippets, data labels

Reinforces the “developer-centric” vibe

--color-violet: #7F5AF0;

Heading Scale

All headings use Inter with -2% letter-spacing for a tight, precise feel.

Display

Aavya

3.75rem / 60px800 (Extra Bold)tracking: -0.02em

Brand Guidelines

2.25rem / 36px700 (Bold)tracking: -0.02em

Color System

1.875rem / 30px700 (Bold)tracking: -0.02em

Electric Violet

1.5rem / 24px600 (Semibold)tracking: -0.02em

Design Tokens

1.25rem / 20px600 (Semibold)tracking: -0.02em

Body Text Scale

Body text uses Inter at regular weight with comfortable line heights for readability.

Body Large

Used for prominent paragraphs and introductions.

1.125rem / 18px400 (Regular)leading: 1.75

Body

The default body text size for readable content.

1rem / 16px400 (Regular)leading: 1.625

Body Small

Used for supporting text and descriptions.

0.875rem / 14px400 (Regular)leading: 1.5

Caption

Labels, timestamps, and metadata.

0.75rem / 12px500 (Medium)leading: 1.5

Monospace Usage

JetBrains Mono is reserved for technical contexts.

Code Blocks

const brand = {
  primary: '#7F5AF0',
  success: '#2CB67D',
}

Data Labels

Token--color-violet

Value#7F5AF0

Categoryaccent