/ frontend / theme / typography.ts
typography.ts
  1  const weightScale = {
  2    'Extra Light': 200,
  3    Light: 300,
  4    Regular: 400,
  5    Medium: 500,
  6    'Semi Bold': 600,
  7  };
  8  
  9  //Body-1
 10  export const body1 = {
 11    fontFamily: 'Inter',
 12    fontWeight: weightScale['Regular'],
 13    fontSize: '14px',
 14    lineHeight: '19.6px',
 15    letterSpacing: '0.02em',
 16    textDecoration: 'none',
 17    textCase: 'undercase',
 18  };
 19  
 20  //Body-2
 21  export const body2 = {
 22    ...body1,
 23    fontSize: '12.44px',
 24    lineHeight: '17.42px',
 25    letterSpacing: '0.02em',
 26    textDecoration: 'none',
 27    textCase: 'undercase',
 28  };
 29  
 30  //Button
 31  export const button = {
 32    fontFamily: body1.fontFamily,
 33    fontWeight: weightScale['Medium'],
 34    fontSize: '14px',
 35    lineHeight: '19.6px',
 36    letterSpacing: '0.02em',
 37    textDecoration: 'none',
 38    textCase: 'uppercase',
 39    textTransform: 'none',
 40  };
 41  
 42  //Caption
 43  export const caption = {
 44    fontFamily: body1.fontFamily,
 45    fontWeight: 'Regular',
 46    fontSize: '12.44px',
 47    lineHeight: '17.42px',
 48    letterSpacing: '0.02em',
 49    textDecoration: 'none',
 50    textCase: 'undercase',
 51  };
 52  
 53  //Overline
 54  export const overline = {
 55    fontFamily: body1.fontFamily,
 56    fontWeight: weightScale['Regular'],
 57    fontSize: '12.44px',
 58    lineHeight: '17.42px',
 59    letterSpacing: '0.02em',
 60    textDecoration: 'none',
 61    textTransform: 'none',
 62  };
 63  
 64  //Subtitle-2
 65  export const subtitle2 = {
 66    fontFamily: body1.fontFamily,
 67    fontWeight: weightScale['Medium'],
 68    fontSize: '14px',
 69    lineHeight: '19.6px',
 70    letterSpacing: '0.02em',
 71    textDecoration: 'none',
 72  };
 73  
 74  //Subtitle-1
 75  export const subtitle1 = {
 76    fontFamily: body1.fontFamily,
 77    fontWeight: weightScale['Medium'],
 78    fontSize: '15.75px',
 79    lineHeight: '22.1px',
 80    letterSpacing: '0.02em',
 81    textDecoration: 'none',
 82  };
 83  
 84  //Headline-6
 85  export const h6 = {
 86    fontFamily: body1.fontFamily,
 87    fontWeight: weightScale['Medium'],
 88    fontSize: '15.75px',
 89    lineHeight: '22.1px',
 90    letterSpacing: '0.02em',
 91    textDecoration: 'none',
 92  };
 93  
 94  //Headline-5
 95  export const h5 = {
 96    fontFamily: body1.fontFamily,
 97    fontWeight: weightScale['Regular'],
 98    fontSize: '17.72px',
 99    lineHeight: '24.8px',
100    letterSpacing: '0.02em',
101    textDecoration: 'none',
102    textCase: 'undercase',
103  };
104  
105  //Headline-4
106  export const h4 = {
107    fontFamily: body1.fontFamily,
108    fontWeight: weightScale['Medium'],
109    fontSize: '19px',
110    lineHeight: '26.6px',
111    letterSpacing: '0.02em',
112    textDecoration: 'none',
113  };
114  
115  //Headline-3
116  export const h3 = {
117    fontFamily: body1.fontFamily,
118    fontWeight: weightScale['Semi Bold'],
119    fontSize: '22.42px',
120    lineHeight: '31.39px',
121    letterSpacing: '0.02em',
122    textDecoration: 'none',
123  };
124  
125  //Headline-2
126  export const h2 = {
127    fontFamily: body1.fontFamily,
128    fontWeight: weightScale['Semi Bold'],
129    fontSize: '25.23px',
130    lineHeight: '35.32px',
131    textDecoration: 'none',
132  };
133  
134  //Headline-1
135  export const h1 = {
136    fontFamily: body1.fontFamily,
137    fontWeight: weightScale['Semi Bold'],
138    fontSize: '27px',
139    lineHeight: '37.8px',
140    letterSpacing: '0.02em',
141    textDecoration: 'none',
142  };