SkinFirts Theming: Colors, Typography, and Metrics

SkinFirts uses a centralised theme system under src/theme/ that drives every visual decision in the app. Rather than scattering raw hex values, pixel numbers, or font strings across screens and components, all values are imported from four files — colors.js, fonts.js, metrics.js, and commonStyles.js. This keeps the entire codebase consistent and makes global design changes a single-file edit.

Color Palette

All brand colors live in src/theme/colors.js and are exported as a single colors object.

// src/theme/colors.js
export const colors = {
    primary    : '#2260FF',
    secondary  : '#FFFFFF',
    black      : '#000000',
    shade      : '#CAD6FF',
    shadeLight : '#ECF1FF',
    shadeText  : '#809CFF',
}

Token	Value	Usage
`primary`	`#2260FF`	Buttons, active icons, active states, borders
`secondary`	`#FFFFFF`	Screen backgrounds, text on primary surfaces
`black`	`#000000`	Main body text
`shade`	`#CAD6FF`	Card backgrounds, inactive toggle state, icon button backgrounds
`shadeLight`	`#ECF1FF`	Input backgrounds, secondary card fills
`shadeText`	`#809CFF`	Placeholder text, muted timestamps

Usage example

import { colors } from '../theme/colors';

const styles = StyleSheet.create({
  card: {
    backgroundColor: colors.shade,
  },
  label: {
    color: colors.primary,
  },
});

transparent is imported from react-native-paper inside colors.js but not re-exported. If you need a transparent surface, use the React Native built-in string 'transparent' directly in your styles.

Typography

SkinFirts uses the LeagueSpartan variable font family across all nine weight variants. Font sizes are defined with moderateScale so they adjust proportionally to screen width rather than being hardcoded pixels.

Font scale (`src/theme/fonts.js`)

// src/theme/fonts.js
import { moderateScale } from './metrics';

export const fonts = {
    xxs : moderateScale(10),   // extra-extra small — timestamps, micro labels
    xs  : moderateScale(12),   // extra small — captions, info badges
    sm  : moderateScale(14),   // small — body text, input text
    smd : moderateScale(17),   // small-medium — date numbers
    md  : moderateScale(20),   // medium — screen titles, card headings
    mlg : moderateScale(28),   // medium-large — section headings
    lg  : moderateScale(36),   // large — display numbers
    xl  : moderateScale(48),   // extra large — hero numbers
}

export const fontFamilies = {
    thin       : 'LeagueSpartan-Thin',        // 100
    extraLight : 'LeagueSpartan-ExtraLight',  // 200
    light      : 'LeagueSpartan-Light',       // 300
    regular    : 'LeagueSpartan-Regular',     // 400
    medium     : 'LeagueSpartan-Medium',      // 500
    semiBold   : 'LeagueSpartan-SemiBold',    // 600
    bold       : 'LeagueSpartan-Bold',        // 700
    extraBold  : 'LeagueSpartan-ExtraBold',   // 800
    black      : 'LeagueSpartan-Black',       // 900
}

Font weight reference

Token	Font Family String	Weight
`thin`	`LeagueSpartan-Thin`	100
`extraLight`	`LeagueSpartan-ExtraLight`	200
`light`	`LeagueSpartan-Light`	300
`regular`	`LeagueSpartan-Regular`	400
`medium`	`LeagueSpartan-Medium`	500
`semiBold`	`LeagueSpartan-SemiBold`	600
`bold`	`LeagueSpartan-Bold`	700
`extraBold`	`LeagueSpartan-ExtraBold`	800
`black`	`LeagueSpartan-Black`	900

Usage example

import { fonts, fontFamilies } from '../theme/fonts';

const styles = StyleSheet.create({
  screenTitle: {
    fontFamily: fontFamilies.bold,
    fontSize: fonts.md,
  },
  caption: {
    fontFamily: fontFamilies.light,
    fontSize: fonts.xxs,
  },
  sectionHeading: {
    fontFamily: fontFamilies.semiBold,
    fontSize: fonts.mlg,
  },
});

