Altis Style Guide

Brand tokens, typography, spacing, and button usage for the Altis landing experience.

Brand colors

Dark Blue

#00496c

Blue

#106288

Red

#e20613

White

#ffffff

A consistent, fluid scale — every size is a clamp() that scales between mobile and desktop.

Displayclamp 36–64px

Aa Display

3X-Largeclamp 30–48px

Aa Heading

XX-Largeclamp 24–36px

Aa Heading

X-Largeclamp 20–26px

Aa Subheading

Largeclamp 17–20px

Aa Lead paragraph

Mediumclamp 15–16px

Aa Body copy

Smallclamp 13–14px

Aa Small / captions

X-Smallclamp 12–13px

Aa Labels

2X-Smallclamp 11–12px

Aa Fine print

Primary Secondary Accent

Hover states use subtle elevation and color transitions to keep CTA interactions premium.