AdvertiseMe — Style Guide

Live reference for the type scale, buttons, and form controls defined in app/(marketing)/globals.css and components/ui — defaults highlighted.

Font size scale

Tailwind v4 defaults — no overrides in globals.css. Body has no explicit text-* class, so it renders at the browser default (16px / text-base).

Buttons

components/ui/button.tsx — 3 sizes only (sm/md/lg). variant="default" size="lg" is the component default.

Form elements

Inputs, selects, comboboxes, and textareas have a single fixed size (no size prop) — height/padding shown are the only values that exist.

Email address Default

h-12 (48px) · px-4 py-1 · text-base (16px)

Input — focus state

Input — invalid state

Input — disabled state

Dropdown select

h-12 (48px) · px-4 · text-base (16px)

Dropdown select — disabled

Dropdown menu (options list)

pt-2.5 pl-2.5 pb-2.5 (10px) · pr-8 (32px, reserved for the checkmark) · text-base (16px) — shared by Select and Combobox option rows, on open

Combobox (multi-select)

Beauty Fitness & Health

min-h-12 (48px) · px-4 py-1 · rounded-lg · text-base (16px) — height/padding hold steady whether or not chips are selected. Its opened menu uses the same option-row styling shown above.

Combobox — empty state

Textarea

min-h-16 (64px) · px-4 py-3 · text-base (16px)

Checkbox

Remember Me

Subscribe to newsletter

Disabled

size-6 (24px) · border-2 · rounded 4px · label text-base (16px)

Radio group

Free

Pro

Disabled

size-6 (24px) · border-2 · fully rounded · label text-base (16px)