Metrics & Responsive Scaling

src/theme/metrics.js exports three scaling helpers built on top of Dimensions.get('window'). All helpers are calibrated against a 360 × 800 dp baseline device (a common Android reference). Width and height ratios are capped at 1.5× so tablet layouts don’t over-scale.

// src/theme/metrics.js
import { Dimensions } from 'react-native';

const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');

const guidelineBaseWidth  = 360;
const guidelineBaseHeight = 800;

const widthRatio  = Math.min(SCREEN_WIDTH  / guidelineBaseWidth,  1.5);
const heightRatio = Math.min(SCREEN_HEIGHT / guidelineBaseHeight, 1.5);

export const scale         = (size) => widthRatio * size;
export const verticalScale = (size) => heightRatio * size;
export const moderateScale = (size, factor = 0.5) =>
  size + (scale(size) - size) * factor;

Helper reference

Helper	Scales against	Best used for	Example
`scale(size)`	Screen width	Horizontal dimensions — widths, horizontal padding/margin, icon sizes	`width: scale(100)`
`verticalScale(size)`	Screen height	Vertical dimensions — heights, vertical padding/margin, spacing	`paddingVertical: verticalScale(12)`
`moderateScale(size, factor?)`	Width, dampened by `factor` (default `0.5`)	Font sizes and values that should scale but not as aggressively as raw dimensions	`fontSize: moderateScale(14)`

Usage example

import { scale, verticalScale, moderateScale } from '../theme/metrics';

const styles = StyleSheet.create({
  card: {
    width: scale(300),
    height: verticalScale(120),
    borderRadius: scale(18),
    paddingHorizontal: scale(16),
    paddingVertical: verticalScale(12),
  },
  label: {
    fontSize: moderateScale(14),
  },
});

Always use scale() or verticalScale() for dimension values instead of hardcoded pixel numbers. Hardcoded values look correct on the design reference device but will appear too small on large phones and too large on compact devices. The 1.5× cap in metrics.js also prevents the UI from breaking on tablets.

commonStyles

src/theme/commonStyles.js exposes a StyleSheet of shared style tokens that every screen and component can import. Using these tokens instead of repeating the same declarations keeps the codebase DRY and ensures consistent spacing, typography, and layout behaviour everywhere.

// src/theme/commonStyles.js — key tokens
import { StyleSheet } from 'react-native';
import { colors } from './colors';
import { fontFamilies, fonts } from './fonts';
import { moderateScale, scale, verticalScale } from './metrics';

