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};