flowmanceSnag Design System
Snag is a bold, friendly agency site set entirely in one colour on one colour: electric lime #B4FF53 type on a deep green-black #111F1E. Headlines are huge, centred and semibold, and the hero is scattered with tilted photos that drift as you move. It feels like a confident studio poster, loosened up with a hand-drawn scribble and round shapes.
Four signatures make it recognisable:
- Lime on green-black. Almost every text element, border, icon and logo is #B4FF53. There is no second accent; white appears only on the marquee and form text.
- The scribbled word. The hero headline We're a / innovative / digital agency (110px) carries a lime hand-drawn double underline under innovative, with a lime asterisk ✱ above the headline.
- Floating tilted photos. Around the hero, square-cornered photos sit rotated (−10° base) and cropped by the viewport edges, plus one round portrait on a red ground cut off on the right.
- Asterisk tag pills. Section labels are 1px lime outline pills with a small ✱ and uppercase 14px bold text: ✱ RECENT WORK, ✱ TEAM SKILLS, followed by a giant centred title (Work).
Snag is a dark-only design.
Colors
Surfaces
#111F1EPage background, overlay menu (--menu-color)
#182928The Ready to talk CTA band, a hair lighter than the canvas
#FFFFFFText on field
Ink
#111F1EText on primary
#B4FF53All headlines, labels, links, icons, borders (--color)
#B4FF53 · 80%Paragraphs (p has opacity 0.8)
#B4FF53 · 60%Footer links (.footer-link-main at 0.6)
#FFFFFFThe big marquee words and the white text over photos
Action
#B4FF53The filled submit Get in Touch, service icon circles, the hover fill of outline buttons
#B4FF53Lines & effects
#B4FF531px tag borders, 2px button and input borders, 2px skill bars
#000000 · 40%Darkening layer on background photos
#FFFFFF · 20%Cart drawer border
#F2F3F4Webflow variables used by the cart checkout button only
#040507Webflow variables used by the cart checkout button only
Typography
Inter Tight · display-hero
The quick brown fox jumpsHero headline and big section titles (Work). 110px · 600 · 1
Inter Tight · headline-marquee
The quick brown fox jumpsMarquee words over the photo band. 57px · 600 · 1.2
Inter Tight · body-lead
The quick brown fox jumpsLead statements (Crafting immersive experiences that captivate…). 32px · 600 · 1.4
Inter Tight · title-lg
The quick brown fox jumpsBlog card titles. 28px · 600 · 1.3
Inter Tight · label-button
The quick brown fox jumpsOutline button labels. 18px · 600 · 1.7
Inter Tight · eyebrow
The quick brown fox jumpsFooter column titles. 15px · 700 · 1.33
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred; some text blocks use 940px |
| Breakpoints | 991px, 767px and 479px (plus 1280 and 1440px min-width steps) |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 6px | |
sm | 16px | |
md | 25px | |
lg | 30px | |
xl | 70px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 16px | |
footer-bottom | 53px | |
footer-top | 60px | |
section-cta | 70px | |
section-x | 72px | |
section | 120px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Headline reveal | Lines move y 200% → 0%, 1100ms outQuint, with skewY 7° → 0° over 500ms, inside an overflow-hidden mask |
| Fade-in | opacity 0 → 1, 1000ms outQuart; small blocks y 40px → 0, 500ms |
| Button hover | Lime circle grows (size, 500ms) and the label rolls to its copy; background colour 300ms ease |
| Hero photos | Follow the mouse and rotate on page scroll (mouse-move and page-scroll interactions), 500ms |
| Skill bars | Width 0 → value, 500ms when scrolled into view |
| Scale | scale → 1, 300ms ease; scale → 0, 400ms outExpo; press scale 0.8, 300ms outQuad |
| Arrow nudge | x ±6px, 500ms |
| Links | Opacity, CSS transition: all .3s |
Do’s and don’ts
- Set everything in Inter Tight 600 in lime #B4FF53 on #111F1E.
- Use lime with opacity (80% for body, 60% for footer links) for lower emphasis.
- Open sections with a ✱ outline tag pill (1px lime, 30px radius) and a big centred title.
- Make the main action a lime outline pill (2px border, 100px radius, 64px tall) with the fill-and-roll hover.
- Keep work and content photos square-cornered; reserve circles for the portrait, icons and badges.
- Fade full-width photos into the canvas with the top and bottom gradients.
- Add a second accent colour, white headlines or grey text.
- Add shadows, glass or blur.
- Round the work images; the --image-round-corner 30px is for pills only.
- Use more than one scribbled word per headline.
- Use letter spacing or weights below 500 for UI text.
- Use the unused --honeydew #F3EAF7.
Example prompt
Any page in the Snag 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 Snag 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/snag.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