Colors

Synchronicity’s color system is built around warmth, contrast, and accessibility. Gold serves as the signature accent, while carefully calibrated grays adapt to each theme.

Gold Spectrum

Gold is the heart of Synchronicity. Use it sparingly for maximum impact.

gold-10#fef9e7

gold-20#fdf0c4

gold-30#fbe69f

gold-40#f7d56b

gold-50#eec33e

gold-60#d4af37

gold-70#b8962f

gold-80#9a7d27

gold-90#7c641f

gold-100#5e4b17

Primary gold: gold-60 (#d4af37) is the canonical gold used for primary actions and accents.

Neutral Colors

Void (Dark Backgrounds)

Deep, cool-toned blacks for dark mode interfaces.

void-100#000000

void-90#0a0a0f

void-80#12121a

void-70#1a1a24

void-60#24242f

Cream (Light Backgrounds)

Warm, paper-like tones for light mode interfaces.

cream-10#faf8f3

cream-20#f5f2ea

cream-30#ebe7dc

cream-40#ddd8ca

cream-50#c9c4b5

Cool Gray (Dark Mode Text)

Blue-tinted grays for text and UI elements in dark mode.

cool-10#f8f9fa

cool-20#e9ecef

cool-30#dee2e6

cool-40#ced4da

cool-50#adb5bd

cool-60#6c757d

cool-70#495057

cool-80#343a40

cool-90#212529

Warm Gray (Light Mode Text)

Beige-tinted grays for text and UI elements in light mode.

warm-90#1a1814

warm-80#2d2a24

warm-70#4a453c

warm-60#6b6459

warm-50#8c8579

warm-40#a9a295

warm-30#c4bfb3

warm-20#ddd9cf

warm-10#f0ede6

Ethereal Colors

Subtle accent colors for special states and decorative elements.

mist#e8e4f0

dawn#f0e8e4

dusk#e4ecf0

sage#e4f0e8

Support Colors

Semantic colors for feedback and system states.

success#22c55e

error#ef4444

warning#f59e0b

info#3b82f6

Semantic Color Mapping

Colors are mapped to semantic purposes that adapt per theme:

Token	Light Mode	Dark Mode	True Black
background	cream-10	void-90	void-100
surface	cream-20	void-80	void-90
text-primary	warm-90	cool-10	cool-10
text-secondary	warm-60	cool-50	cool-50
gold-primary	gold-60	gold-60	gold-60
border	cream-40	void-60	void-70

Tip

Always use semantic tokens in your components rather than primitive colors. This ensures your UI automatically adapts to theme changes.

Accessibility

All color combinations in Synchronicity meet WCAG AA standards:

• Text on background: Minimum 4.5:1 contrast ratio
• Large text: Minimum 3:1 contrast ratio
• UI components: Minimum 3:1 contrast ratio

Gold on dark backgrounds provides excellent contrast, while gold on light backgrounds uses the darker gold-80 variant for accessibility.

Usage in Code

import { useColors } from '@synchronicity/react-native';

function MyComponent() {
  const colors = useColors();

  return (
    <View style={{ backgroundColor: colors.background }}>
      <Text style={{ color: colors['text-primary'] }}>
        Hello
      </Text>
      <Text style={{ color: colors['gold-primary'] }}>
        Accent text
      </Text>
    </View>
  );
}

Or import primitives directly:

import { gold, warmGray } from '@synchronicity/tokens/primitives';

const styles = {
  accent: gold['gold-60'],
  text: warmGray['warm-90'],
};