Style guide

[Overview]

Everything Lately is made of, on one page: the color variables behind the light and dark themes, the type scale, spacing, links, buttons, form fields and the small components every page is built from. Colors and the typeface are Webflow Variables, so a change in the Variables panel reaches every page at once. Sizes live in the classes, in em.

How to edit the template Licenses

[Colors]

Every color is a variable in the Colors collection, and every class uses a variable, never a raw hex value. Switch the header to Dark: the semantic colors below change to their Dark mode values while the ramps stay the same.

Semantic — Light / Dark

Neutral ramp

Green ramp

System — form states

[Typography]

Typeface

Overused Grotesk Light

Overused Grotesk Regular

Overused Grotesk Medium

One variable font file, weights 300 to 500, for every line of text, set in Variables → Typography → Body Font. By Bao Nguyen (RandomMaerks) under the SIL Open Font License 1.1, free to use in commercial projects. To use your own typeface, upload it in Site settings → Fonts and pick it in that variable.

Text styles

Sizes at 1440px. Nothing is set below 14px at any screen size: small labels and links use max(14px, …).

page-intro_headingpage-intro_sup
144px · Light · −5%
Works13
Page title (h1), one per page: 112, 80 and 64px on tablet, mobile landscape and mobile portrait. The raised number is the 14px sup.
about-cta_heading
60px · Light · −4%
Start a project
Display line inside a row, like the About call to action. 56, 48 and 36px on smaller screens.
about-bio_lead
28px · Regular · 1.3
I design websites and products, then build them myself.
Lead paragraph, the opening line of the About profile. 24 and 22px on smaller screens.
feed-detail_title
24px · Medium · 1.2
MT-1 cassette player
Project title in the Home modal and on the Work page.
page-list_title
20px · Regular · 1.3
Webflow development
Item title in list rows: services, experience, licenses, instructions.
feed-detail_text
14px · Regular · 1.65
A cassette player concept modelled in Blender and brought to life with GSAP, from the first sketch to the final render.
Project description in the Home modal and on the Work page.
home-panel_text
14px · Regular · 1.65
For the first half of my career I was a visual designer, handing polished files to developers and hoping the details would survive. So I learned to code.
Body text, in Text/Primary. Pair it with max-width-medium for a comfortable line length.
page-list_text
14px · Regular · Secondary
Clean, documented Webflow builds with CMS and native interactions.
Secondary text: descriptions in list rows and notes like this one.
text-style-label
14px · Uppercase · 10%
[What I do]
Row labels (h2), captions and the copyright. The brackets are part of the text.
page-list_meta
14px · Uppercase · Tabular
2024 — Now
Numbers, years and versions at the start of a list row. Figures keep the same width.
utility-code
14px · System monospace
Inline code: page-row_component
Class names and settings in running text, on this page and on Instructions.

[Tag styles]

The samples below have no class. Their look comes from the tag styles: select one, pick All H2 Headings, All Paragraphs and so on in the Style panel’s selector, and edit it there. Sizes, weights and line heights are linked to the Typography variables. The Rich Text and any heading or paragraph you add without a class start from these.

All H1 Headings
60px · Light · −4%
A page has one h1, so this style is edited on the page title at the top: select it and choose All H1 Headings in the selector. The title keeps its own class on top.
All H2 Headings
44px · Light · −4%
Selected work, 2019 to now
All H3 Headings
28px · Regular · −2%
Brand sites that stay easy to edit
All H4 Headings
24px · Medium · −1%
Case study: MT-1 cassette player
All H5 Headings
20px · Regular · 1.3
Design, build and launch
All H6 Headings
18px · Medium · 1.3
Webflow, GSAP and Figma
All ParagraphsAll Links
1.6 line height · Underlined
I design websites and products, then build them myself in Webflow. See the latest projects or write to me about a new one.
All Lists
Bullets · 20px indent
- Art direction and visual design
- Webflow development and CMS
- Motion with native interactions
All Lists
Numbers · 20px indent
1. A call and a short written brief
2. Design in Figma, approved section by section
3. Build, review together and launch
All Block Quotes
24px · Light · 1px rule
The best handover is a site the client never has to call me about.
All FiguresAll Figcaptions
14px caption · Secondary
Journey, a Webflow template for creative studios, on the desk.

[Rich text]

Blog posts are written in a Rich Text element with the class text-rich-text. Inside it, each tag has its own style on top of the tag styles above: select a heading, a paragraph or a quote in this sample to edit the look of every post at once.

