Colors & Typography

Use this guide to keep Hint Marketplace apps visually consistent with the Hint UI.

Colors

Background

Hex	Swatch	Visual role	Token name	When to use
`#FFFFFF`		background-white	`color-bg-default`	Main background for cards, nav, footer, page header, and message window backgrounds.
`#EFF5FD`		surface-medium	`color-bg-surface`	Table headers, active item background on sub-menu.

Control / interaction

Hex	Swatch	Visual role	Token name	When to use
`#0E68E2`		control-primary	`color-action-primary`	Primary button background, icon button, stroke for active/hover state of input field.
`#E9F1FD`		control-secondary	`color-action-secondary`	Use when it is too strong to use control-primary.
`#E5E8ED`		control-disabled	`color-action-disabled`	Disabled control background color.

Control states

Hover - 8% darker than the control color.
Active/pressed - 12% darker than the control color.

Text & icon

Hex	Swatch	Visual role	Token name	When to use
`#1D2334`		text-main	`color-text-primary`	Default text.
`#43739E`		text-secondary	`color-text-secondary`	Labels when a second color is needed for information hierarchy, secondary info, placeholder in text field, or selection.
`#8A90A5`		text-disabled	`color-text-disabled`	Text for disabled control.
`#FFFFFF`		text-on-primary	`color-text-on-primary`	Text on primary blue button.
`#0E68E2`		text-link	`color-text-link`	Text link.

Stroke / outline / divider

Hex	Swatch	Visual role	Token name	When to use
`#E6ECF4`		outline-light	`color-border-subtle`	Secondary or subtle boundaries such as table rows, container outlines, or visual grouping. Use for disabled or low-priority components.
`#C2C7CF`		outline-medium	`color-border-default`	Use when elements need clear separation from the background. Use on light backgrounds where a lighter stroke is too subtle.
`#C4DCF8`		field-outline	`field-outline`	Input fields, dropdowns, and similar component outlines.

Status colors

Hex	Swatch	Visual role	Token name	When to use
`#00602D`		success-icon/text	`color-status-success-text`	Success icons or text.
`#DCFCE7`		success-background	`color-status-success-bg`	Light success background fill for success toasts or status chips.
`#CD0211`		error-icon/text	`color-status-error-text`	Error icons or red text.
`#FFE2E2`		error-background	`color-status-error-bg`	Light red fill or background for critical alerts and status chips, and occasionally, critical action buttons (ex: Delete Account),
`#973C00`		warning-icon/text	`color-status-warning-text`	Warning icons or text.
`#FEF3C6`		warning-background	`color-status-warning-bg`	Light yellow background for warning alerts or status chips.

Typography

Name	Weight / Size / Line height / Tracking	Example	When to use	When not to use
`heading-md`	400 / 24pt / 32pt / -	Welcome back! Here's what's new.	Use for top-level page titles, such as dashboard or major section headers. Example: "Patients", "Sponsors", "Online Signup".	Do not use for card headers or inline sub-sections. It can feel too heavy for localized areas.
`heading-sm`	400 / 18pt / 24pt / -	Welcome back! Here's what's new.	Use for sub-sections or grouped content titles, like a card header or expandable panel label. Example: widget header "Tasks", "Interactions" in patient chart.	Do not use for body emphasis or standalone text. Do not use as a page title or for paragraph text - it blends too closely with body size.
`title-md-bold`	700 / 16pt / 24pt / 0.15pt	Welcome back! Here's what's new.	Use for key labels or section headings within complex layouts (modal titles, list headers). Use for active or selected states in navigation (sidebar, tabs). Use when you need consistent hierarchy within dense product areas.	Do not use as a global or page title (use H1-H4 instead). Do not use for long or multi-line text - it is designed for short, high-visibility labels. Do not rely on bold weight alone to show active state - pair with color or background change.
`title-md`	400 / 16pt / 24pt / 0.15pt	Welcome back! Here's what's new.	Use for default or inactive navigation items, unselected tabs, or short descriptive labels near icons. Use for UI labels that need to match the active style (Title 16 Bold) but appear in a lighter weight. Ideal for maintaining visual rhythm in navigation or multi-item lists where emphasis alternates by weight.	Do not use as body text or paragraph content - it is too large for continuous reading. Do not use for section headers requiring stronger visual hierarchy - use Title 16 Bold or H4 instead. Do not use for metadata or low-emphasis info.
`title-sm`	500 / 14pt / 20pt / 0.1pt	Welcome back! Here's what's new.	Use for smaller titles or secondary emphasis. Example: column headers in tables, button text.	Do not use for long-form text or small metadata. The tighter tracking reduces readability in body copy.
`label-md`	500 / 14pt / 16pt / 0pt	Welcome back! Here's what's new.	Use for form field labels, table headers, and other UI elements requiring medium emphasis.	Do not use for multi-line text or long sentences. It is meant for short labels only.
`body-md`	400 / 14pt / 20pt / 0.25pt	Welcome back! Here's what's new.	Use for all standard paragraph or descriptive content. Ideal for instructions, details, or general UI text.	Do not use for interactive elements like buttons or labels. It is not designed for emphasis or brevity.
`body-sm`	400 / 12pt / 16pt / 0pt	Welcome back! Here's what's new.	Use when space is limited or for secondary info. Example: timestamps, metadata, or small inline help text.	Do not use for essential content or areas requiring high readability. It can appear too subtle.
`label-sm`	500 / 11pt / 16pt / 0.5pt	Welcome back! Here's what's new.	Use for secondary labels, captions, or inline hints - often in smaller UI components or data-dense areas.	Do not use for important information or high-contrast environments. It may be too small to read comfortably.

Updated 1 day ago