flowmanceSleeks Design System
Sleeks is a loud, poster-like creative-studio site. It opens on a full screen of pure #FFFF00 yellow with a three-word black wordmark stacked in the middle, then moves to a yellow band of square-cornered 3D renders and a clean white services area. Type is one family, Plus Jakarta Sans, almost always semibold and tracked tight at −1px.
Signatures that make it recognisable:
- The selection frame. The middle word of the hero (Creative) sits inside a 4px black frame with four square corner handles, like a selected text layer in a design tool, with a hand-drawn cursor arrow pointing at it.
- Yellow fields, black type. The hero and the Featured Works band are flat #FFFF00; the type set on them is pure black. Yellow is also the only button fill (Join us, Send Proposal).
- Stacked nav, no bar. Four links stacked vertically under a circular line logo top-left, and Cart [0] / hello@sleek.io right-aligned top-right. There is no navigation background.
- Gradient icon tiles. Service cards carry an 80px rounded tile filled with a vertical two-colour gradient (green→cyan, orange→yellow, pink→violet, blue→cyan) and a white line icon.
Sleeks is a light design with yellow bands; it has no dark mode.
Colors
Surfaces
#FFFFFFPage background below the hero
#F9F9F9Service cards
#F7F7F7Testimonial cards, the section gray contact band
#FFFFFF#000000The round Up button, the cart drawer, white product titles
Ink
#000000Everything set on yellow
#000000Headlines, nav, links
#000000Body copy is full black too (p uses --black); same as ink
#747474Input text and placeholders, list items, dark-link
#020A0CFooter links (--black-2)
#FFFFFFProject names over images (difference blend)
#FFFFFFText on inverse-canvas
Action
#FFFF00Hero, the work band, the main button (--yellow)
#121212Fill of the Join us button on hover
#8D8D8DFooter link hover
Lines & effects
#DFDEDE1px input borders
#000000The 4px hero selection frame and 2px nav underlines
#FFFFFF · 30%Translucent chips over media
#00FF87#FF930F#F492F0#0061FF#60EFFFTypography
Plus Jakarta Sans · display-hero
The quick brown fox jumpsDigital / Creative / Agency, three centred lines. 150px · 500 · 0.9 · -5px
Plus Jakarta Sans · headline-lg
The quick brown fox jumpsSection titles What we do. 70px · 600 · 1.1 · -1px
Plus Jakarta Sans · title-lg
The quick brown fox jumpsAbout lead Sleek Studio, the creative minds behind agency…. 29px · 600 · 1.4 · -0.05px
Plus Jakarta Sans · body-lg
The quick brown fox jumpsHero paragraph, 230px wide. 20px · 600 · 1.3 · -0.05px
Plus Jakarta Sans · label-nav
The quick brown fox jumpsNav links, Cart [0], product titles. 19px · 600 · 1.05 · -1px
Plus Jakarta Sans · caption
The quick brown fox jumpsInput placeholders. 15px · 500 · 1.33 · -1px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Breakpoints | 991px, 767px, 479px, plus min-width: 768px and 1440px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 5px | |
sm | 15px | |
md | 16px | |
lg | 30px | |
xl | 50px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
form-gap | 15px | |
footer-top | 70px | |
section | 120px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Nav hover | Label rolls up inside a 21px mask; the 2px line grows (size 300ms ease) |
| Button arrow | Arrow moves x/y ±10px, 500ms, with an opacity fade; fill goes to #121212 |
| Text reveal | skew x −15° → 0° with y 40–50px → 0, 500ms ease |
| Fade-up on load | y → 0 and opacity 0 → 1, 1000ms outQuart |
| Pop in | scale 0.4 → 1, 500ms swingTo (sparkle, icon tiles); scale 0 → 1 600ms outExpo |
| Icon hover | scale 1 → 1.1, 100ms ease, and back |
| Band colour | Background colour change, 400ms ease |
| Testimonial hover | scale(.97), 300ms |
| Footer link hover | Colour to #8D8D8D |
| Project names | Continuous horizontal movement of .text-rotator across the work rail |
Do’s and don’ts
- Use flat #FFFF00 for the hero and one feature band, with pure #000000 type on it.
- Set section headings in Plus Jakarta Sans 600 with −1px tracking; the hero at 150px/500/0.9 with −5px.
- Keep photos and cards square-cornered; save rounding for buttons (5px) and icon tiles (about 20px).
- Put service icons in 80px gradient tiles with a white line icon.
- Use black body copy at 17px/600, not grey.
- Frame one key word with a 4px black box and corner handles when you need a hero accent.
- Use yellow #FFFF00 for text or thin lines on white; it disappears (1.07:1).
- Add shadows, borders on cards, or a background bar behind the nav.
- Use the gradient tile colours (#00FF87, #FF930F, #F492F0, #0061FF) outside the icon tiles.
- Use #747474 (ink-subtle) for paragraphs or on the #F9F9F9 / #F7F7F7 cards (about 4.4:1); keep it for form text on white inputs and small links.
- Treat #8D8D8D as more than a passing hover colour; at 3.3:1 it is too light for resting text.
- Round photos or service cards.
- Use weights below 500 for headings.
Example prompt
Any page in the Sleeks 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 Sleeks 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/sleeks.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