flowmanceFindy Design System
Findy is a friendly, businesslike job board. It is almost monochrome: white and a cool pale grey (#F4F4F6) for backgrounds, and one deep midnight navy (#1D2445) for nearly all text, buttons and lines (white only on navy buttons and photos). Headlines are bold Archivo in Title Case, and the page is lightened by flat navy-and-white line-art people and bright city photos that carry the only colour.
Four signatures make it recognisable:
- One navy, many alphas. Text is #1D2445 at 100%, paragraphs at 75%, category links at 80%, and borders at 5%, 10% and 15% of the same navy.
- The search hero. A pale-grey 85vh band with a centred column 540px wide: an underlined eyebrow (We are your future), a 65px two-line headline, a 17px subline, a white search field with a magnifier and a navy Search Job button, and a Popular Categories: link row. Line-art illustrations of job seekers stand in the side columns.
- Hairline-bordered white tiles. Category chips, job cards and tags are white boxes with a 1px navy-10% border and small radii (6px chips, 10px cards, 5px tags). Nothing has a shadow.
- Underlined eyebrows. Every section label (We are your future, Get Findy App Now, What They Think) is a short 15px semibold line with a 1px navy-15% rule right under it.
Colors
Surfaces
#FFFFFFPage, nav, cards, chips, inputs
#F4F4F6--white-smoke: hero, alternating light and blog sections, testimonial cards, secondary buttons
#FFFFFFInputs, with #333333 text and #686868 placeholders
#F4F4F6With field: Inputs, with #333333 text and #686868 placeholders
#333333Ink
#FFFFFFText on primary
#1D2445Text on secondary
#1D2445--midnight-blue: all headlines, nav, labels, footer links
#1D2445 · 75%Paragraphs (p default), testimonial job titles
#1D2445 · 80%--midnight-blue-2: category text links
#B6B6B6Light-grey secondary text, measured 9 times on the home page
#FFFFFFAction
#1D2445Search Job, View Blog and other dark buttons
#1D2445#F4F4F6The default .button: Log In / Sign Up, store buttons
Lines & effects
#AAAAAA--dark-grey: the current page in the nav (Home)
#8A8A8A.price-tag on the pricing page
#1D2445 · 10%1px borders on job cards, chips and tags (24 uses)
#1D2445 · 5%Testimonial card border
#1D2445 · 15%Eyebrow underline and feature-list dividers
#E7E7E7Vertical dividers between job-card columns in list view
#686868#1D2445 · 80%Bottom of the fade on location photos (transparent → navy 80%)
Typography
Archivo · display-hero
The quick brown fox jumpsGet Your Desired Job With Findy. 65px · 700 · 1
Archivo · headline-lg
The quick brown fox jumps.title-2: The Only Job Seeker Centric Platform, You Can Get Findy On App And Play Store. 44px · 700 · 1.27
Archivo · title-lg
The quick brown fox jumpsBlog card titles. 24px · 600 · 1.42
Archivo · body-lg
The quick brown fox jumpsHero and section sublines; FAQ questions (.qa-text). 17px · 600 · 1.35
Archivo · label-nav
The quick brown fox jumpsNav links and category chips. 16px · 600 · 1.06
Archivo · eyebrow
The quick brown fox jumps.top-text with its 1px underline. 15px · 600 · 1.33
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1240px, centred |
| Section rhythm | .section is 100px top and bottom, 60px from ≤991, alternating white and #F4F4F6 |
| Breakpoints | 991px, 767px and 479px, plus min-width: 768px and min-width: 1280px rules |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 7px | |
sm | 15px | |
md | 20px | |
lg | 25px | |
xl | 30px | |
2xl | 40px | |
3xl | 60px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-compact | 55px | |
gutter | 72px | |
nav-height | 85px | |
section | 100px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Button hover | background-color and color, 300ms (transition: all .3s) |
| Nav and dropdown hover | Colour or opacity to 80%, 200ms (opacity .2s) |
| Footer link hover | Opacity 80%, 200ms |
| Category link hover | Underline appears, colour to #313137 |
| Job card hover | Background white → transparent, 300ms |
| Dropdown caret | Rotate on open, 400ms swingTo |
Do’s and don’ts
- Use #1D2445 for all text and control it with alpha: 75% for paragraphs, 80% for links, 10% for borders.
- Alternate white and #F4F4F6 sections with 100px vertical padding and a 1240px container.
- Set headlines in Archivo 700 with Title Case (capitalize), and labels at 600.
- Build cards, chips and tags as white boxes with a 1px #1D24451A border and 10 / 6 / 5px radii.
- Put an underlined 15px eyebrow above most section titles (the job section title has none).
- Fade location photos to navy 80% at the bottom before placing white text.
- Add shadows, gradients on UI, or a brand accent colour.
- Use pure black or a neutral grey for body text; use navy at 75%.
- Use #B6B6B6 or #AAAAAA for anything people need to read; they are about 2:1 on white. Keep them for the current nav item and faint meta only.
- Use radii above 10px or full pills for buttons.
- Mix in other illustration styles; keep line art in one navy.
- Animate more than a 300ms colour change on hover.
Example prompt
Any page in the Findy style
More design systems like this
Job Portal 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 Findy 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/findy.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