Instruction file imported from imfire3/CatDex (
.cursor/rules/design-system.mdc). Copyright stays with the author.
CatDex Design System
Source of truth: src/theme/ via useTheme() from @/theme. Never hardcode hex/rgba or ad-hoc spacing. Do not use tokens from ChatDex Mobile App UI/ (Figma/web export).
import { useTheme } from '@/theme';
const { colors, spacing, radius, typography, shadow, gradients, motion, iconSize } = useTheme();Colors (white-first · indigo brand #6A69F8)
| Token | Value | Role |
|---|---|---|
brand / accent / primary / textBrand |
#6A69F8 |
Primary actions, FAB, headings, active nav |
brandPressed / primaryPressed / accentPressed |
#5554E0 |
Pressed |
brandSoft / primarySoft / accentSoft |
rgba(106,105,248,0.12) |
Soft indigo tint |
background |
#F9F9FB |
App canvas |
surface / surfaceElevated / ctaSecondary / tabBar |
#FFFFFF |
Cards, sheets, secondary CTAs, nav |
surfaceSecondary / surfaceMuted |
#EEF0F2 |
Nested / muted fills |
border / borderDefault |
#EEF0F2 / #D8DBDF |
Borders |
text |
#15172B |
Primary ink |
textBody |
rgba(21,23,43,0.78) |
Body copy |
textSecondary |
#667085 |
Supporting text |
textMuted / placeholder |
#98A2B3 |
Metadata, placeholders |
focusRing |
#6A69F8 |
Focus |
success |
#12B76A |
Success |
warning |
#F79009 |
Warning |
danger |
#E5484D |
Danger / destructive |
onAccent / onPrimary / onBrand |
#FFFFFF |
On indigo / danger |
Coat / rarity accents: src/lib/catTheme.ts only — never as app chrome.
Gradients: primary turquoise, xp turquoise→green. Avoid heavy multi-stop gradients.
Typography
Fonts: Kind Sans only (Regular / Medium / SemiBold / Bold) via src/theme/typography.ts.
Use <Text variant="…" color="…" /> — prefer color="textBrand" for titles. Prefer canonical variants over legacy h1/h2/h3.
| Variant | Size / Line / Weight / Tracking | Usage |
|---|---|---|
display |
48 / 56 / 600 / -1 | Reveal / hero rare |
headline |
32 / 40 / 600 / -0.5 | H1 écran (h1 alias) |
title |
24 / 32 / 600 / -0.25 | Sections / cards (h2 alias) |
body |
16 / 24 / 400 / 0 | Texte principal |
bodySmall |
14 / 20 / 400 / 0 | Secondaire |
label |
12 / 16 / 600 / 0.5 uppercase | Chips / badges |
button |
16 / 24 / 600 / 0 | CTA |
link |
14 / 20 / 500 / 0 | Actions tertiaires |
caption |
12 / 16 / 400 / 0 | Metadata |
h3 |
20 / 28 / 600 / -0.2 | Deprecated — migrate away |
Spacing — 8pt grid
Allowed: 4 · 8 · 16 · 24 · 32 · 40 · 48 · 56 · 64 · 80 · 96
Screen padding 24 · card padding 16/24 · section gap 32 · button height 56.
Radius
Surfaces / inputs / cards: 8 (radius.xs / sm / md / lg / sheet → 8).
Auth & primary CTAs: 16 (radius.cta / radius[16] / xl).
Circles only: pill / full (FAB, avatar, badge, progress).
Elevation
Prefer borders + soft navy-tinted shadows: shadow.none | low | medium | floating | glow.
Cards: border + low. FAB/nav: medium. Sheets: floating. Glow = turquoise FAB only.
Motion / Icons
fast≈140 · standard/normal≈220 · slow≈320 · reveal≈520. Press 0.98 / card 0.99.
Icons: inline react-native-svg; sizes sm=16 md=24 lg=32 xl=40.
Components
- Prefer shared:
Text,Button(primary|secondary|ghost|destructive|icon),TextInput/SearchInput,Card/PhotoCard,Chip,Badge,BottomSheet,EmptyState,Spinner/Skeleton. - Brand: CatDex — “Ton quartier. Tes chats.”
// ❌ BAD
<View style={{ backgroundColor: '#1a1a2e', padding: 13, shadowOpacity: 0.5 }} />
// ✅ GOOD
const { colors, spacing, radius, shadow } = useTheme();
<View style={[{ backgroundColor: colors.surface, padding: spacing.md, borderRadius: radius.lg, borderWidth: 1, borderColor: colors.border }, shadow.low]} />
<Text variant="h3" color="textBrand">Title</Text>