Design System

Style Guide

iamhteinlin.com — Font: Monasans · Dark mode ready · Variable-driven

01

Color System

All colors are defined as CSS variables in the Base collection. They drive backgrounds, text, borders, and state colors across the site.

Core Palette

color/Primary --color--primary black
color/White --color--white white
color/Secondary --color--secondary #757575
color/Background --color--background alias → White
color/Background Mutted --color--background-mutted whitesmoke

Borders

color/Border Mutted --color--border-mutted rgba(0,0,0,0.12)
color/Border Forms --color--border-forms #d7d7d7
color/Inverse Mutted --color--inverse-mutted #babcbe

State Colors

color/Error Background --color--error-background #ffc5c5
color/Error --color--error #751515
color/Success Background --color--success-background #abe9a3
color/Success --color--success #114c09
02

Typography Variables

Font variables live in the Typography collection with a Mobile mode override. Font family: Monasans.

Font Size Scale

TokenCSS VariableDesktopMobilePreview
font size/text-xs --_typography---font-size--text-xs 0.875rem 0.875rem The quick brown fox
font size/text-sm --_typography---font-size--text-sm 1.125rem 1.125rem The quick brown fox
font size/text-md --_typography---font-size--text-md 1.1875rem 1.125rem The quick brown fox
font size/text-lg --_typography---font-size--text-lg 1.25rem 1rem The quick brown fox
font size/text-xl --_typography---font-size--text-xl 1.375rem 1.2rem The quick brown fox
font size/display-sm --_typography---font-size--display-sm 3.275rem 2.25rem Display
font size/display-md --_typography---font-size--display-md 5rem 1.3rem Display
font size/display-lg --_typography---font-size--display-lg 5.5rem 2.2rem Display
font size/display-xl --_typography---font-size--display-xl 13.5rem 3rem HERO

Line Height

line height/small--_typography---line-height--small0.8
line height/normal--_typography---line-height--normal1
line height/medium--_typography---line-height--medium1.1
line height/large--_typography---line-height--large1.25
line height/extra large--_typography---line-height--extra-large1.4

Letter Spacing

letter spacing/tightest--_typography---letter-spacing--tightest-0.05em
letter spacing/tight--_typography---letter-spacing--tight-0.02em
letter spacing/normal--_typography---letter-spacing--normal-0.0125em
letter spacing/wide--_typography---letter-spacing--wide0.01em
03

Spacing System

Spacing tokens live in the Spacing collection with a Mobile Mode override. Used for section margins, paddings, and gutters.

Space/small --_spacing---space--small
Desktop: 1.875remMobile: 1.875rem
Used: navbar padding, container padding
Space/normal --_spacing---space--normal
Desktop: 3.125remMobile: 3.125rem
Used: footer top/bottom padding
Space/medium --_spacing---space--medium
Desktop: 6remMobile: 6rem
Used: marquee item padding
Space/large --_spacing---space--large
Desktop: 12remMobile: 5rem
Used: margin-bottom-extra-large style
Space/extra large --_spacing---space--extra-large
Desktop: 22.5remMobile: 9rem
Used: section margin-top, footer margin-top
04

Named Text Styles

Reusable Webflow classes that apply the typography tokens. Apply these classes to elements as needed when building new pages.

HERO
heading-large / section_title / hero_title / footer-heading
font-size: display-xl (13.5rem) line-height: small (0.8) letter-spacing: normal (-0.0125em) font-weight: 400 text-transform: uppercase
MARQUEE
marquee-heading-small / paragraph-extra-large
font-size: display-md (5rem) line-height: normal (1) letter-spacing: tight (-0.02em) text-transform: uppercase
Section Heading
section-title-small
font-size: display-lg (5.5rem) line-height: normal (1) font-weight: 500 letter-spacing: tightest (-0.05em) text-transform: uppercase
Navigation & Labels
section_title-label / navigation_link / availibility / scroll-down / heading-small
font-size: text-xl (1.375rem) line-height: large (1.25) font-weight: 600 letter-spacing: tight (-0.02em)
Body Copy — The body text is set globally on the body element using text-lg at 1.25rem with extra-large line-height of 1.4.
body / p (default)
font-size: text-lg (1.25rem) line-height: extra large (1.4) font-weight: 500 letter-spacing: normal (-0.0125em)
Medium Body — paragraph-large and form elements use text-md at 1.1875rem.
paragraph-large / form-field / form-label / sandbox_description / h3
font-size: text-md (1.1875rem) line-height: extra large (1.4) font-weight: 500 letter-spacing: tight (-0.02em)
Small Body — Used for footer, technical rows, paragraph-small content.
paragraph-small / technical_row / footer (font-size)
font-size: text-sm (1.125rem) line-height: 1.8 (hardcoded) font-weight: 500 letter-spacing: tight (-0.02em)
XS LABEL — Tags, Buttons, Badges
heading-small / button / project_tag / technical_title-row
font-size: text-xs (0.875rem) line-height: large (1.25) font-weight: 600 letter-spacing: tight (-0.02em) text-transform: uppercase
05

Key Components

Pre-built Webflow classes for common UI patterns. Copy these class names exactly when building new pages.

Buttons

Button
button Pill border, text-xs, uppercase, wide letter-spacing, pill-radius 5rem
Submit
form-btn Full-width form submit, text-xl, uppercase, min-height 4.187rem, pill-radius 50rem

Layout Containers

containermax-width: 84.375rem · padding: Space/small
container_fluidmin-width: 100% · padding: Space/small
container-smallmax-width: 35rem
grid-12-columns12-col grid · gap: 1.875vw
sectionposition: relative · z-index: 2 · margin-top: Space/extra large

Utility Classes

margin-bottom-extra-smallmargin-bottom: 0.625rem
margin-bottom-smallmargin-bottom: 2rem
margin-bottom-mediummargin-bottom: 3.125rem
margin-bottom-extra-largemargin-bottom: Space/large (12rem)
align-centertext-align: center
align-righttext-align: right
inline-blockposition: relative · display: inline-block
position-relativeposition: relative

Dividers & Borders

divider-mutted1px solid · color: Border Mutted · scale-x from 0
section-border1px solid all sides · color: Border Mutted · padding: 10rem 1.875rem