chatbase.co

Chatbase's homepage is a hairline-ruled, near-white (#fafafa) canvas that lets one saturated cobalt (#3444c6) panel do all the color work. The page is drawn as a single 1240px column bounded by 1px vertical rules that run the full height, with sections cut by horizontal hairlines rather than backgrounds — a drafting-table feel, reinforced by small "+" crosshair ticks at rule intersections. Type is Geist at medium weight throughout: a 64px hero headline with −2.56px tracking that slips into an italic serif for the two emotive words ("agents", "customer"), and 20px body at −0.4px. The hero pairs that quiet left column with a full-bleed cobalt block on the right, tiled with a faint isometric grid, on which a white "Data sources" card floats with a fake cursor — a product still rendered as a poster. Deeper in, a bento of feature cells shares one hairline grid, each cell led by a bold noun ("Procedures", "Widgets", "Helpdesk", "Backstage") followed by muted gray explanatory clauses in the same size, so hierarchy comes from weight and tone rather than scale. Buttons are 48px, 8px radius, black solid primary beside a 1px outline secondary; pills at 9999px carry the tab and badge chrome. The whole thing reads as a serious infrastructure company that has borrowed just one editorial flourish.

Build on a near-white ground (#fafafa) with white (#ffffff) cards and one saturated cobalt accent (#3444c6, hover/secondary #636ecf) used in large flat panels, never in text. Text: near-black (#0a0a0a) primary, #525253 secondary, #909091 tertiary; hairlines in #cfd0d3 at 1px. Set everything in Geist (or Inter) at weight 500: display 64px / 1.1 / −0.04em, section heads 48px / 1.1 / −0.03em, lead body 20px / 1.4 / −0.02em, body 16px. Permit exactly one serif italic (e.g. Instrument Serif, Newsreader Italic) for one or two words inside a display line. Constrain content to a 1240px column bounded by full-height 1px vertical rules; divide sections with horizontal hairlines, not background shifts, and place a small "+" tick at rule intersections. Compose feature areas as a hairline-gridded bento where each cell opens with a bold noun and continues in #525253 at the same size. Render product shots as flat accent-color panels with a faint isometric or diagonal line grid, a white UI card with 12–16px radius and a soft shadow, and optionally a static cursor. Buttons: 48px tall, 12px 20px padding, 8px radius, weight 500, 16px; primary solid black on white text, secondary 1px #cfd0d3 outline; tabs and badges use 9999px pills. Radii elsewhere: 8px default, 12px cards, 16px large media. Motion: subtle — fades and 200ms transitions only. Avoid gradients, drop shadows on the ground plane, and any second accent hue.