flowmanceGlax Design System
Glax is a loud, black, type-first agency site. Each section is one sentence set in white uppercase Switzer at 144px, running the full width of a 1200px column, with an editorial photo floating beside or behind it that drifts as you scroll. Everything else is minimal: 2px white rules, small outlined pill tags, one white pill button, and a cornflower blue that appears only on hover, as the 1px underline of text links and on the cursor over work.
Four signatures make it recognisable:
- Sentence-sized headlines. Hero and section titles are full statements in uppercase at 144px, line height 1.05 (WE ARE AN WINNING DIGITAL AGENCY…, OFFERING A VARIETY OF HIGH-END SERVICES., WHAT THEY THINK.), the longer ones filling four or five lines.
- Floating photos. Portrait photos (about 25–50% of the column) are positioned absolutely around the headlines, overlapping the type and the header rule, and move on scroll.
- 2px white rules. The fixed header ends in a 2px white line across the container; testimonials and the footer use the same 2px rule. Tags are 2px white outlined pills.
- Name marquees over work. Project images in a 2-column grid carry their name in 100px Switzer scrolling sideways across the image with a small star glyph between repeats; a 100px blue circle follows the cursor.
Glax is a dark-only design.
Colors
Surfaces
#000000Page background
#111111Overlay menu panel
#222222Button hover fill
Ink
#000000Text on primary
#FFFFFFText on primary-hover
#000000Text on accent
#FFFFFFHeadlines, nav, labels, quotes
#FFFFFF · 85%Paragraphs (base p) and the footer blurb
#FFFFFF · 70%Roles (CEO AT WEBFLOW), list items
#FFFFFFAction
#FFFFFFThe white pill button
#222222Button hover
#5482FFMenu and footer link hover text, 1px underline on text links, the view-project circle, social-icon hover fill
Lines & effects
#FFFFFF2px header, testimonial and footer rules; tag and go-top outlines; testimonial left rule
#FFFFFF · 40%Contact-page field borders
Typography
Switzer · display-hero
The quick brown fox jumpsHero and every section title (title-1). 144px · 500 · 1.05
Switzer · headline-menu
The quick brown fox jumpsOverlay menu links and footer links. 70px · 500 · 0.86 · 1px
Switzer · title-sm
The quick brown fox jumpsService titles (STRATEGY, CONCEPT). 21px · 500 · 1.43 · 1px
Switzer · body-lg
The quick brown fox jumpsFooter blurb. 20px · 400 · 1.2
Switzer · label-button
The quick brown fox jumpsPill button. 17px · 600 · 1.2 · 1px
Switzer · eyebrow
The quick brown fox jumpsPill tags (WHAT WE DO, TESTIMONIALS, CLIENTS). 13px · 600 · 1.54 · 1px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred; sections add 5% side padding |
| Section rhythm | 120px top and bottom (80px at ≤991px, 60px at ≤479px) |
| Breakpoints | 991px, 767px, 479px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 2px | |
xs | 10px | |
sm | 20px | |
md | 30px | |
lg | 50px | |
xl | 80px | |
2xl | 100px | |
3xl | 200px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
project-gap | 30px | |
section | 120px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Menu open | Panel height grows from 0, 500ms ease; links rise from y 110% to 0%, 400ms outCubic |
| Link roll (menu, footer, text links) | The label slides up out of its mask and a copy (blue in menus) slides in, about 300–400ms |
| Hero entrance | Opacity 0 → 1 and move to x 0, y 0, 1000ms outQuart |
| Floating photos | Scroll-linked move of about y −100px while in view |
| Project marquee | Names scroll sideways continuously across each image |
| View-project cursor | The blue circle follows the mouse over work; images scale between 1 and 1.3 over 500ms |
| Button hover | transition: all .3s |
| Text link hover | transition: all .2s |
Do’s and don’ts
- Open every section with a 2px outlined pill tag, then one uppercase statement in Switzer 500 at 144px, line height 1.05.
- Keep the page #000000 with white type; paragraphs at #FFFFFFD9.
- Use 2px solid white rules for the header, testimonial rows and footer.
- Float one or two portrait photos beside the headline and let them overlap the type.
- Use the white pill (#FFFFFF, black text, 100px radius) as the only filled button.
- Use accent #5482FF only for hover states, underlines and the work cursor.
- Add shadows, gradients or rounded image corners.
- Use blue for static text, backgrounds or icons.
- Use thin or translucent rules; Glax rules are 2px and fully white.
- Set paragraphs in uppercase or bold; they are 19px weight 400.
- Shrink section titles below the responsive steps (80 / 54 / 40px) or split them into a title and subtitle.
- Use the unused variables #826F8D, #74D5F5 or #FF5454.
Example prompt
Any page in the Glax style
More design systems like this
Agency design systems, the same colors first.
Bring any of them to your AI tool
All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.
Get All AccessUpgrade to All AccessHow to use the Glax design system
Pick a file to see what it’s for and where it goes.
What it is
The whole design system in one markdown file, written for AI: every color, type style, spacing value, component and motion rule, plus do's, don'ts and a ready prompt.
Best for
Claude, ChatGPT, Gemini, Cursor and v0, or any other AI tool that builds pages or code.
How to use it
- Put
DESIGN.mdin your project and mention it in your request, or save it as.cursor/rules/glax.mdc - For the rule file, start it with a front-matter block that sets
alwaysApply: true, so every chat uses it - Ask: “Build a pricing page using DESIGN.md.” Cursor follows the colors, fonts, spacing and rules
- Put
DESIGN.mdin the project root - Add one line to
CLAUDE.md: “Follow DESIGN.md for all UI.” - Ask for any page or component; Claude reads the file first
- Attach
DESIGN.mdto the chat (or paste it in) - Ask: “Build a landing page in this design system.”
- Keep the file in the chat or project knowledge, so follow-up pages stay on style
What it is
Every token as data, in the W3C Design Tokens format: colors with their roles, type styles, radius, spacing, and component tokens that point at them.
Best for
Figma (Tokens Studio), Style Dictionary and other design-token tools, and build scripts.
How to use it
- In Figma, open Tokens Studio, choose Import, and pick
tokens.json - Or point Style Dictionary’s
sourceat it to generate tokens for any platform - In code, import it like any JSON file
What it is
A Tailwind CSS v4 theme: every color, font, type style, radius and spacing value becomes a Tailwind utility, like bg-canvas, text-headline-lg or rounded-md.
Best for
Tailwind v4 projects, and AI builders that write Tailwind (v0, Lovable, Bolt).
How to use it
- Save
theme.cssnext to your main CSS file - Import it after Tailwind:
@import "tailwindcss"; @import "./theme.css"; - Use the classes:
bg-canvas text-ink rounded-md p-lg
What it is
The same tokens as plain CSS variables on :root. Component values point at the color variables, so changing one color updates everything that uses it.
Best for
Any website: plain CSS, Webflow custom code, Framer, WordPress.
How to use it
- Add it to your stylesheet, or in Webflow paste it into Site settings → Custom code inside a
<style>tag - Use the variables anywhere:
color: var(--color-ink) - Change a token once and every place that uses it follows