Back to Demo Hub

Typography

Two-font system: Barlow Condensed (display) + Inter (everything else)

Fonts

Display

Barlow Condensed

Hero Headlines Only

Weight: 500 (medium)

Transform: uppercase

Line height: 1.05

Letter spacing: -0.02em

CSS: font-family: var(--font-display)

Body

Inter

Section Headings & Body

Heading weight: 600 (semibold)

Body weight: 400 (regular)

Line height: 1.2 (headings), 1.6 (body)

Letter spacing: normal

CSS: font-family: var(--font-body)

Live Preview

Using LVT-matched fluid type scale

Eyebrow Label

Outdoor Intrusion Detection

Stop intruders with the power of SCT+ surveillance cameras. Advanced AI-powered security for any location.

Request a DemoLearn More
Our Technology

Advanced AI-Powered Detection

Our cameras use machine learning to detect threats in real-time, providing instant alerts and actionable intelligence to security teams.

Learn More

Type Scale

~15-20% smaller than LVT for refined aesthetics

Solar Security Cameras

Hero DisplayBarlow Condensedw500[2.5rem]upper

Hero section headlines only

The quick brown fox jumps over the lazy dog

Section HeadingInterw600[1.625rem]

TwoTab headings, content section titles

The quick brown fox jumps over the lazy dog

Card HeadingInterw600lg

Card titles, feature names, FAQ questions

The quick brown fox jumps over the lazy dog

Body LargeInterw400base

Hero descriptions, section descriptions

The quick brown fox jumps over the lazy dog

BodyInterw400sm

General content, paragraphs, FAQ answers

The quick brown fox jumps over the lazy dog

CaptionInterw400xs

Labels, metadata, secondary info

Category Label

EyebrowInterw600xsupper

Section eyebrow labels, category tags

Request a Demo

ButtonInterw600xsupper

CTA buttons, navigation links

Responsive Sizes

~15-20% smaller than LVT for a more refined look

ElementMobilesm (640px)md (768px)lg (1024px)
Hero Display2.5rem (40px)3rem (48px)3.5rem (56px)4rem (64px)
Section Heading1.625rem (26px)2rem (32px)2.25rem (36px)2.5rem (40px)
Card Heading1.125rem (18px)1.125rem (18px)1.25rem (20px)1.5rem (24px)
Body Large1rem (16px)1.125rem (18px)
Body0.875rem (14px)1rem (16px)
Caption0.75rem (12px)0.875rem (14px)
Eyebrow / Button0.75rem (12px)0.875rem (14px) — uppercase, tracking-widest

Comparison with LVT

Element

Hero Display

Section Heading

Card Heading

LVT (max)

80px

49px

28px

SCT+ (max)

64px (-20%)

40px (-18%)

24px (-14%)

Rules

Do

  • Use Barlow Condensed only in hero sections
  • Keep hero text uppercase with weight 500
  • Use Inter weight 600 for section headings
  • Use Inter weight 400 for body text
  • Apply tracking-widest on buttons/eyebrows
  • Use responsive font sizes (mobile-first)

Don't

  • Use Barlow Condensed outside hero sections
  • Mix more than 2 font weights in one section
  • Use bold (700+) for body text
  • Apply uppercase to body paragraphs
  • Use letter-spacing on body text
  • Skip responsive size breakpoints