TOKENS

Colors

The complete color palette. Rule: 80% neutral, 15% primary (blue), 5% secondary (gold).

Base / Backgrounds

The neutral foundation. These cover 80% of your interface.

Text

Three levels of text hierarchy for clear readability.

Primary — Spiritual Blue

15% of the interface. Used for actions, links, and active states.

Secondary — Modern Gold

5% maximum. Reserve for brand accent and important highlights only.

Borders & Disabled

Semantic

UX feedback states — success, error, warning, info.

Usage in Code

Tailwind (web)

<button className="bg-primary text-white">
  Save
</button>

<div className="bg-background-secondary border border-border-subtle">
  Card content
</div>

StyleSheet (mobile)

import { colors } from "@/tokens";

const styles = StyleSheet.create({
  button: {
    backgroundColor: colors.primary.default,
  },
  card: {
    backgroundColor: colors.background.secondary,
    borderColor: colors.border.subtle,
  },
});