export const commonStyles = StyleSheet.create({
  // Layout
  container:       { backgroundColor: colors.secondary, flex: 1 },
  row:             { flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center', gap: scale(7) },
  centeredItems:   { alignItems: 'center' },
  buttonsRow:      { flex: 1, alignSelf: 'stretch', flexDirection: 'row', justifyContent: 'space-between' },

  // Margin / spacing boxes
  lgMarginBox:     { marginHorizontal: scale(45), textAlign: 'center', gap: scale(7) },
  mdMarginBox:     { marginHorizontal: scale(30), textAlign: 'center' },
  smTopMargin:     { marginTop: verticalScale(18) },
  mdTopMargin:     { marginTop: verticalScale(36) },
  smSpace:         { marginBottom: verticalScale(12) },
  mdSpace:         { marginBottom: verticalScale(36) },

  // Typography
  subheading:      { textAlign: 'left', fontSize: fonts.md,  fontFamily: fontFamilies.semiBold, color: colors.primary },
  infoText:        { fontSize: fonts.xxs, fontFamily: fontFamilies.light },
  blackText:       { fontSize: fonts.sm,  fontFamily: fontFamilies.medium },
  impText:         { color: colors.primary },
  profileTextRegular: { textAlign: 'left', fontSize: fonts.md, fontFamily: fontFamilies.regular, color: 'black', flex: 1 },

  // Input
  input: {
    width: scale(300), height: verticalScale(45),
    backgroundColor: colors.shadeLight, borderRadius: scale(13),
    marginVertical: verticalScale(12), paddingLeft: scale(12), paddingVertical: verticalScale(6),
  },

  // Icon button circle
  iconButton: { width: 60, height: 60, borderRadius: 30, backgroundColor: colors.shade, justifyContent: 'center', alignItems: 'center' },

  // Divider
  dash: { flexDirection: 'row', flex: 1, height: 0, borderWidth: moderateScale(1), borderColor: colors.primary, marginVertical: verticalScale(5) },
});

Token reference

Token	Purpose
`container`	Root screen wrapper — white background, `flex: 1`
`row`	Horizontal flex row with `space-evenly` justification and a `scale(7)` gap
`centeredItems`	`alignItems: 'center'` shorthand
`buttonsRow`	Stretched `space-between` row — used for action button rows inside cards
`lgMarginBox`	Wide horizontal margin (`scale(45)`) for centered auth-screen content
`mdMarginBox`	Medium horizontal margin (`scale(30)`) — most screen content areas
`smTopMargin`	Small top margin (`verticalScale(18)`) between sections
`mdTopMargin`	Medium top margin (`verticalScale(36)`) between major sections
`smSpace`	Small bottom spacer (`verticalScale(12)`)
`mdSpace`	Medium bottom spacer (`verticalScale(36)`)
`subheading`	Semi-bold `fonts.md` text in `colors.primary`
`infoText`	Light `fonts.xxs` text — captions and metadata
`blackText`	Medium `fonts.sm` text — standard body copy
`impText`	`colors.primary` colour override for emphasis
`profileTextRegular`	Regular `fonts.md` left-aligned text in black — profile fields
`input`	Shared text input shape (overridden per input component for radius)
`iconButton`	60 × 60 circular icon button base shape
`dash`	Full-width horizontal rule in `colors.primary`

Usage example

import { commonStyles } from '../theme/commonStyles';

// Combining tokens
<View style={[commonStyles.container, commonStyles.mdMarginBox]}>
  <Text style={commonStyles.subheading}>Upcoming Appointments</Text>
  <Text style={[commonStyles.infoText, commonStyles.smSpace]}>
    You have 2 appointments scheduled this week.
  </Text>
  <View style={commonStyles.dash} />
</View>

PressableStyles

src/theme/PressableStyles.js exports a single pressableStyles object with a pressed state style. Apply it inside Pressable’s style callback to give interactive elements a consistent press-feedback opacity.

// src/theme/PressableStyles.js
import { StyleSheet } from 'react-native';

export const pressableStyles = StyleSheet.create({
  pressed: {
    opacity: 0.6,
  },
});

import { pressableStyles } from '../theme/PressableStyles';

<Pressable
  style={({ pressed }) => [
    styles.myButton,
    pressed && pressableStyles.pressed,
  ]}
  onPress={handlePress}
>
  <Text>Tap me</Text>
</Pressable>

Get Started

Core Features

Architecture

UI & Theming

SkinFirts Theming: Colors, Typography, and Metrics

Color Palette

Typography

Font scale (`src/theme/fonts.js`)

Font weight reference

Usage example

Metrics & Responsive Scaling

Helper reference

Usage example

commonStyles

Token reference

Usage example

PressableStyles

Build docs developers (and LLMs) love

Get Started

Core Features

Architecture

UI & Theming

Documentation Index

​Color Palette

​Typography

​Font scale (src/theme/fonts.js)

​Font weight reference

​Usage example

​Metrics & Responsive Scaling

​Helper reference

​Usage example

​commonStyles

​Token reference

​Usage example

​PressableStyles

Build docs developers (and LLMs) love

Color Palette

Typography

Font scale (`src/theme/fonts.js`)

Font weight reference

Usage example

Metrics & Responsive Scaling

Helper reference

Usage example

commonStyles

Token reference

Usage example

PressableStyles