The CubiFlow design and build system for Webflow. Use it as the reference for every page you design: start from these styles, combine the patterns below, and only add something new when nothing here fits.
One family, eleven text styles. Every size is fluid between a 320px and a 1440px viewport, so design at the three frame sizes below and the build fills in everything in between.
Use the tag for meaning (one h1 per page, no skipped levels) and the class for looks. A section title that must look small stays an h2 with class .h4, never an h4 tag.
Paragraph XL. Short intros under a hero title.
Paragraph LG. Lead text under a section title, quotes and highlights.
Body. The default for all running text, lists and rich text. Keep paragraphs short and give them room.
Paragraph SM. Captions, meta, legal text and helper text under inputs.
Body copy inside a Rich Text element follows the body style. Headings inside rich text get 1em top margin.
Blockquote: 2px left rule, 0.75em × 1em padding, 1.3em size, line-height 1.5em, 2em margin top and bottom.
Figure: 8px radius, 3em margin. Caption 0.8em, 1em margin. Inline code: border color background, 4px radius, 0.4em side padding, 0.9em size.
MAST color structure with CubiFlow values. Seven swatches feed five theme tokens; components only ever use the theme tokens, so a section can switch light or dark without restyling anything inside it.
MAST also ships secondary/yellow and secondary/blue. CubiFlow has no secondary colors, so they are not used. Do not add new colors in a design without updating this palette first.
#FFFFFF bg · #111111 text
#F4F5F6 bg · #111111 text
#111111 bg · #FFFFFF text
#000000 bg · #FFFFFF text
In Webflow the theme is a variant on the Section component (and on Nav and Footer). Pick the variant; never set colors on elements inside a section.
MAST puts white text on its orange button. With CubiFlow orange that fails contrast, so the button label uses #111111. This is the only change from MAST, and it is a color change.
Three kinds of space: margins in em that scale with the text they sit on, fixed grid gaps in px, and fluid section and card padding. Use only these values.
Values in px are for body text. On an element with a bigger font the same token is bigger, which is the point: space follows type.
Grid gaps are the same at every breakpoint.
Every number in one place, in px at the three design frames. Root size is 16px. Fluid values are linear between a 320px and a 1440px viewport.
Name Figma text styles and color variables exactly like the tokens above (h1 … eyebrow, primary/background …). Export images at 2× as WebP, icons as SVG with currentColor.
Single-purpose classes for small adjustments. Stack them after a component class instead of creating a one-off combo, and keep it to four utility classes per element.
The MAST component set with CubiFlow colors. Interactive demos run on the same scripts MAST loads (accordion, tabs, modal, slider) plus the marquee pattern, so what you click here is how it behaves on a live build. Custom code only runs on the published page.
Design files, the Webflow build on MAST, CMS setup and a handover call.
Most marketing sites take four to six weeks from kickoff to launch.
Yes. Every page uses components and CMS fields your team can edit.
Design: Wireframes and visual design at 1440, 768 and 375.
Build: Webflow build on MAST with components and CMS.
Launch: QA on every breakpoint, SEO setup, then publish.
Every CubiFlow page is assembled from the same structure, the same grid and a small set of section patterns. Design new pages by combining patterns, not by inventing new layouts.
Build every layout in Webflow with row and col. A row is a wrapping flex container with negative gutters; a col takes an equal share unless it gets a span. Spans count 12 columns per breakpoint: col-lg for Desktop, col-md for Tablet (≤ 991), col-sm for Mobile L (≤ 767) and col-xs for Mobile (≤ 479). Smaller breakpoints override larger ones. The grid is the only place where more than four classes on one element is fine.
How a CubiFlow design becomes a clean Webflow build. Class names are the documentation: anyone opening the project should understand an element from its class alone.
The design guide is open to everyone. The developer guide is for the CubiFlow team and needs a password. You can switch any time from the top bar.
Show everything (team password)