AutoMod brand.
One look for every product.
The colors, type, shapes and words behind AutoMod. The website, the dashboard and every product are built from the same system, so this page is the reference for all of it.
Principles
Four rules every page and component follows.
Compact
Dense where people work, with small gaps and short labels. Nothing is bigger than it needs to be.
Calm surfaces
Levels are separated by color and a 1px line. No shadows, glows or gradient fills.
One accent
Purple marks what you can act on. Everything else stays neutral, gold is reserved for paid plans.
Motion with a purpose
A beam along a connection, a small hover lift. Every animation respects reduced motion.
Logo
The folded A is the mark. Next to it, the name is set in Inter at weight 650.
AutoModColor
Neutral surfaces, one brand accent and a few status colors. Every value is a token, with a dark and a light variant.
Accent and status
Primary actions, selection, focus and data such as charts and meters.
Only the paid plans: Premium and Pro badges and prices.
Positive states: accepted, online, checks.
Notices that need attention, open items.
Errors, destructive actions, denied states.
Only where Discord itself is meant.
Surfaces
Four levels, each lighter than the one behind it. Surfaces never carry a shadow, a 1px line separates them (8% white or black, 16% for hover and strong borders).
The page behind everything.
Cards and panels.
Rows, tags and icon boxes inside cards.
Secondary buttons and inputs.
Text
Titles and body copy.
Descriptions and second lines of headlines.
Meta information, captions, placeholders.
Typography
Inter for everything, self-hosted, with the alternates cv11 and ss01. Headlines are set tight, body copy stays at normal spacing.
Fallback: system UI fonts. Headlines use letter spacing of -0.03em, nothing is set in all caps.
Space and shape
A 4px base, three radii and one content width of 1320px for every page.
12px between cards, 12 to 18px inside them, 88px between website sections.
Components
The same building blocks on the website and in the dashboard. These are the real components, not pictures of them.
One primary button per area. Secondary buttons use the control color, never the color of the card they sit on.
Tags are neutral boxes, status is shown by text color or a small dot. Gold outlines mark plan features.
Rows inside a card sit on the inset color. Icons stay neutral inside an icon box.
Charts and meters use the brand color. Numbers are tabular so columns line up.
Icons
Tabler Icons with a 1.75 to 1.8 stroke, at 15, 16 or 20px.
Icons are neutral and sit in an icon box: inset color, 1px line, 8px radius. On hover of an interactive card the icon turns purple.
Writing
Short, direct and calm. We describe what something does, not how amazing it is.