Typography
Noto Sans for all text, Noto Sans Mono for monospace. A single font family for maximum simplicity and dashboard clarity.
Type Scale
11 levels from display headings to overlines. All sizes use Noto Sans.
display-lg
36px / 700 / 44px
Egbe Lajo Design System
display-sm
30px / 700 / 38px
Egbe Lajo Design System
heading-xl
24px / 600 / 32px
Egbe Lajo Design System
heading-lg
20px / 600 / 28px
Egbe Lajo Design System
heading-md
18px / 600 / 26px
Egbe Lajo Design System
heading-sm
16px / 600 / 24px
Egbe Lajo Design System
body-lg
16px / 400 / 26px
Egbe Lajo Design System
body-md
14px / 400 / 22px
Egbe Lajo Design System
body-sm
13px / 400 / 20px
Egbe Lajo Design System
caption
12px / 400 / 18px
Egbe Lajo Design System
overline
11px / 600 / 16px
Egbe Lajo Design System
Font Families
SANS (DEFAULT)
Noto Sans
AaBbCcDdEeFf 0123456789
Headings, body text, labels, buttons
MONO
Noto Sans Mono
AaBbCcDdEeFf 0123456789
Code blocks, data values, IDs
Usage in Code
<h1 className="text-display-sm">Page Title</h1>
<p className="text-body-lg text-foreground-secondary">Description</p>
<span className="text-caption text-foreground-muted">Timestamp</span>
<code className="font-mono text-body-sm">ID-12345</code>import { textStyles } from "@/components/mobile";
<Text style={textStyles["heading-xl"]}>Page Title</Text>
<Text style={[textStyles["body-lg"], { color: colors.foreground.secondary }]}>
Description
</Text>