flowmanceAtra Design System
Atra is a tidy, friendly agency and studio template with a shop built in. It reads like a calm product site: lots of white, pale grey-blue cards, and heavy Inter headings in a deep teal-slate (#20484F) that does the job a brand colour would. Calls to action are mostly small semibold text links with a tiny ▸ arrow, not boxes, so the page feels light even though the headings are bold.
Four signatures make it recognisable:
- Teal-slate headings, no black. Hero and section titles (We make your ideas triumph through design, Our Capabilities, Our Heroes) are Inter 700 in #20484F; only Our Work on the dark band is white. Body copy is grey #555555 and small UI text is near-black teal #072125.
- Arrow text links in pairs. Actions come as a pair of links separated by a 20px gap: a teal one first (Discover Our Work ▸, Buy Atra ▸) and a grey #7E7E7E one second (Enquire Us ▸, View on Webflow ▸). The ▸ is a 4px background image that slides right on hover.
- Inset dark teal band. The Our Work slider sits on a #072125 panel that stops short of the viewport (90% wide, 5px radius), with 60px round teal arrows hanging half off the slider edges.
- Pale-card grid. Services, testimonials, team and the newsletter all sit on #F7F8F9 cards with a 5px radius and no border or shadow; services and team run in 3-column grids with a 50px gap.
Atra is a light-only design.
Colors
Surfaces
#FFFFFFPage background, nav bar, input fields
#F7F8F9Hero band, service, team and testimonial cards, newsletter panel
#FFFFFF#072125Our Work band and the patterned contact band
Ink
#FFFFFFText on primary
#FFFFFF#072125Default text, service and team names, blog titles, footer links
#555555Paragraphs (17px), blog categories, nav-link hover
#222222Top navigation links and dropdown toggles
#7E7E7EThe second, grey arrow link in a pair (Enquire Us, Read More)
#8A8A8AFooter phone and email at 44px, copyright, current nav item, price tags
#FFFFFF#FFFFFFText on inverse-canvas
#FFFFFF · 80%Paragraphs on the dark bands
Action
#20484FFilled form buttons, slider arrows, video play square
#072125Filled button and play-button hover
#20484FAll headings (title-1 to title-4), company name in testimonials
Lines & effects
#29335C · 15%1px input borders
#072125 · 19%Checkbox border
#F4F5F8The 6px ring around overlapping testimonial avatars
#072125 · 50%Project card hover overlay
#222222 · 40%Testimonial slider dots
#222222With dot: Testimonial slider dots
Typography
Inter · display-hero
The quick brown fox jumpsHome hero title, title-1 (82px line height). 85px · 700 · 0.96
Inter · headline-lg
The quick brown fox jumpsSection titles (title-2): Our Capabilities, Our Work. 50px · 700 · 1.0
Inter · title-project
The quick brown fox jumpsWhite project names on the hover overlay. 30px · 600 · 1.0
Inter · body-lg
The quick brown fox jumpsParagraphs (base p, 23px line height). 17px · 500 · 1.35
Inter · label
The quick brown fox jumpsArrow links and filled buttons. 17px · 600 · 1.18
Inter · caption
The quick brown fox jumpsCopyright and small meta. 15px · 500 · 1.53
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1140px, centred |
| Section rhythm | 80px top and bottom on every section (60px at ≤479) |
| Breakpoints | 991px, 767px and 479px (Webflow defaults) |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 16px | |
md | 20px | |
lg | 30px | |
xl | 50px | |
2xl | 80px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
row-gap | 16px | |
footer-bottom | 30px | |
column-gap | 50px | |
footer-top | 60px | |
section-side | 72px | |
section | 80px | |
section-hero | 110px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Arrow link hover | padding-right 14px → 20px plus underline, 200ms (transition: all .2s) |
| Filled button and arrow hover | Background colour change, 200ms |
| Play button hover | #20484F → #072125, 300ms |
| Project card hover | Overlay opacity 0 → 1, 300ms ease; title and link y −15px → 0, 300ms ease |
| Nav dropdown | List opacity 0 → 1, 300ms ease, with a scale-in at 350ms outExpo; caret rotates over 300ms ease |
| Footer and blog hovers | Colour or opacity change, 200–300ms |
| Testimonial and work sliders | Webflow slider, default slide transition |
Do’s and don’ts
- Set hero and section headings in Inter 700 #20484F (accent; white on the dark band) and paragraphs in 17px #555555 (ink-muted).
- Use arrow text links for actions, in a pair: teal link-arrow first, grey link-arrow-muted second.
- Put grouped content on #F7F8F9 (surface-1) cards with a 5px radius and no border or shadow.
- Keep the filled #20484F button for form submits only, full width and 50px tall.
- Use #072125 for dark bands, inset to 90% width with a 5px radius when they hold a slider.
- Keep the 1140px container, 80px section padding and 50px grid gaps.
- Use black #000000 or a second accent colour. The red and pale blue in the CSS are unused.
- Add drop shadows to cards; only open menus get a shadow.
- Round cards past 7px or make filled buttons pills.
- Use #7E7E7E (ink-subtle, 4.0:1 on white) for anything but 17px semibold secondary links.
- Use #8A8A8A (ink-faint, 3.5:1 on white) for paragraph text. Keep it for 44px contact lines, the current nav item and 15px meta.
- Add letter spacing, uppercase labels or a second typeface.
- Let headings run loose: keep line height at 1.0–1.16.
Example prompt
Any page in the Atra 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 Atra 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/atra.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