Mast-compatible styles

Styles

A Droptine implementation of Mast’s typography, color, theme, utility, and layout patterns using Field Ops variables.

Typography

Clamp-based type scale

Mast uses clamp variables for fluid type. Droptine keeps the same pattern and maps fonts to PP Right.

H1 / Display

Element Heading

font: PP Right Serif; weight: 600; size: clamp(3.4rem, 9vw, 7.5rem)

H2

Section Heading

clamp(2.2rem, 5vw, 4.4rem)

H3

Component Heading

clamp(1.45rem, 2.5vw, 2.4rem)

Body

Large paragraph text for intros and section summaries.

Body copy uses PP Right Grotesk at weight 400, with 500 for lead paragraphs.

Color

Background primitives

Text

Semantic text colors

Aa Primary Accent

u-text-primary / --primary--accent

Aa Ink

u-text-black / --droptine-night

Aa Paper

u-text-white / --droptine-paper

Themes

Section-level theme controls

Light/dark mode controls global semantic variables. Section themes intentionally override local surfaces for content rhythm.

Default

Base Surface

Uses the page’s current light/dark mode.

.theme-default

Forest

Authority + Security

Use for hero, trust, threat, or security sections.

.theme-forest

Sand

Warm Explanation

Use for educational content and process sections.

.theme-sand

Rifle

Operational Depth

Use for stats, compliance, technical or infrastructure sections.

.theme-rifle

Utilities

Mast utility compatibility

Spacing

u-mt-xs/sm/md/lg
u-mb-xs/sm/md/lg
u-p-0, u-pt-0, u-pb-0

Layout

section, container, row, col
col-lg-*, col-md-*, col-sm-*

Helpers

u-text-center, u-text-balance
u-link-cover, u-border
u-text-clamp-1/2/3

Droptine Extensions

What is unique beyond starter Mast

Field Ops texture

Subtle tactical/noise layer adds rugged feel. Implement as optional `.noise` overlay or section background utility.

Threat Intel labels

Mono eyebrows and “Cyber Fact” cards are a brand-specific content pattern, not a core Mast component.

Section themes

Mast has light/dark. Droptine adds local `.theme-*` section tokens for stronger editorial pacing.

Variables