Design Tokens

Tokens are the raw values behind every visual decision in the framework. Components read from them via the theme context. You can import any token group directly from reactnatively/theme for use in custom styles or logic.

Spacing

4px base grid, Tailwind-compatible numeric keys.

typescript

import { spacing } from 'reactnatively/theme';

// spacing[4]  → 16
// spacing[6]  → 24
// spacing[8]  → 32
// spacing[12] → 48
// spacing[16] → 64

// Named semantic aliases (via theme context):
// xs: 4    sm: 8    md: 16    lg: 24    xl: 40

Radii

Border radius scale for consistent rounded corners.

typescript

import { radii } from 'reactnatively/theme';

// radii.none   → 0
// radii.xs     → 4
// radii.sm     → 8
// radii.md     → 12
// radii.lg     → 16
// radii.xl     → 20
// radii.xxl    → 28
// radii.full   → 9999

Typography

Font family, size, weight, line height, and letter spacing scales.

typescript

import { fontSize, fontWeight, lineHeight, letterSpacing } from 'reactnatively/theme';

// fontSize.xs  → 11   fontSize.sm → 13   fontSize.md → 15
// fontSize.lg  → 17   fontSize.xl → 20   fontSize.xxl → 24
// fontSize.display → 32

// fontWeight.regular → '400'   fontWeight.medium → '500'
// fontWeight.semibold → '600'  fontWeight.bold → '700'

// lineHeight.tight → 1.2   lineHeight.normal → 1.5   lineHeight.loose → 1.8

Glass tokens

Raw values for the glass rendering engine. In most cases you'll use the elevation prop instead of referencing these directly.

typescript

import { glassTokens } from 'reactnatively/theme';

// glassTokens.blur        → { none: 0, hairline: 4, subtle: 10, ... extreme: 90 }
// glassTokens.elevation   → { 0: { blur: 0, ... }, 1: { blur: 22, ... }, ... 5: { blur: 82 } }
// glassTokens.highlight   → { none: 'transparent', subtle, medium, strong, intense }
// glassTokens.tint.dark   → { ultraThin, thin, surface, elevated, overlay, frosted, tinted }
// glassTokens.border.dark → { subtle, medium, strong }
// glassTokens.glow        → { primary, blue, cyan, rose, success, warning }

Motion tokens

Duration, easing, and spring config values.

typescript

import { duration, easing, springs } from 'reactnatively/theme';

// duration.fast  → 120ms    duration.normal → 220ms    duration.slow → 380ms
// duration.enter → 280ms    duration.exit   → 180ms

// springs.snappy  → { damping: 28, stiffness: 340 }  fast, precise
// springs.liquid  → { damping: 24, stiffness: 260 }  smooth, organic
// springs.reveal  → { damping: 22, stiffness: 200 }  entrance reveal
// springs.bounce  → { damping: 14, stiffness: 280 }  playful
// springs.precise → { damping: 36, stiffness: 400 }  exact timing

Z-depth

Overlay stacking levels for correct z-order composition.

typescript

import { zDepth } from 'reactnatively/theme';

// zDepth.base      → 0
// zDepth.raised    → 10
// zDepth.dropdown  → 100
// zDepth.sticky    → 200
// zDepth.overlay   → 300
// zDepth.modal     → 400
// zDepth.toast     → 500
// zDepth.tooltip   → 600

Importing tokens directly

All tokens are also available as top-level exports from reactnatively for use outside of component render functions:

typescript

import {
  spacing, radii, typography, shadows,
  glassTokens, materialTokens, stateTokens,
  motion, springs, zDepth, breakpoints,
} from 'reactnatively';

// For StyleSheet.create or static values:
const styles = StyleSheet.create({
  card: {
    borderRadius: radii.lg,        // 16
    padding: spacing[4],           // 16
  },
});