Skip to main content

Design Token Reference

This document is the canonical reference for every design token exported by @codecollab.co/neopop-rn. All tokens live under src/primitives/ and are re-exported from the package root so you can import them directly.

Table of Contents​

  1. Color tokens
  2. Spacing tokens
  3. Typography tokens
  4. Opacity tokens
  5. Button size tokens
  6. Animation constants

Color tokens​

Source: src/primitives/colors.ts

Base colors​

ConstantHex valueDescription
COLOR_BLACK#0d0d0dPrimary black; used as page background in dark mode
COLOR_WHITE#ffffffPrimary white; used as page background in light mode
COLOR_RED#EE4D37Accent red
COLOR_YELLOW#F08D32Accent amber/yellow
COLOR_BLUE#144CC7Accent blue
COLOR_GREEN#06C270Accent green; used for success toggle state
TRANSPARENTtransparentCSS-compatible transparent value

POP_BLACK scale​

Steps run from 100 (lightest grey) to 500 (near-black). Used for dark-mode surface layers, borders, and disabled states.

KeyHex valueUsage example
100#8A8A8ASubtext, disabled elements, plunks
200#3D3D3DBorders, edge shadows
300#161616Card surfaces, bottom-sheet background
400#121212Deep surface layer
500#0d0d0dSame as COLOR_BLACK
import { POP_BLACK } from '@codecollab.co/neopop-rn';
// POP_BLACK[200] → '#3D3D3D'

POP_WHITE scale​

Steps run from 100 (medium grey) to 500 (pure white). Used for light-mode surface layers, borders, and disabled states.

KeyHex valueUsage example
100#D2D2D2Light-mode borders, shimmer underlay
200#E0E0E0Light-mode disabled elements
300#EFEFEFLight-mode card / tag background
400#FBFBFBNear-white surface
500#ffffffSame as COLOR_WHITE
import { POP_WHITE } from '@codecollab.co/neopop-rn';
// POP_WHITE[100] → '#D2D2D2'

Brand palettes​

Each palette is an 8-step array ordered lightest (index 0) to darkest (index 7). Step 4 is the canonical brand swatch.

POLI_PURPLE​

IndexHex valueNote
0#F5F0FFTint 50
1#E8DFFFTint 100
2#D4C4FFTint 200
3#B59EFFTint 300
4#7C5CFCBrand swatch
5#5B35D5Shade 600
6#3A1FA0Shade 700
7#20104DShade 800

ORANGE_SUNSHINE​

IndexHex valueNote
0#FFF5EF
1#FFEFE6
2#FFD9BF
3#FFB985
4#FF8C3BBrand swatch
5#D96020
6#A03610
7#4D2914

PARK_GREEN​

IndexHex valueNote
0#F0FFF8
1#DDFFF1
2#AAFFD9
3#6AFFB8
4#2ECC84Brand swatch
5#1A9960
6#0F6640
7#124D34

PINK_PONG​

IndexHex valueNote
0#FFF0F3
1#FFE1E9
2#FFC2D1
3#FF8DAA
4#FF4D72Brand swatch
5#CC2248
6#99132C
7#4D1421

MANNNA (amber/gold)​

IndexHex valueNote
0#FFFDF0
1#FFF8E5
2#FFF0BF
3#FFE080
4#FFCC33Brand swatch
5#CC9900
6#996600
7#4D3D15

NEO_PACCHA (lime green)​

IndexHex valueNote
0#FAFFF0
1#FBFFE6
2#F2FFBF
3#E0FF80
4#BBFF33Brand swatch
5#88CC00
6#557A00
7#454C13

YOYO (violet)​

IndexHex valueNote
0#FAF0FF
1#F4E5FF
2#E8CCFF
3#D1A3FF
4#A94DFFBrand swatch
5#7B1FD4
6#52119E
7#33134D

Semantic colors​

Each semantic palette is a 5-step array (index 0 = lightest tint, index 4 = darkest / brand swatch). Use index 4 for prominent UI states such as error borders and success fills.

SEMANTIC_ERROR​

IndexHex valueNote
0#FCE2DDSubtle tint
1#F9C4BB
2#F59D90
3#F17060
4#EE4D37Error red

SEMANTIC_WARNING​

IndexHex valueNote
0#FBDDC2Subtle tint
1#F8C49A
2#F5A870
3#F29848
4#F08D32Warning amber

SEMANTIC_INFO​

IndexHex valueNote
0#C2D0F2Subtle tint
1#9BB0E8
2#6E8EDC
3#4068CF
4#144CC7Info blue

SEMANTIC_SUCCESS​

IndexHex valueNote
0#E6F9F1Subtle tint
1#BFEDDA
2#86DDB8
3#3ECA8A
4#06C270Success green

Spacing tokens​

Source: src/primitives/spacing.ts

Base SPACING scale​

All values are multiples of 4 logical pixels (the 4-point grid).

KeyValue (px)
00
14
28
312
416
520
624
728
832
936
1040
1248
1456
1664
import { SPACING } from '@codecollab.co/neopop-rn';
// SPACING[4] → 16

Semantic spacing aliases​

ConstantValueEquivalent key
SPACING_XS4 pxSPACING[1]
SPACING_SM8 pxSPACING[2]
SPACING_MD16 pxSPACING[4]
SPACING_LG24 pxSPACING[6]
SPACING_XL32 pxSPACING[8]
SPACING_2XL48 pxSPACING[12]

Component depth constants​

