Back to site
Kello.ai

Design system

A live reference built from styles/tokens.css, base.css, components.css and scripts/icons.js. Values below are read from the CSS at load, so this page always matches the site. How and when to use each piece is in DESIGN.md; new pages start from page-template.html.

Colour

Semantic colours

Components use these roles. The primitive palette underneath appears after them for reference; use it only in tokens.css.

Surfaces

Text

Lines & marks

Primitive palette

Typography

Type scale

Inclusive Sans, 400 and 500. The spec column is measured from the rendered sample.

.t-displayYour next hire
.t-headingFind the plan
.t-subheadSend Kello a JD. Get a shortlist.
.t-titleWe read between the lines
.t-card-titleSenior backend engineer
.t-leadKello finds the candidates worth calling, so your team can spend more time hiring.
.t-ui-lgHow does Kello work?
.t-bodyYou send Kello a job description or a quick brief, and it returns a reasoned shortlist.
.eyebrowPricing
.t-small30 candidates worth calling
.t-labelFor occasional hiring
--font-scriptKaran Mehta
Spacing

4px scale and page rhythm

Layout

Shape

Radius & elevation

Section containers are square with no shadow. Radius and shadow belong to controls.

Icons

Sprite (scripts/icons.js)

Each icon at .icon-sm 16, .icon-md 20 and .icon 24. <svg class="icon icon-sm" aria-hidden="true"><use href="#i-NAME"/></svg>

Components

Buttons

default · 40px Try Kello for free Login See how it works
.btn-lg · 48px Try Kello for free Send us the JD Get started
.btn-block
Try Kello for free Request a callback

Chips, pills, badges, avatars

PAY PER JOB SAVE 30% NEW 100M+ profiles reviewed

Section head, point list, dashed rule

Eyebrow

Section heading
on two lines

  • Reads the JD like a recruiter
  • Separates must-haves from nice-to-haves
  • Flags what the JD leaves out

Ruled frame

Rules overhang by --frame-overhang, with --color-mark crosses on the corners. Used for testimonials, pricing and the CTA card.

CELL

$100

CELL

Cells are square and divided by 1px rules.

CELL

Put the four corner spans last inside the frame.

Tabs

The highlight glides to --tab-pos. Click to try it.

FAQ and ask field

An AI-native sourcing platform that delivers a focused shortlist from a job description.
It reads between the lines, searches 100M+ profiles and returns a reasoned shortlist.

Copy field and prompt card

https://kello.ai/mcp
  • “Who are the eng leaders at CRED? I’m looking to onboard them as customers.”
Motion

Durations & easing

Everything that moves has a reduced-motion fallback.