flowmanceLoraic Design System
Loraic is a calm, dark consulting and marketing site. A green-tinted near-black (#131615) carries soft off-white type (#EAEEEE, never pure white for body), grey eyebrow labels and one off-white pill button. The warmth comes from friendly business photography (smiling people with laptops) with white dashboard cards floating over the photos, so the page reads as approachable and data-minded rather than cold.
Four signatures make it recognisable:
- The circled cut-out hero. A smiling consultant cut out of his background stands in front of a large circle a shade lighter than the canvas, with a white Sales Analytics line chart card floating at his side. A thin outline circle and a dark dot decorate the corners.
- Grey eyebrows over off-white headlines. Most sections open with a short #999999 label (Welcome to Loraic, How it works, Testimonials) above a 38–45px headline.
- Floating stat cards on photos. Feature photos carry small white UI cards (Total Sales $89,000, 1.8% Up from yesterday) with green chart accents, inside images with 15px corners.
- Rounded charcoal cards. Service cards (15px radius) and testimonial cards (12px radius) are one or two shades lighter than the canvas, with no border and no shadow.
Loraic is a dark-only design.
Colors
Surfaces
#131615Page background and the fixed nav
#181B1AThe testimonial band and service cards
#202422Testimonial cards and the slider arrow buttons
#333333Dropdown link hover
Ink
#131615Text on primary
#EAEEEEHeadlines, links, button fill
#FFFFFFThe active nav link, metric numbers and footer tags
#EAEEEE · 75%Paragraphs (p has opacity: .75) and inactive nav links (80%)
#999999Eyebrows, placeholders, the hero outline circle (--dark-grey)
#FFFFFFAction
#EAEEEEThe pill button and the step-number discs
Lines & effects
#EAEEEE2px tag outlines and the 2px link underline
#999999The 2px outline circle in the hero
Typography
Inter Tight · display-metric
The quick brown fox jumps430+, 1,300, $7.8M. 80px · 600 · 1.2
Inter Tight · headline-lg
The quick brown fox jumpsFeature titles beside photos: Sharing and cross promotion. 45px · 500 · 1.3
Inter Tight · title-xl
The quick brown fox jumpsBlog card titles; step numbers use 28px weight 600. 28px · 500 · 1.2
Inter Tight · body-lg
The quick brown fox jumpsParagraphs at 75%. 18px · 500 · 1.4
Inter Tight · label-lg
The quick brown fox jumpsMetric labels: Clients Worldwide. 19px · 500 · 1.4
Inter Tight · micro
The quick brown fox jumpsFooter tags. 14px · 700 · 1.1 · 1px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 120px top and bottom for every section, measured down to 80px at ≤991, 70px at ≤767 and 50px at ≤479 (.section; the 5% sides stay) |
| Breakpoints | 991px, 767px and 479px, plus 768px+ and 1440px+ rules |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 8px | |
sm | 15px | |
md | 20px | |
lg | 30px | |
xl | 50px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
card-gap | 35px | |
footer-bottom | 40px | |
footer-top | 50px | |
nav-height | 90px | |
section | 120px | |
hero-top | 140px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Fade-in on scroll | opacity 0 → 1 over 1000ms outQuart (1250ms on some) |
| Pop-in | scale 0 → 1 over 600ms outExpo; out over 400ms outExpo |
| Link and line width | Size over 300ms ease and 500ms, used on the short link dashes |
| Arrow nudge | x 0 → 6px over 500ms outQuint; a diagonal x 3px, y −3px over 300ms ease |
| Slide fill | x 100% → 0% over 300ms ease |
| Mouse-move drift | y ±7% over 500ms; a y −100px parallax on two elements |
| CSS transitions | Buttons, nav and dropdown links all .3s; testimonial cards transform .3s, color .3s to scale(.97) |
Do’s and don’ts
- Use #131615 for the canvas and #EAEEEE for headlines; paragraphs are #EAEEEE at 75%.
- Open each section with a #999999 eyebrow in 17px weight 600, then a 38–45px headline.
- Use the off-white pill (button-primary, #EAEEEE on #131615, 30px radius, 50px tall) for the main action and an underlined label-link for the second.
- Put cards on #181B1A or #202422 with 12–15px corners, no border and no shadow.
- Give photos 15px corners and add a small white stat card on top when the section is about results.
- Pad every section 120px top and bottom.
- Use pure #000000 or pure #FFFFFF for the page; the canvas is green-black and body text off-white.
- Add an accent colour to the UI; green belongs only in the photo dashboard cards. Leave --blue #666BFF unused.
- Trust the Webflow variable names (--white is dark, --black is light).
- Use heavy surface jumps; card surfaces step by only a few values.
- Add drop shadows or borders to cards.
- Use uppercase for eyebrows or headlines; keep it for 13–14px tags.
Example prompt
Any page in the Loraic style
More design systems like this
Business 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 Loraic 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/loraic.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