Rainbow’s typography system provides precise control over text rendering with consistent sizing, spacing, and alignment across iOS, Android, and Web.
Text Component
The primary text component with full typography control.
Props
Text size using design system tokens (e.g., “15pt”, “17pt”, “20pt”)
Font weight: “regular” | “medium” | “semibold” | “bold” | “heavy” | “black”
color
TextColor | CustomColor
required
Text color using semantic tokens or custom color
align
'left' | 'center' | 'right'
Text alignment
Maximum number of lines to display
ellipsizeMode
'head' | 'middle' | 'tail' | 'clip'
How to truncate text when it exceeds numberOfLines
Transform text to uppercase
Use tabular (monospaced) number rendering
Set to true if text contains emoji for proper vertical alignment on iOS
Press handler for interactive text
Usage
import { Text } from '@/design-system';
function Example() {
return (
<Text
size="17pt"
weight="semibold"
color="label"
numberOfLines={2}
>
Rainbow Wallet
</Text>
);
}
With Emoji
When rendering text with emoji, set containsEmoji={true} for proper vertical alignment:
<Text
size="20pt"
weight="bold"
color="label"
containsEmoji
>
🌈 Rainbow Wallet
</Text>
Interactive Text
<Text
size="15pt"
weight="medium"
color="blue"
onPress={() => console.log('Pressed!')}
>
Tap me
</Text>
Text Sizes
Rainbow uses point-based sizing for consistent cross-platform typography:
Standard Sizes
type TextSize =
| "10pt" | "11pt" | "12pt" | "13pt" | "15pt"
| "17pt" | "20pt" | "22pt" | "26pt" | "30pt"
| "34pt" | "44pt" | "54pt" | "64pt";
Line Height Variations
Some sizes have alternate line heights:
"13pt / 135%" // 13pt with 135% line height
"13pt / 150%" // 13pt with 150% line height
"15pt / 135%"
"15pt / 150%"
"17pt / 135%"
"17pt / 150%"
"20pt / 135%"
"20pt / 150%"
Icon Sizes
Special sizes for icon text:
"icon 8px" | "icon 9px" | "icon 10px" | "icon 11px"
| "icon 12px" | "icon 13px" | "icon 14px" | "icon 15px"
| "icon 16px" | "icon 17px" | "icon 18px" | "icon 19px"
| "icon 20px" | "icon 21px" | "icon 23px" | "icon 26px"
| "icon 28px" | "icon 34px"
Usage Examples
// Large heading
<Text size="34pt" weight="bold" color="label">
Welcome
</Text>
// Body text with increased line height
<Text size="15pt / 150%" weight="regular" color="label">
This text has more breathing room between lines.
</Text>
// Small caption
<Text size="11pt" weight="medium" color="labelTertiary">
Updated 2 hours ago
</Text>
Font Weights
Rainbow uses SF Pro Rounded with six weight variants:
Weight Comparison
<Stack space="12px">
<Text size="17pt" weight="regular" color="label">Regular</Text>
<Text size="17pt" weight="medium" color="label">Medium</Text>
<Text size="17pt" weight="semibold" color="label">Semibold</Text>
<Text size="17pt" weight="bold" color="label">Bold</Text>
<Text size="17pt" weight="heavy" color="label">Heavy</Text>
<Text size="17pt" weight="black" color="label">Black</Text>
</Stack>
Color Tokens
Semantic color tokens for text:
type TextColor =
| "label" // Primary text
| "labelSecondary" // Secondary text
| "labelTertiary" // Tertiary text
| "labelQuaternary" // Quaternary text
| "blue" // Accent blue
| "green" // Success green
| "red" // Error red
| "orange" // Warning orange
| "yellow" // Highlight yellow
| "pink" // Accent pink
| "purple" // Accent purple;
Custom Colors
<Text
size="15pt"
weight="medium"
color={{ custom: '#FF6B6B' }}
>
Custom colored text
</Text>
Typography Implementation
The typography system uses Capsize for precise vertical alignment:
Font Metrics
export const fontMetrics = {
capHeight: 1443,
ascent: 1950,
descent: -494,
lineGap: 0,
unitsPerEm: 2048,
} as const;
{
fontSize: 17,
letterSpacing: 0.37,
lineHeight: 22,
marginCorrection: {
android: 0,
ios: -0.3,
}
}
Heading Component (Deprecated)
The Heading component is deprecated. Use Text instead:
// ❌ Old way
<Heading size="26px / 30px (Deprecated)" weight="bold" color="label">
Title
</Heading>
// ✅ New way
<Text size="26pt" weight="bold" color="label">
Title
</Text>
Best Practices
1. Use Semantic Sizes
Prefer semantic sizes over deprecated pixel sizes:
// ✅ Good
<Text size="17pt" weight="semibold" color="label">
// ❌ Avoid
<Text size="18px / 27px (Deprecated)" weight="semibold" color="label">
2. Set containsEmoji for Emoji
Always set containsEmoji={true} when rendering emoji:
// ✅ Good
<Text size="15pt" weight="regular" color="label" containsEmoji>
🎉 Celebration!
</Text>
// ❌ Will have alignment issues on iOS
<Text size="15pt" weight="regular" color="label">
🎉 Celebration!
</Text>
3. Use Semantic Colors
Prefer semantic color tokens over custom colors:
// ✅ Good - adapts to dark mode
<Text size="15pt" weight="regular" color="label">
// ❌ Avoid - doesn't adapt to dark mode
<Text size="15pt" weight="regular" color={{ custom: '#000000' }}>
4. Consistent Typography Scale
Use a limited set of sizes for visual hierarchy:
// Common scale
"11pt" // Small text, captions
"13pt" // Secondary text
"15pt" // Body text
"17pt" // Emphasized body text
"20pt" // Small headings
"26pt" // Medium headings
"34pt" // Large headings
SF Mono (Monospace)
For code and tabular data:
<Text
size="13pt"
weight="medium"
color="label"
tabularNumbers
style={{ fontFamily: 'SF Mono' }}
>
0x1234...5678
</Text>