flowmanceForge X Design System
Forge X is a loud, all-caps studio site on pure black. Every line of text is uppercase, including paragraphs, set in the Aspekta grotesk with Inter Tight for running copy. The interface itself is black, white and one charcoal; the colour comes from grainy gradient renders and studio photography in hot orange, pink, violet and chrome. Photos are hard-edged squares; only buttons and tags are rounded.
Signatures:
- The thin slash. Section titles start with a "/" set in weight 100 at the title's size, before a weight-500 word: /What we do, /Recent work, /Our insight. The hero uses the same idea twice and adds a light italic middle word: DIGITAL/FORGEX/STUDIO (FORGEX is weight 200 italic).
- Uppercase everything. body sets text-transform: uppercase globally, so paragraphs, testimonials, nav and buttons are all caps. The only mixed-case text is the Menu word in the round menu-badge artwork.
- White pill on black. One white pill button (40px radius, 58px tall, black label), centred under each block: View our work, View all work, Work with us.
- The rotating Menu badge. The menu trigger is a white + inside a ring of the word "Menu" repeated around a circle, top right.
Forge X is a dark-only design.
Colors
Surfaces
#000000Page background (--black)
#1F1F1FTestimonial band and cards, footer, category tags (--black-second)
Ink
#000000Text on primary
#000000#FFFFFFHeadings, labels, links, nav
#FFFFFF · 70%Paragraphs: the base p has opacity: .7 (service-card text uses .white-paragraph at full white)
#FFFFFF · 50%Service numbers 01, testimonial roles, stars (.gray-text, opacity .5)
#777777Input placeholders (--dark-grey); also the blockquote rule
#ECFCF4Blog titles and category tag text (--honeydew-section), a faint mint white
#FFFFFFAction
#FFFFFFThe animated pill button
#1F1F1FPill hover background (CSS :hover)
#FFFFFFForm and pricing button; hover goes grey with white text
#777777With secondary: Form and pricing button; hover goes grey with white text
Lines & effects
#FFFFFF · 20%Input borders, cart borders and dividers
#FFFFFF2px underline on text links, the 2px ring of index badges
Typography
Aspekta · display-cta · shown in Inter (fallback)
The quick brown fox jumpsFooter call-to-action title (.cta-title, font-size: 7vw). 101px · 500 · 1.2
Aspekta · headline-lg · shown in Inter (fallback)
The quick brown fox jumpsSection titles /What we do, /Feedback from our clients. 50px · 500 · 1.2
Aspekta · title-lg · shown in Inter (fallback)
The quick brown fox jumpsService card titles Creative Direction. 22px · 500 · 1.3
Inter Tight · body-lg
The quick brown fox jumpsHero lead. 22px · 500 · 1.4
Aspekta · quote · shown in Inter (fallback)
The quick brown fox jumpsTestimonial quotes, in full white. 17px · 600 · 1.4
Aspekta · link · shown in Inter (fallback)
The quick brown fox jumpsNav Cart [0], underlined links, testimonial names. 17px · 600 · 1.18
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred (.container) |
| Section rhythm | 100px top and bottom (.section), 80px at ≤991px and 50px at ≤767px |
| Section header | a big-title-flex row with the slash title on the left and a large thin down-arrow (or text) on the right |
| Breakpoints | 991px, 767px and 479px, plus a 1440px+ rule |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 8px | |
sm | 15px | |
md | 30px | |
lg | 40px | |
xl | 50px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
gap | 16px | |
gutter | 72px | |
section | 100px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Heading reveal | Lines start at y 200% (or 100%) inside a clipped wrapper and move to y 0%, 1100ms outQuint |
| Fade in | opacity 0 → 1, 1000ms or 1250ms outQuart |
| Skew settle | skewY 7° → 0°, 500ms, paired with the move |
| Button label roll | y 0% → −100% 400ms inOutCubic; back → 0% 300ms inOutCubic |
| Hover scale | scale 1 → 0.8, 300ms outQuad; back to 1, 300ms ease |
| Hover colour and filter | Background colour and filter, 300ms ease |
| Mouse-move drift | Mouse-move triggers shift elements ±6px in x and y with the cursor, 500ms |
| Service card lift | translateY(-20px), CSS transition: all .3s |
| Marquees | Text rotator and the 150vw logo row scroll sideways while in view |
Do’s and don’ts
- Set every text uppercase, Aspekta for headings and labels, Inter Tight for paragraphs.
- Prefix every section title with a weight-100 / at the same size as the weight-500 words.
- Keep the page canvas #000000 with one step to surface-1 #1F1F1F, joined by black gradients.
- Use the white pill (#FFFFFF, black label, 40px radius, 58px tall) once per section, centred.
- Keep photos square-cornered with 15px gaps; round only buttons, tags and inputs.
- Set paragraphs at white 70% and meta at white 50%.
- Add an accent colour, drop shadows or coloured overlays on UI.
- Use sentence case or a third typeface.
- Round photos or cards.
- Use #777777 (secondary-hover) behind small white text; it only reaches about 4.5:1, so keep that label at 15px semibold or larger.
- Leave the input's typed text at the measured #333333; use ink.
- Run reveal animations longer than 1250ms or add bounce easing.
Example prompt
Any page in the Forge X 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 Forge X 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/forge.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