Start with who edits it next

Before I decide how a page should move, I ask who will change it after launch. A marketing team edits headlines every week, so anything they touch should live in the Designer, not in a script. More on that in the journal.

Keep the system small

One typeface, three weights and a handful of sizes cover a whole portfolio. Every extra style is one more thing a client has to keep consistent.

One class per text style, reused everywhere
Colors as variables, so dark mode is one switch
Sizes in em, so the page scales as a whole

Write the content first
Set the type scale around it
Add motion last, and only where it helps

If a client would ask me to change it, it belongs somewhere they can reach.

A 3D render of a beige retro computer covered in stickers, its screen showing the Journey website template, on a black background. — Journey on a retro computer, a 3D render made for its launch week.

[Spacing & scale]

Scale
Scale system
Every size is in em, measured from page-wrapper: 16px up to 1440px wide, then growing with the screen to 21.33px at 1920px. Tablet and mobile stay at 16px.
No scale
Fixed 16px
The combo is--no-scale on page-wrapper keeps a page at 16px on every screen. Every Lately page uses it; remove it to let a page grow on wide screens.
Gutters
Gutters
padding-global sets the left and right gutters: 40px on desktop, 24px on tablet and 20px on mobile. Pages are full width, with no container.
Breakpoints
Desktop first
Styles start on desktop and are adjusted on three smaller breakpoints.
- Desktop · 992px and up
- Tablet · 991px
- Mobile landscape · 767px
- Mobile portrait · 479px
Spacing
Spacing scale
Gaps and paddings come from one scale, in the Spacing collection. Components space their children with gap.
- Space 1 · 4px
- Space 1 Half · 6px
- Space 2 · 8px
- Space 2 Half · 10px
- Space 3 · 12px
- Space 4 · 16px
- Space 5 · 20px
- Space 6 · 24px
- Space 7 Half · 30px
- Space 8 · 32px
- Space 10 · 40px
- Space 12 · 48px
- Space 16 · 64px
Radius
Corners
Cards, images and form messages use 10px (0.625em). Buttons, chips, pills and dots are fully round (100em). Lines are 1px hairlines, dashed between rows.

[Links & buttons]

buttonbutton_bgbutton_text
14px · Medium · Uppercase
Browse works
The main call to action. On hover the fill rises and the label rolls up (a native interaction on the button). The label is written twice, in button_text_main and button_text_hover. The form version is form_submit, shown under Forms.
underline-linkunderline-link_line
16px · Line wipe
hello@alexmarlow.com
Emails and key links. On hover the line slides out to the right and back in from the left (site script). It takes its parent’s font size, so a larger wrapper makes a larger link.
home-panel_link
14px · Underlined
View my works
Text links in rows and in the footer. They turn grey on hover.
feed-detail_link
14px · Underlined
Visit live site
Project links in the Home modal and on the Work page.
page-header_name-link
15px · Medium
Alex Marlow
The name at the top left of every inner page, linking back to Home.
feed-detail_chipsfeed-detail_chipfeed-detail_chip-text
14px · Pill
- Figma
- Webflow
- GSAP
- Blender
Tags: the tools on a Work page and the About toolkit.
feed_labelfeed_label-text
14px · Medium · Uppercase
MT-1 cassette player
The name pill on media cards. It rests hidden and fades in when the card is hovered; the combo is--pinned shows it here only.

[Forms]

The Contact and Password pages use Webflow’s native Form Block with these classes. Fields are underlined, labels are uppercase and required fields get an asterisk.

Fields

Thanks, your note is in my inbox.

This is a sample form on the style guide. The real one lives on the Contact page.

Your message didn’t go through. Try again in a moment, or email hello@alexmarlow.com.

form_component form_form form_grid form_field form_label form_input with is--select or is--textarea, form_radio form_radio-input form_radio-label form_actions form_submit form_note

States

Message sent

Thanks, your note is in my inbox.

I read every message myself and reply within two working days, usually sooner.

Your message didn’t go through. Try again in a moment, or email hello@alexmarlow.com.

form_success replaces the form after a send; form_error appears under it if the send fails. Both use form_message, form_message-title and form_message-text. Edit them in the Designer from the Form Block’s state menu.

[Components]

