Typography is the product’s voice. I selected Inter and a strict type scale so hierarchy, rhythm, and legibility are predictable and repeatable across screens. Below are the exact styles, their intended uses, and guidance for designers.
Typeface - Inter (Single Family System)
APPEX NOW uses Inter exclusively as its UI typeface. Choosing one, well-crafted family keeps the product voice consistent, reduces visual friction, and makes type decisions predictable across every screen and component.
Type Scale
Token
Typeface/Weight
Size
Line Height
Primary Use
Heading - 1
Inter / Bold
48
56
Page / screen title, hero headings
Heading - 2
Inter / Bold
36
48
Section title, major panels
Heading - 3
Inter / Bold
24
32
Card title, modal header
Sub Heading - 1
Inter / Bold
18
24
Leading labels, small section heads
Sub Heading - 2
Inter / Bold
16
24
Field headings, inline labels
Sub Heading - 3
Inter / Bold
14
20
Minor labels, badge text
Body - 1
Inter / Regular
16
24
Primary paragraph copy
Body - 2
Inter / Regular
14
20
Secondary paragraph, helper text
Caption
Inter / Regular
12
18
Captions, micro copy
Textfield
Inter / Regular
14
22
Form field text
Placeholder
Inter / Regular
14
22
Placeholders
Button
Inter / Semi-Bold
16
24
Button labels, CTAs
Design Rationale
Single Family:
Inter gives neutral, legible letterforms and consistent weights for UI use.
Clear Hierarchy:
Bold headings with precise sizes create distinct visual levels.
Predictable Rhythm:
Exact line-heights ensure vertical spacing aligns with the 8-pt layout rhythm.
Practical Emphasis:
Semi-Bold for buttons, Bold for headings, Regular for body copy emphasis is meaningful and consistent.
Accessibility Checks
Contrast:
Verify text/background pairs meet WCAG thresholds body text must meet 4.5:1; large text (defined by the system here as 18px regular or 14px bold) must meet 3:1.
Legibility:
Body styles are 16/24 and 14/20, use these exact sizes for content and helper copy.
Weight:
Do not use ultra-thin weights for UI text; stick to Regular, Semi-Bold, Bold as specified.
Line Length:
Keep readable column widths; when using body-1 (16/24) aim for comfortable line lengths in your layouts.
Visual Documentation To Include
A type specimen showing each token at the exact size/line-height.
Component examples using exact tokens (buttons, cards, inputs, form labels).
Accessibility callouts (contrast checks with neutral tokens).
A Figma library with named text styles for each token.