all repos — caroster @ 655de2a956a35bddae072540e09c1ec352d2801b

[Octree] Group carpool to your event https://caroster.io

frontend/theme/typography.ts (view raw)

  1const weightScale = {
  2  'Extra Light': 200,
  3  Light: 300,
  4  Regular: 400,
  5  Medium: 500,
  6  'Semi Bold': 600,
  7};
  8
  9//Body-1
 10export 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
 21export 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
 31export 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
 43export 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
 54export 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
 65export 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
 75export 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
 85export 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
 95export 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
106export 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
116export 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
126export 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
135export 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};