Design System
The app uses Tamagui for a consistent, themeable UI system with a warm, book-inspired aesthetic.
Configuration
The design system is defined in tamagui.config.ts.
Typography
Three font families:
| Font | Usage | Component |
|---|---|---|
| Fraunces | Headings, display | <Heading> |
| Source Serif 4 | Body text | <Body> |
| DM Sans | UI elements, labels | <Label> |
Typography Components
typescript
import { Heading, Body, Label } from "@/components/ui/typography"
<Heading size="$8">Welcome to Logbook</Heading>
<Body>Track your reading journey.</Body>
<Label>Email address</Label>Colors
Light Theme
| Token | Value | Usage |
|---|---|---|
$cream | #FAF7F2 | Background |
$paper | #F5F1EA | Surface |
$amber | #C4883A | Primary accent |
$charcoal | #3D3835 | Text |
$sage | #8B9A7D | Secondary accent |
$dust | #D4CFC7 | Borders |
Dark Theme
| Token | Value | Usage |
|---|---|---|
$background | #1A1817 | Background |
$surface | #252220 | Surface |
$text | #E8E4DD | Text |
Using Colors
typescript
import { styled, useTheme } from "tamagui"
// In styled components
const Card = styled(View, {
backgroundColor: "$cream",
borderColor: "$dust",
})
// In components
const theme = useTheme()
<View style={{ backgroundColor: theme.cream.val }} />Spacing
Tamagui uses a scale-based spacing system:
typescript
<View padding="$4" marginBottom="$2">
<Text marginTop="$1">Content</Text>
</View>| Token | Value |
|---|---|
$1 | 4px |
$2 | 8px |
$3 | 12px |
$4 | 16px |
$5 | 20px |
$6 | 24px |
Components
Button
typescript
import { Button } from "@/components/ui"
<Button variant="primary" onPress={handlePress}>
Get Started
</Button>
<Button variant="secondary" size="small">
Cancel
</Button>Input
typescript
import { Input } from "@/components/ui"
<Input
placeholder="Enter your email"
value={email}
onChangeText={setEmail}
keyboardType="email-address"
/>Card
typescript
import { Card } from "@/components/ui"
<Card>
<Heading size="$4">Book Title</Heading>
<Body>Author Name</Body>
</Card>Theme Switching
typescript
import { useColorScheme } from "@/hooks/useColorScheme"
const { colorScheme, toggleColorScheme } = useColorScheme()
// colorScheme is "light" or "dark"