flowmanceJore Design System
Jore (styled Joré©) is a black, cinematic studio site. It is quiet and sharp: square corners everywhere, medium-weight Switzer type with tight tracking, three nav words across the top, and big saturated portrait photography (red, teal, pink) doing all the talking. Sections breathe with very large vertical space (300px), and long one-sentence headlines light up word by word as you scroll.
Four signatures make it recognisable:
- Scroll-fill headlines. Section openers are one long 45px sentence that starts with the section name and ©: Services© — Built beyond execution. Brand, design, technology, and performance, unified as one system. The words fill from grey to white as you scroll past.
- Zero radius. Apart from the 4px contact inputs, nothing has a border radius. Images, cards, buttons and thumbnails are all hard-edged rectangles.
- Italic serif indexes. Small numbers like (01) are set in Libre Caslon Condensed italic, the only serif on the page, against the sans everywhere else.
- Three-word top bar. Joré© left, Menu centred, New York, US right, fixed over everything on a soft black fade.
Jore is dark-only on screen; the footer is the one white band.
Colors
Surfaces
#000000Page background
#222222The Clients© and testimonial band
#444444Contact form inputs
#FFFFFFFooter
Ink
#000000Text on primary
#FFFFFFHeadlines, nav, card titles
#FFFFFF · 70%Paragraphs and list items (the p and li rules set opacity: 0.7)
#FFFFFF · 80%A few secondary lines
#FFFFFF · 50%John Doe, Founder, serif indexes, unfilled headline words
#FFFFFF#FFFFFF#000000Text on inverse-canvas
Action
#FFFFFFThe only filled button: white, black text, square
#FFFFFF#C2001AOne red element on the home page (the --colors--fourth-color variable); it matches the red of the hero photo
Lines & effects
#FFFFFF · 10%Service cards (they read as about #1A1A1A on black)
#FFFFFF · 20%Overlay layers (11 elements, not visible in the captured screenshots)
#FFFFFF · 18%The 1px divider in the clients band
#FFFFFF · 59%Placeholder text on field
#000000 · 50%Flat dark layers on images and video (linear-gradient at 0.4, 0.5 and 0.7)
#F5F5F5The footer-color variable (whitesmoke)
#3F3F3F · 25%Footer newsletter field, at rest and on focus
#BBBBBB · 30%Footer newsletter field, at rest and on focus
Typography
Switzer · display-hero
The quick brown fox jumpsWORKS© section title (--hero-title: 15.5rem). 248px · 500 · 1.15 · -5px
Switzer · headline-lg
The quick brown fox jumpsScroll-fill section sentences (292 split words measured). 45px · 500 · 1.15 · -1px
Switzer · title-md
The quick brown fox jumpsHero sub-lead We build digital experiences that don't break at scale. 17.6px · 600 · 1.3 · -0.3px
Switzer · body-lg
The quick brown fox jumpsMenu links. 17.6px · 400 · 1.15 · -0.5px
Switzer · label
The quick brown fox jumpsNav words. 16px · 500 · 1.15 · -0.5px
Switzer · caption
The quick brown fox jumpsFooter text, text links and form inputs (14px). 14.4px · 500 · 1.15 · -0.2px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1400px (also 1100px and 800px for text blocks) |
| Section rhythm | 300px top and bottom on desktop, which is the template's defining amount of air |
| Breakpoints | 991px, 767px and 479px, plus a 1920px+ step |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 3px | |
xs | 10px | |
sm | 16px | |
md | 20px | |
lg | 30px | |
xl | 50px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 16px | |
gutter | 29px | |
section-work | 50px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Scroll-fill headline | ScrollTrigger top 100% → bottom 90% or bottom 70%, scrub 0.9; words go from grey to white |
| Line reveal | SplitText lines y 120% → 0, staggered (0.55s to 3s across a block) |
| Slide-in text | x −110% → 0%, 400ms power1.out |
| Large reveals | 900ms expo |
| Image settle | scale 0.93 → 1 and y −10% → 0, 500ms |
| Fade | opacity 0 → 1, 500ms; hover fades 200–300ms ease |
| Logo flip | rotateY 0 → 180° → 360°, 1000ms swingTo |
| Menu | Panels move ±50vw and −50vh, 500ms |
| Button hover | opacity 1 → 0.76, 200ms |
| Text-link roll | Label moves up out of a 19px mask; copy follows |
| Marquee | Client logos drift continuously (sine.out, 4–6s cycles) |
Do’s and don’ts
- Keep every corner square (radius 0), including buttons and images.
- Open sections with one headline-lg sentence (45px, weight 500, −1px) starting Name© — and fill it grey to white on scroll.
- Use 300px vertical section padding on desktop.
- Set body text at white 70% (#FFFFFFB3) and meta at 50% (#FFFFFF80).
- Use the italic Libre Caslon Condensed only for (01)-style indexes.
- Put service content on glass cards (#FFFFFF1A with 20px blur), not on solid greys.
- Round anything, add shadows or add borders other than the 18% hairline.
- Use the extra Google fonts (Inter, Oswald, Merriweather, Playfair, IBM Plex Mono, Changa One).
- Use #C2001A as a UI colour for buttons or links.
- Use weights above 600 or uppercase outside the giant display titles.
- Put grey hex text on black; use white with alpha.
- Remove the black fade behind the fixed nav; links need it over photos.
Example prompt
Any page in the Jore 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 Jore 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/jore.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