Design Tokens
wireai-rn exports its full design system: colors, spacing, radii, and typography. Use them in custom components to match the built-in look automatically.
Ts
1import { colors, darkColors, spacing, radii, textStyles, iconSizes } from "wireai-rn";Colors
| Token | Light value | Description |
|---|---|---|
| colors.primary | #7C3AED | Brand violet: buttons, links, active states |
| colors.primaryBackground | #EDE9FE | Violet tint: selected chip backgrounds |
| colors.background | #FFFFFF | Main background |
| colors.backgroundSecondary | #F5F5F5 | Card backgrounds |
| colors.text | #111827 | Primary text |
| colors.textSecondary | #6B7280 | Secondary text, labels, placeholders |
| colors.border | #E5E7EB | Card borders, dividers, input borders |
| colors.error | #EF4444 | Error states |
| colors.success | #10B981 | Success states |
| colors.info | #3B82F6 | Info states |
Dark mode
Import
darkColors for dark mode equivalents. The shape is identical to colors: swap them based on the user's color scheme preference.Spacing
| Token | Value | Use case |
|---|---|---|
| spacing.xs | 4px | Icon gaps, tiny padding |
| spacing.sm | 8px | Chip gaps, small gaps between elements |
| spacing.md | 16px | Card padding, section gaps |
| spacing.lg | 24px | Large section padding |
| spacing.xl | 32px | Screen-level padding |
| spacing.xxl | 48px | Hero sections |
Border Radius
| Token | Value | Use case |
|---|---|---|
| radii.sm | 4px | Tags, small badges |
| radii.md | 8px | Cards, inputs, buttons |
| radii.lg | 12px | Large cards |
| radii.xl | 16px | Sheet modals, floating panels |
| radii.xxl | 24px | Hero cards |
| radii.full | 9999px | Pill buttons, circular avatars |
Text Styles
Ts
1textStyles.h1 // { fontSize: 28, fontWeight: "700", lineHeight: 34 }
2textStyles.h2 // { fontSize: 22, fontWeight: "700", lineHeight: 28 }
3textStyles.h3 // { fontSize: 18, fontWeight: "600", lineHeight: 24 }
4textStyles.h4 // { fontSize: 15, fontWeight: "600", lineHeight: 22 }
5textStyles.body // { fontSize: 15, fontWeight: "400", lineHeight: 22 }
6textStyles.bodySmall // { fontSize: 13, fontWeight: "400", lineHeight: 18 }
7textStyles.caption // { fontSize: 11, fontWeight: "400", lineHeight: 16 }
8textStyles.code // { fontSize: 13, fontFamily: "monospace" }Usage in custom components
MyCard.tsx
1import { StyleSheet } from "react-native";
2import { colors, spacing, radii, textStyles } from "wireai-rn";
3
4const styles = StyleSheet.create({
5 card: {
6 padding: spacing.md,
7 backgroundColor: colors.backgroundSecondary,
8 borderRadius: radii.md,
9 borderWidth: 1,
10 borderColor: colors.border,
11 gap: spacing.sm,
12 },
13 title: {
14 ...textStyles.h4,
15 color: colors.text,
16 },
17 subtitle: {
18 ...textStyles.bodySmall,
19 color: colors.textSecondary,
20 },
21 primaryBtn: {
22 backgroundColor: colors.primary,
23 borderRadius: radii.md,
24 paddingVertical: spacing.sm,
25 alignItems: "center",
26 },
27 btnText: {
28 color: "#fff",
29 fontWeight: "600",
30 fontSize: 14,
31 },
32});