Theme Tokens

RNCopilot uses a semantic token system with light and dark themes. All tokens are accessed through the theme object inside StyleSheet.create callbacks. This page lists every available token and its value in both themes.

The primary palette is Indigo (#6366F1 light / #818CF8 dark) with a Teal accent (#14B8A6 light / #2DD4BF dark). The design is clean and professional, optimized for both light and dark environments.

Colors

Access via theme.colors.<category>.<token>.

brand

Token	Light	Dark
`primary`	`#6366F1`	`#818CF8`
`secondary`	`#1E293B`	`#CBD5E1`
`tertiary`	`#14B8A6`	`#2DD4BF`
`primaryVariant`	`#4F46E5`	`#A5B4FC`
`secondaryVariant`	`#334155`	`#E2E8F0`

background

Token	Light	Dark
`app`	`#F8FAFC`	`#0F172A`
`surface`	`#FFFFFF`	`#192236`
`surfaceAlt`	`#F1F5F9`	`#262F44`
`section`	`#EEF2FF`	`#1E293B`
`elevated`	`#F8FAFF`	`#253348`
`input`	`#F1F5F9`	`#1F2B3D`
`disabled`	`#E2E8F0`	`#172035`
`modal`	`#FFFFFF`	`#1E293B`

text

Token	Light	Dark
`primary`	`#0F172A`	`#F1F5F9`
`secondary`	`#334155`	`#CBD5E1`
`tertiary`	`#64748B`	`#94A3B8`
`muted`	`#94A3B8`	`#64748B`
`inverse`	`#FFFFFF`	`#0F172A`
`accent`	`#14B8A6`	`#2DD4BF`
`link`	`#6366F1`	`#818CF8`
`linkHover`	`#4F46E5`	`#A5B4FC`

border

Token	Light	Dark
`default`	`#E2E8F0`	`#2C3548`
`subtle`	`#F1F5F9`	`#192236`
`strong`	`#CBD5E1`	`#3D4A5E`
`focus`	`#6366F1`	`#818CF8`
`disabled`	`#E2E8F0`	`#172035`

icon

Token	Light	Dark
`primary`	`#6366F1`	`#818CF8`
`secondary`	`#1E293B`	`#CBD5E1`
`tertiary`	`#94A3B8`	`#64748B`
`muted`	`#CBD5E1`	`#475569`
`inverse`	`#FFFFFF`	`#0F172A`
`accent`	`#14B8A6`	`#2DD4BF`

state

Token	Light	Dark
`success`	`#10B981`	`rgba(52, 211, 153, 0.8)`
`successBg`	`#ECFDF5`	`rgba(16, 185, 129, 0.15)`
`warning`	`#F59E0B`	`#FBBF24`
`warningBg`	`rgba(245, 158, 11, 0.12)`	`rgba(251, 191, 36, 0.2)`
`error`	`#EF4444`	`#F87171`
`errorBg`	`rgba(239, 68, 68, 0.12)`	`rgba(248, 113, 113, 0.2)`
`info`	`#3B82F6`	`#60A5FA`
`infoBg`	`rgba(59, 130, 246, 0.12)`	`rgba(96, 165, 250, 0.2)`
`disabled`	`#CBD5E1`	`#475569`

overlay

Token	Light	Dark
`modal`	`rgba(0, 0, 0, 0.5)`	`rgba(0, 0, 0, 0.7)`
`pressed`	`rgba(99, 102, 241, 0.12)`	`rgba(129, 140, 248, 0.15)`
`hover`	`rgba(99, 102, 241, 0.08)`	`rgba(129, 140, 248, 0.08)`
`focus`	`rgba(99, 102, 241, 0.15)`	`rgba(129, 140, 248, 0.2)`
`ripple`	`rgba(255, 255, 255, 0.25)`	`rgba(255, 255, 255, 0.2)`
`shadow`	`rgba(0, 0, 0, 0.1)`	`rgba(0, 0, 0, 0.5)`

gradient

Each gradient is an array of two color stops.

Token	Light	Dark
`primary`	`['#4F46E5', '#6366F1']`	`['#1E293B', '#818CF8']`
`secondary`	`['#6366F1', '#818CF8']`	`['#818CF8', '#A5B4FC']`
`accent`	`['#0D9488', '#14B8A6']`	`['#0F766E', '#2DD4BF']`
`success`	`['#059669', '#34D399']`	`['#059669', '#34D399']`
`highlight`	`['#7C3AED', '#A78BFA']`	`['#6D28D9', '#A78BFA']`

shadow

Token	Light	Dark
`color`	`rgba(0, 0, 0, 0.1)`	`rgba(0, 0, 0, 0.5)`
`elevation`	`4`	`6`
`elevationSmall`	`2`	`2`
`elevationMedium`	`4`	`6`
`elevationLarge`	`8`	`12`

mode

Access via theme.colors.mode. Returns 'light' or 'dark'.


const styles = StyleSheet.create((theme) => ({
  container: {
    // Conditional styles based on theme mode
    shadowOpacity: theme.colors.mode === 'dark' ? 0.3 : 0.1,
  },
}));

Spacing

Access via theme.metrics.spacing.* (horizontal) and theme.metrics.spacingV.* (vertical).

All spacing values are responsive — horizontal spacing scales via hs() (based on screen width 390), vertical spacing scales via vs() (based on screen height 844).

Horizontal Spacing (`theme.metrics.spacing`)

Token	Base Value	Scaled Via
`p4`	4	`hs(4)`
`p8`	8	`hs(8)`
`p12`	12	`hs(12)`
`p16`	16	`hs(16)`
`p20`	20	`hs(20)`
`p24`	24	`hs(24)`
`p28`	28	`hs(28)`
`p32`	32	`hs(32)`
`p36`	36	`hs(36)`
`p40`	40	`hs(40)`
`p44`	44	`hs(44)`
`p48`	48	`hs(48)`
`p52`	52	`hs(52)`
`p56`	56	`hs(56)`
`p60`	60	`hs(60)`
`p64`	64	`hs(64)`
`p68`	68	`hs(68)`
`p72`	72	`hs(72)`
`p76`	76	`hs(76)`
`p80`	80	`hs(80)`
`p84`	84	`hs(84)`
`p88`	88	`hs(88)`
`p92`	92	`hs(92)`
`p96`	96	`hs(96)`
`p100`	100	`hs(100)`
`p104`	104	`hs(104)`
`p108`	108	`hs(108)`
`p112`	112	`hs(112)`
`p116`	116	`hs(116)`
`p120`	120	`hs(120)`

Vertical Spacing (`theme.metrics.spacingV`)

Same tokens (p4 through p120) scaled via vs() instead of hs().

Font Sizes

Access via theme.metrics.fontSize.*. All sizes are responsive, scaled via rf() based on screen width 390.

Token	Base Value	Scaled Via
`xxs`	10	`rf(10)`
`xs`	12	`rf(12)`
`sm`	14	`rf(14)`
`md`	16	`rf(16)`
`lg`	18	`rf(18)`
`xl`	20	`rf(20)`
`2xl`	24	`rf(24)`
`3xl`	30	`rf(30)`
`4xl`	36	`rf(36)`
`5xl`	48	`rf(48)`
`6xl`	60	`rf(60)`

Border Radius

Access via theme.metrics.borderRadius.*. Values are scaled via hs() except full.

Token	Base Value
`xs`	`hs(4)`
`sm`	`hs(6)`
`md`	`hs(8)`
`lg`	`hs(12)`
`xl`	`hs(16)`
`full`	`999`

Icon Sizes

Access via theme.metrics.iconSize.*. Values are scaled via hs().

Token	Base Value
`xs`	`hs(14)`
`sm`	`hs(16)`
`md`	`hs(18)`
`lg`	`hs(20)`
`xl`	`hs(24)`

Responsive Helpers

These functions are available from @/theme/metrics for values not covered by tokens:


import { rf, hs, vs } from '@/theme/metrics';

Function	Purpose	Base
`rf(n)`	Responsive font size	Screen width / 390
`hs(n)`	Horizontal scale	Screen width / 390
`vs(n)`	Vertical scale	Screen height / 844

Prefer theme tokens (theme.metrics.spacing.p16) over calling helpers directly (hs(16)). The tokens are pre-computed and keep your styles declarative. Use the helpers only for custom values that don’t have a matching token.