fonthabibi Support

Fonts and colors that already go together.

FontHabibi is a free library of ready-made font and color kits. Pick what you're building, see each kit as a real website, and copy it into any AI builder or your own CSS.

Browse kits Open the mixer Free, no account needed.
TreatmentsGift cardsBook Slow down for an hour Facials, massage and quiet rooms made for doing nothing. Book a treatment See treatments Beauty and spaPlayfair Display with Karla ProductPricingDocs Ship the update tonight Preview every change, then roll it out with one click. Start free Read the docs Tech and SaaSSpace Grotesk with Inter PlaygroupsPartiesVisit Big days for small people Play, paint and make a mess, then go home tired and happy. Book a visit Party packages Kids and familyCaveat with Work Sans MenuHoursFind us Dinner is ready at seven Seasonal plates, a short wine list and a table by the window. Book a table See the menu Restaurant and caféAbril Fatface with Work Sans

What's inside

Kits 555 kits Fonts and colors already matched for 24 kinds of business. Start here. Font pairings 1,264 pairings A heading font, a text font and a label font that work together. Colors 340 color sets Background, text and accent colors, checked so text stays readable. Fonts 1,884 fonts Every Google font. Type your own words and filter by style or mood. Mixer Make your own Put any font pairing on any color set and see it as a real page.

How it works

  1. Say what you're building

    Restaurant, salon, gym, law firm, portfolio. There are 24 kinds of business to pick from.

  2. Choose a kit

    Each kit is drawn as a small website, so you judge the fonts and colors the way your visitors will see them.

  3. Copy it

    Copy for AI hands the whole kit to any AI tool. Copy CSS gives you the variables for your own stylesheet.

What Copy for AI gives you

A short brief any AI tool can follow: the fonts to load, which color goes where, and the CSS variables. Paste it at the top of your prompt and everything it builds uses your kit.

Try it on a kit 
Design system for this project (Restaurant & café), from FontHabibi.
Use only these fonts and colors for everything you build.

FONTS (Google Fonts, free for commercial use)
- Headings: Abril Fatface, weight 400
- Body text: Work Sans
- Labels, buttons, numbers and code: Space Mono

COLORS
- Page background: #1C160D
- Cards and panels: #262015
- Main text: #F1E9DC
- Accent for buttons and links: #F2B33D
- Corner radius: 12px
…then the font link and every CSS variable.

Questions

Is it free?

Yes. No account, no paywall and no limits.

Can I use a kit in client or commercial work?

Yes. Every font is a Google font, free for personal and commercial use, and the color sets are yours to use anywhere. No credit needed.

Which AI tools does it work with?

All of them. Copy for AI is plain text, so it works in Claude, ChatGPT, Gemini, Cursor, v0, Lovable, Bolt, or anywhere else you can type a prompt. Paste it at the top and the AI knows which fonts and colors to use and what each one is for.

Can I change a kit?

Yes. Press Customize on any kit to open it in the mixer, swap the fonts or the colors, and copy the result.

What do AA and AAA contrast mean?

They are the accessibility levels for readable text. AA means every text color has a contrast of at least 4.5 to 1 against its background. AAA means the main text reaches 7 to 1.

New kits by email

One short email when new kits are added. Nothing else.

Support FontHabibi

FontHabibi is free to use. If it saved you time, you can leave a small tip.

Leave a tip