flowmanceOxygen Design System
Oxygen is a clean, slightly technical agency template with a lot of air. Most of the page is a pale blue-white (#F4F8FC) with white cards, while the hero is a saturated electric-blue photo wash. Type is Dosis throughout, a narrow rounded sans, and every heading and label is uppercase with very wide tracking. Tomato red (#FF5252) marks the brand: the boxed OXYGEN logo, the main button, the hero underline and small floating dots. The published home page is the template's showcase of its six demos.
Four signatures make it recognisable:
- The red logo block. OXYGEN in white Dosis 17px with 5px tracking, set inside a solid #FF5252 rectangle (padding 10px 13px 10px 15px), centred at the top of the hero.
- Blue hero with a red underline. The hero is a photo or collage under a vertical gradient from #1B39DB (90%) to #001BB3 (98%), with a white uppercase headline underlined in tomato.
- Line-and-dot ornaments. Thin white + crosses, outlined circles, broken horizontal hairlines and a solid tomato dot about 40px wide float around heroes, plus a small mouse-shaped scroll icon.
- Square and tracked. Buttons, images and cards have square corners; only the small icon badges and ornaments are round. Letter spacing runs 1–5px on uppercase text (1px only on the 14px feature card titles).
Oxygen is a light design with a blue hero and a dark footer.
Colors
Surfaces
#F4F8FCPage background (the body rule)
#FFFFFFCards, the intro feature row, white sections, the menu panel
#EAF0F6The large demo showcase band (.section.gray.darker)
#121217Footer band; links at 70% opacity, small print #B7B7C7
Ink
#FFFFFFText on primary
#FFFFFF#121217Headings, labels, nav menu links
#333333Form field text; use it for any paragraph longer than three lines
#9196ADParagraphs (the p rule) and the DEMO 1 labels
#919197Small helper text such as Follow us
#FFFFFF#FFFFFFText on inverse-canvas
#B7B7C7Action
#FF5252Logo block, main button, hero underline, dots
#FF5252#3F51B5The .button class used for form submits (Submit Project)
#5667C7With secondary: The .button class used for form submits (Submit Project)
Lines & effects
#DDDDDDImage placeholders behind thumbnails while they load
#EDEDED1px top border on the social row
#FFFFFF · 20%The 1px rule under the nav on the hero
#1B39DB · 90%Hero overlay: linear-gradient(to top, #001BB3FA, #1B39DBE6) over the image
#001BB3 · 98%Hero overlay: linear-gradient(to top, #001BB3FA, #1B39DBE6) over the image
#7D75DARound icon badges after demo labels (CMS and shop)
#2FC2A2Round icon badges after demo labels (CMS and shop)
Typography
Dosis · display-hero
The quick brown fox jumpsTHE NEXT-GENERATION WEBFLOW TEMPLATE, white with a tomato underline (.big-title, 48px in CSS). 52px · 500 · 1.15 · 3px
Dosis · headline-lg
The quick brown fox jumpsSection titles 6 READY DEMOS, TEMPLATE FEATURES (.top-title-text). 36px · 600 · 1.28 · 3px
Dosis · title-md
The quick brown fox jumpsSub-section titles. 20px · 600 · 1.5 · 3px
Dosis · logo
The quick brown fox jumpsOXYGEN in the red block. 17px · 600 · 1.18 · 5px
Dosis · eyebrow
The quick brown fox jumpsWE ARE TRUSTED BY 10.000+ CUSTOMERS. 16px · 600 · 1.25 · 2px
Dosis · label-lg
The quick brown fox jumpsDEMO 1, UTILITY PAGES, in ink-subtle. 15px · 600 · 1.6 · 2px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px (.container), centred |
| Section rhythm | 120px top and bottom with 30px side padding; 100px top and bottom at ≤767px, then 60px 15px at ≤479px |
| Breakpoints | 991px, 767px and 479px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 3px | |
xs | 5px | |
sm | 10px | |
md | 20px | |
lg | 30px | |
xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-side | 30px | |
nav | 100px | |
section | 120px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Scroll entrance | opacity 0 → 1 with y 30px → 0 (or 15px), 300ms ease or 500ms |
| Page load | opacity 0 → 1 and y → 0, 1000ms outQuart |
| Ornament parallax | Ornaments move y 100px, −50px or −100px while their section scrolls, 500ms smoothing |
| Link hover | Text colour change, 300ms ease |
| Menu open | Panel height 0 → auto, 500ms; links fade in; the 2px tomato line grows, 300ms ease |
| Badge hover | Background colour and rotate, 350ms outQuad |
| Thumbnails | opacity .7 → 1, transition: opacity .2s |
| Buttons | transition: .25s |
Do’s and don’ts
- Set every heading and label in uppercase Dosis 600 (500 for the hero title) with 1–5px tracking, and paragraphs in Dosis 400 at 15px / 1.73.
- Use #F4F8FC as the page, #FFFFFF for cards and #EAF0F6 for a showcase band.
- Put the brand in one #FF5252 block: the OXYGEN logo with 5px tracking and padding 10px 13px 10px 15px.
- Keep buttons square, 46px tall, padding 13px 23px, 12px uppercase labels.
- Lay the hero image under linear-gradient(to top, #001BB3FA, #1B39DBE6) and add white line ornaments plus one tomato dot.
- Keep white on #FF5252 to 12px+ uppercase weight 600 labels; the pair is about 3.2:1.
- Round buttons, cards or images; only badges and ornaments are circles.
- Set long paragraphs in ink-subtle #9196AD; it is about 2.7:1 on #F4F8FC. Keep it to one- to three-line descriptions at 14px+, and use #333333 for longer text.
- Use red and blue buttons together, or use #7D75DA and #2FC2A2 for anything but the small round badges.
- Use a flat blue hero; the blue only exists as a gradient over imagery.
- Add drop shadows darker than black at 10%, or blur.
- Write headings in sentence case or tighten their tracking below 1px.
Example prompt
Any page in the Oxygen 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 Oxygen 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/oxygen.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