JanitorAI CSS Resource Compilation
Want to make your profile pretty but need some help? Here's a (hopefully) useful list of resources and guides for you to take a look at!
Any dates mentioned on his rentry page made by me will be in DD/MM/YYYY.
This is still a WIP.
Resources
JanitorAI CSS Guides:
For some of these guides the classes used may not be fully up to date, but it should help to start understanding the basics of JAI profile customisation!
- LunaXLee's CSS guide
- LunaXLee's guide on Markdown and HTML
- Oishii's visual CSS guide
- Reo's CSS guide
- Puppy's JAI page breakdown (code list)
General CSS properties:
These sites have info on what all the different CSS properties do.
Important to note:
Not all properties are available on JanitorAI! These two sites list information for all CSS properties, including once disabled on Janitor.
Colours:
Personal recommendation:
For accessibility reasons, I personally recommend always using a contrast checker to double check the contrast between your text and background!
- WebAIM, a contrast checker, has a lot of information about accessibility
- Coolors, generating a colour palette from an image
- Coolors, generating a random colour palette
- imagecolorpicker, colour pick HEX codes from images
- ItsMaclouis on X, someone who posts colour palettes
- CSS colour filter generator
- HEX colour code opacity list
Fonts:
Not all fonts are available on JanitorAi, luckily there's an account that lists all of them!
Regarding fallback fonts:
Aside from the fonts on the page, there are also fallback fonts. These fonts generally work on most devices, but are dependent on the device and browser used so they may not always work for everyone.
- List of fonts available on JanitorAI
- Polare, Io's alt account to showcase their template, has a font list with most (not all) fonts. has Lato/Orbitron fonts showwcased that the other font account doesn't have.
- MDN Web Docs, Page on the font-family property for how to use fonts
- Github, A collection of commonly used fallback fonts
Backgrounds:
- magicpattern, CSS background patterns
- superdesigner, CSS background patterns
- cssgradient, simple gradient generator
- cssgradienteditor, gradients
- colorgradient, gradients
Box & Text shadow generators:
Shapes:
- Github, an 8 point border-radius generator
- W3Schools clip path explanation
- Bennettfeely, clip path generator
- css-generators, masks and clip paths with cut corners
Grid:
May be challenging!
While grid on its own may not be that difficult or complicated, working around Janitor's structure can make it a little more complicated at times.
- W3Schools, Grid module
- MDN Web Docs, Grid guide
- Layoutit, Interactive grid generator
- cssgrid-generator, Grid-area generator
SVGs:
Animations:
Use of animations:
When using animations it is important to consider accessibility. Too many moving parts at once (including GIFs that may play on your page) may be overwhelming for people. Additionally avoid flickers. Too much fast movements and flickering can induce headaches or even seizures in some people.
Media queries:
Miscellanious:
- CSS Minifier, condenses your code
- GIFCity, a collection of gif images like background, buttons, dividers, etc.
Cyanoide yaps about accessibility
The goal of your profile is to be useful, not only to look pretty. Because of this, it is important to keep accessibility in mind when creating your profile. I will be discussing some basics here when it comes to colours, fonts and animations, as these are some of the major areas where decisions can be made that can make your page less accessible.
Colours:
Some colour combinations may be eye-straining or headache-inducing. Eye-strain can be especially common with neon colours, so just keep that in mind if you're working on a neon profile.
Though most importantly, make sure your text and background colours have proper contrast.
Fonts:
When it comes to readability, not every font is made equal. For your smaller texts like the profile/bot bios for example, it is important to keep the fonts as basic as possible. It may seem tempting to use that really pretty fancy font everywhere on your profile, but please don't do that. It will likely result in text that is hard to read for a lot of people. Another small note is to not use too many different fonts, it is generally good to stick to at most 2-3 fonts. Generally, Sans-Serif fonts tend to be the easiest to read for people and Serif fonts are easier to read than cursive. Fonts that are in all uppercase are fine for titles, but get harder to read in longer texts like paragraphs.
I have compiled the available fonts into two general lists. This is only a loose guideline for those who may need it, not any sort of official rating.
These lists are made with the fonts listed as available as of 07 / 01 / 2026.
Do not use:
- LineFont: Literally completely unreadable, it is just lines, not text.
Fonts that should only be used for titles/headers:
- Abril Fatface: Too thick for body/paragraph text and has uneven letter thickness.
font-family: "Abril Fatface", serif; - Alegreya Sans SC: All uppercase font.
font-family: "Alegreya Sans SC", sans-serif; - Black Ops One: Too thick for body/paragraph text.
font-family: "Black Ops One", system-ui; - Berkshire Swash (Christmas2024 event font): Cursive font.
font-family: "Berkshire Swash", serif; - Caveat Brush: Too thick for body/paragraph text.
font-family: "Caveat Brush", cursive; - Chango: Too thick for body/paragraph text.
font-family: "Chango", sans-serif; - Cherry Bomb One: Too thick for body/paragraph text.
font-family: "Cherry Bomb One", system-ui; - Cinzel: All uppercase font.
font-family: "Cinzel", serif; - Cinzel Decorative: All uppercase font.
font-family: "Cinzel Decorative", serif; - Dancing Script (Valentine 2024 font): Fancy cursive font.
font-family: "Dancing Script", cursive; - Fascinate: Decorative font + too thick for body/paragraph text.
font-family: "Fascinate", system-ui; - Graduate: All uppercase font.
font-family: "Graduate", serif; - Jacquard 12: Decorative pixel font.
font-family: "Jacquard 12", system-ui; - Jacquard 24: Decorative pixel font.
font-family: "Jacquard 24", system-ui; - Jim Nightshade: Decorative cursive font.
font-family: "Jim Nightshade", cursive; - Lacquer: Decorative font.
font-family: "Lacquer", system-ui; - Lobster: Cursive font.
font-family: "Lobster", sans-serif; - Monoton: Decorative font + mostly uppercase. Really hard to read on small text sizes due to thickness
font-family: "Monoton", sans-serif; - Notable: All uppercase font + too thick for body/paragraph text.
font-family: "Notable", sans-serif; - Orbitron: Decorative font
font-family: "Orbitron", sans-serif; - Pacifico: Cursive font.
font-family: "Pacifico", cursive; - Petit Formal Script: Cursive font.
font-family: "Petit Formal Script", cursive; - Pirata One: Decorative font.
font-family: "Pirata One", system-ui; - Press Start 2P: Decorative font, too thick for body/paragraph text.
font-family: "Press Start 2P", system-ui; - Rock Salt: Handwritten-style decorative font, all uppercase font.
font-family: "Rock Salt", cursive; - Rubik Glitch: Decorative font.
font-family: "Rubik Glitch", system-ui; - Sigmar One: All uppercase font, too thick for body/paragraph text.
font-family: "Sigmar One", sans-serif; - Silkscreen: All uppercase font, pixel font.
font-family: "Silkscreen", sans-serif; - Sunshiney: Decorative font
font-family: "Sunshiney", cursive;
Fonts that seem fine for body/paragraph text:
- Aladin: Fine for body/paragraph text with a lighter font-weight, but more legible as a title/header.
font-family: "Aladin", system-ui; - Aldrich:
font-family: "Aldrich", sans-serif; - Cardo:
font-family: "Cardo", serif; - Caveat: Okay for body/paragraph text at a larger font-size.
font-family: "Caveat", cursive; - Courgette: Fine for body/paragraph text at a larger font-size and/or lower font-weight, be careful about not making it too small.
font-family: "Courgette", cursive; - Courier Prime:
font-family: "Courier Prime", monospace; - Cutive Mono:
font-family: "Cutive Mono", monospace; - Crimson Text:
font-family: "Crimson Text", serif; - DM Sans:
font-family: "DM Sans", sans-serif; - DM Serif Text:
font-family: "DM Serif Text", serif; - DotGothIc16: Okay for body/paragraph text, may need a normal to heavier font-weight and larger text size. Be careful about not making it too small.
font-family: "DotGothic16", sans-serif; - Grenze Gotisch: Uppercase letters may be a bit difficult to read, but the lowercase text is fine. Judge on a case by case basis.
font-family: "Grenze Gotisch", serif; - Jua:
font-family: "Jua", sans-serif; - Jura (JanitorAI's default font):
font-family: "Jura", sans-serif; - Lato:
font-family: "Lato", sans-serif; - Mitr:
font-family: "Mitr", sans-serif; - Montserrat:
font-family: "Montserrat", sans-serif; - Montserrat Alternates:
font-family: "Montserrat Alternates", sans-serif; - Oleo Script: Okay for body/paragraph text with a ighter font-weight.
font-family: "Oleo Script", system-ui; - Pangolin:
font-family: "Pangolin", cursive; - Pixelify Sans: Pixel font.
font-family: "Pixelify Sans", sans-serif; - Playpen Sans Hebrew:
font-family: "Playpen Sans Hebrew", cursive; - Poppins:
font-family: "Poppins", sans-serif; - Roboto:
font-family: "Roboto", sans-serif; - Roboto Condensed:
font-family: "Roboto Condensed", sans-serif; - Raleway:
font-family: "Raleway", sans-serif; - Share Tech:
font-family: "Share Tech", sans-serif; - Special Elite:
font-family: "Special Elite", system-ui; - Tagesschrift:
font-family: "Tagesschrift", system-ui; - VT323 (2025 event font):
font-family: "VT323", monospace; - Quicksand: (passporttopages event font):
font-family: "Quicksand", sans-serif;