home-panel_availabilityhome-panel_availability-dot
Status line
Booking new projects from November.
A green dot (Status/Available) and one line of text. Used on Home, About, Contact and Licenses.
work-card_linkfeed_cardfeed_image
Work card · 16:10
A Works collection item: the media is the link, and its name pill fades in on hover. is--grid on the image or video crops every card to 16:10.
page-list_itempage-list_metapage-list_titlepage-list_text
List row
1. 01
  Websites & landing pages
  Art direction, design and build for marketing sites that load fast and stay easy to edit.
Number, title and text in one row, used for services, experience, licenses and releases. Add is--last to the last row of a list to drop its hairline.
home-panel_theme-toggletheme-dark
Light / Dark
The switch at the top of every page. It adds theme-dark to the body, which turns on the Dark mode of the Colors collection, and remembers the choice on the visitor’s device. Try it in the header.
welcome_componenthome-panel_clock
Welcome screen · Clock
The intro counter that plays once per visit (hidden in the Designer; add the combo is--shown to edit it), and the clock in the header that cycles through cities. Both run from the site script; edit their text in the Designer.

[Utilities]

Layout
Text measure
max-width-medium caps a block of text at 36em (576px), the width of the Home bio.
Layout
Containers
container-small, container-medium and container-large center content at 960, 1200 and 1360px. The pages are full width; use them in sections you add.
Access
Screen readers
sr-only hides text on screen but keeps it for screen readers, like the “opens in a new tab” note on outside links.
Access
Skip link
skip-link is the first thing a keyboard reaches. It appears on focus and jumps to the main content.
Type
Label
text-style-label is the small uppercase style for row labels, captions and the copyright line.
Combo
Variants
is--last removes the hairline under the last list row. is--stretch lets a row’s content fill its column. is--no-scale fixes a page at 16px. is--grid crops card media to 16:10. is--active marks the current theme label.
Naming
Client-First
Parts of a block use an underscore (page-row_content), shared styles a hyphen (text-style-label), variants start with is--. Reuse a class before creating a new one.

[Interactions & code]

Interaction
Scroll reveal
Each row below the first fades up as it scrolls into view. It is a native interaction: select the row and open the Interactions panel to change or remove it.
Interaction
Hovers
The button fill and the work card pill are native hover interactions on button and work-card_link, editable in the same panel.
Script
Site script
Smooth scroll, the Welcome screen, the theme switch, the clock and the underline links run from one script in Site settings → Custom code → Footer.
What each feature does
Head code
Font smoothing
The only custom style in the site head is font smoothing on page-wrapper. Everything else is a class you can edit in the Style panel.

[Script states]

These classes are added while the page runs, by the site script or by the blog pagination, so they are on no element in the Designer and Webflow’s Clean Up lists them as unused. Don’t delete them: a hidden block at the end of this page carries each one, which keeps them in use and editable.

Body
Dark mode
theme-dark goes on the body when a visitor picks Dark and turns on the Dark mode of the Colors collection.
Welcome
Welcome screen
welcome_component with is--shown shows the intro counter on the first visit.
Cursor
Custom cursor
cursor-bracket styles the two brackets that follow the pointer on desktop.
Home
Avatar effect
home-panel_avatar-canvas is the canvas laid over the Home portrait for the pixel swap.
Blog post
Contents
blog-toc_link with is--current marks the contents link of the section on screen.
Blog
Page count
blog-pagination_count is the “1 / 2” count, shown only when the blog has more than one page.

Dark mode

Welcome screen

[

Avatar effect

Current contents link

1 / 2

Style guide

[Overview]

[Colors]

Semantic — Light / Dark

Neutral ramp

Green ramp

System — form states

[Typography]

Typeface

Text styles

[Tag styles]

A page has one h1, so this style is edited on the page title at the top: select it and choose All H1 Headings in the selector. The title keeps its own class on top.

Selected work, 2019 to now

Brand sites that stay easy to edit

Case study: MT-1 cassette player

Design, build and launch

Webflow, GSAP and Figma

[Rich text]

Start with who edits it next

Keep the system small

[Spacing & scale]

Scale system

Fixed 16px

Gutters

Desktop first

Spacing scale

Corners

[Links & buttons]

[Forms]

Fields

States

[Components]

[Utilities]

Text measure

Containers

Screen readers

Skip link

Label

Variants

Client-First

[Interactions & code]

Scroll reveal

Hovers

Site script

Font smoothing

[Script states]

Dark mode

Welcome screen

Custom cursor

Avatar effect

Contents

Page count