ConstantValueDescription
BUTTON_DEPTH3Default 3D edge depth for NeoPopButton
BUTTON_DEPTH_TILTED8Default 3D edge depth for NeoPopTiltedButton
CARD_DEPTH3Default 3D edge depth for NeoPopCard

Bottom sheet geometry constants​

ConstantValueDescription
BOTTOM_SHEET_NOTCH_HEIGHT4 pxHeight of the drag notch
BOTTOM_SHEET_NOTCH_WIDTH40 pxWidth of the drag notch
BOTTOM_SHEET_BORDER_RADIUS16 pxCorner radius of the sheet

Typography tokens​

Source: src/primitives/typography.ts

FontType enum​

Enum valueString valueDescription
FontType.HEADING'heading'Display / heading — no text transform
FontType.CAPS'caps'All-caps label — forced uppercase
FontType.BODY'body'Body copy — no text transform
FontType.SERIF_HEADING'serif-heading'Serif display — renders in Georgia

FontWeight enum​

Enum valueCSS weight value
FontWeight.EXTRA_BOLD'800'
FontWeight.BOLD'700'
FontWeight.SEMI_BOLD'600'
FontWeight.MEDIUM'500'
FontWeight.REGULAR'400'
FontWeight.THIN'300'

TextOverflow enum​

Enum valueString value
TextOverflow.ELLIPSIS'ellipsis'
TextOverflow.CLIP'clip'

LINE_HEIGHT_MULTIPLIER​

Multiply fontSize by the multiplier for the given FontType to obtain the recommended lineHeight.

FontTypeMultiplier
HEADING1.2
CAPS1.3
BODY1.5
SERIF_HEADING1.15

Example: a BODY text at 16 px → lineHeight = Math.round(16 * 1.5) = 24.

LETTER_SPACING_MAP​

FontTypeLetter spacing (px)Effect
HEADING-0.5Slight tightening
CAPS1.5Wide tracking for all-caps
BODY0Default tracking
SERIF_HEADING-0.3Minimal tightening

TEXT_TRANSFORM_MAP​

FontTypeTransform
HEADINGnone
CAPSuppercase
BODYnone
SERIF_HEADINGnone

DEFAULT_FONT_FAMILY​

FontTypeFont family
HEADINGSystem
CAPSSystem
BODYSystem
SERIF_HEADINGGeorgia

Using generateTextStyle​

generateTextStyle is a helper (marked @internal for v1.0) that builds a React Native TextStyle from the token maps above.

import { generateTextStyle, FontType, FontWeight } from '@codecollab.co/neopop-rn';

const style = generateTextStyle(
  FontType.BODY,
  16,
  FontWeight.REGULAR,
  '#ffffff',
);
// → { fontSize: 16, fontWeight: '400', lineHeight: 24, letterSpacing: 0,
//     textTransform: 'none', color: '#ffffff' }

Opacity tokens​

Source: src/primitives/opacity.ts

OPACITY scale​

KeyFloat valuePercentage
000 %
50.055 %
100.110 %
200.220 %
300.330 %
400.440 %
500.550 %
600.660 %
700.770 %
800.880 %
900.990 %
950.9595 %
1001100 %

Semantic opacity aliases​

ConstantValueUse case
DISABLED_OPACITY0.4Disabled interactive elements
OVERLAY_OPACITY0.6Modal / sheet backdrop overlay
SHIMMER_OPACITY0.5Shimmer highlight peak opacity
PRESSED_OPACITY0.8Pressed state feedback
HINT_OPACITY0.6Hint / placeholder text

Button size tokens​

Source: src/primitives/buttons.ts

BUTTON_SIZE​

Three named size variants are available: big, medium, and small.

Propertybigmediumsmall
height50 px40 px30 px
paddingHorizontal30 px20 px25 px
iconHeight20 px16 px14 px
fontSize16 px14 px12 px
borderRadius000
import { BUTTON_SIZE } from '@codecollab.co/neopop-rn';
// BUTTON_SIZE.big.height → 50

Shimmer constants​

ConstantValueDescription
SHIMMER_WIDTH20 pxWidth of the shimmer highlight bar
SHIMMER_GAP_WIDTH5 pxGap between shimmer bars
SHIMMER_DURATION_MS2000 msDuration of one shimmer sweep animation
SHIMMER_DELAY_MS2000 msDelay between shimmer animation repetitions

Animation constants​

Source: src/primitives/buttons.ts

Button press animation​

ConstantValueDescription
BUTTON_PRESS_DURATION_MS80 msDuration of the sink-down animation on press-in
BUTTON_RELEASE_DAMPING15Spring damping for the release (bounce-back)
BUTTON_RELEASE_STIFFNESS300Spring stiffness for the release (bounce-back)

Tilted button animation​

ConstantValueDescription
TILTED_BUTTON_DEPTH8.0 px3D edge depth of the tilted button face
TILTED_BUTTON_SHADOW_DIST20.0 pxMaximum shadow displacement distance
TILTED_BUTTON_Y_POS_FACTOR6.0Vertical position scaling factor for tilt
TILTED_BUTTON_FLOATING_MS1500 msDuration of one levitation bob cycle
TILTED_BUTTON_FLOAT_DELAY_MS750 msDelay before the levitation loop begins
TILTED_BUTTON_TAP_MS100 msDuration of the tap-down animation
TILTED_BUTTON_SHIMMER_WIDTH24.0 pxWidth of the shimmer bar on the tilted button
TILTED_BUTTON_SHIMMER_DELAY2000 msDelay between shimmer passes on tilted button
TILTED_BUTTON_SHIMMER_DUR1500 msDuration of one shimmer pass on tilted button