AMS Design Tokens: Colors, Typography, and Spacing

// src/constants/colors.js
export const colors = {
  background:  '#FFFFFF',
  primary:     '#2260FF',
  ps:          '#2563EB',
  secondary:   '#CAD6FF',
  grey:        '#444',
  darkGrey:    '#555',
  lightGrey:   '#666',
  black:       '#000000',
  lightBlue:   '#EEF2FF',
  mutedBlue:   '#7E8BC7',
  input:       '#60A5FA',
  desc:        '#4B5563',
  reason:      '#374151',
  select:      '#809CFF',
  darkText:    '#3A3A3A',
  modal:       'rgba(0, 96, 199, 0.4)',
  modalCancel: '#DCE5FF',
  time:        '#93C5FD',
  ab:          'rgba(255, 255, 255, 0.75)',
  v:           '#A9BCFE',
  error:       '#FF4D4F',
};

// src/constants/Fonts.js
export const Fonts = {
  THIN:       'LeagueSpartan-Thin',
  EXTRALIGHT: 'LeagueSpartan-ExtraLight',
  LIGHT:      'LeagueSpartan-Light',
  REGULAR:    'LeagueSpartan-Regular',
  MEDIUM:     'LeagueSpartan-Medium',
  SEMIBOLD:   'LeagueSpartan-SemiBold',
  BOLD:       'LeagueSpartan-Bold',
  EXTRABOLD:  'LeagueSpartan-ExtraBold',
  BLACK:      'LeagueSpartan-Black',
};

// src/constants/typography.js
import { Fonts } from './Fonts';

export const typography = {
  // Font Sizes (in dp)
  titleSize:        48,   // Hero / onboarding titles
  subtitleSize:     12,   // Caption and label text
  bodySize:         14,   // Standard body copy
  smallDate:        13,   // Compact date chips
  doctorTitle:      15,   // Doctor name on listing cards
  headerDoctorName: 18,   // Doctor name in screen headers
  m:                24,   // Medium emphasis (section headings)

  // Font Families
  fontLight:    Fonts.LIGHT,
  fontMedium:   Fonts.MEDIUM,
  fontSemibold: Fonts.SEMIBOLD,

  // Font Weights (as CSS/RN weight strings)
  thinWeight:     '100',
  semiBoldWeight: '200', // Note: maps to numeric 200 in the source
  lightWeight:    '300',
  regularWeight:  '400',
  mediumWeight:   '500',
  boldWeight:     '700',
};

import { StyleSheet } from 'react-native';
import { ms, s, vs }   from 'react-native-size-matters';
import { colors }      from '../constants/colors';
import { Fonts }       from '../constants/Fonts';
import { spacing }     from '../constants/spacing';
import { typography }  from '../constants/typography';

const MyCard = ({ title, subtitle }) => (
  <View style={styles.card}>
    <Text style={styles.title}>{title}</Text>
    <Text style={styles.subtitle}>{subtitle}</Text>
  </View>
);

const styles = StyleSheet.create({
  card: {
    backgroundColor: colors.secondary,
    borderRadius:    spacing.radiusCard,       // 22 dp
    padding:         spacing.m,                // 20 dp
    marginBottom:    spacing.s,                // 10 dp
  },
  title: {
    fontFamily: Fonts.SEMIBOLD,
    fontSize:   ms(typography.headerDoctorName), // 18 dp, scaled
    color:      colors.primary,
    fontWeight: typography.mediumWeight,        // '500'
  },
  subtitle: {
    fontFamily: Fonts.REGULAR,
    fontSize:   ms(typography.bodySize),         // 14 dp, scaled
    color:      colors.grey,
    marginTop:  spacing.b,                     // 2 dp
  },
});