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: '15px',
14 letterSpacing: '3%',
15 textDecoration: 'none',
16 textCase: 'undercase',
17};
18export const body1Neg = body1;
19export const body1Underline = {...body1, textDecoration: 'underline'};
20
21//Body-2
22export const body2 = {
23 ...body1,
24 fontSize: '13px',
25 letterSpacing: '2%',
26 textDecoration: 'none',
27 textCase: 'undercase',
28};
29export const body2Neg = body2;
30export const body2Semibold = {...body2, fontWeight: weightScale['Semi Bold']};
31
32//Button
33export const button = {
34 fontFamily: body1.fontFamily,
35 fontWeight: weightScale['Medium'],
36 fontSize: '13px',
37 letterSpacing: '10%',
38 textDecoration: 'none',
39 textCase: 'uppercase',
40};
41export const buttonNeg = button;
42
43//Caption
44export const caption = {
45 fontFamily: body1.fontFamily,
46 fontWeight: 'Regular',
47 fontSize: '12px',
48 letterSpacing: '3%',
49 textDecoration: 'none',
50 textCase: 'undercase',
51};
52export const captionNeg = caption;
53export const captionUnderline = {...caption, textDecoration: 'underline'};
54
55//Overline
56export const overline = {
57 fontFamily: body1.fontFamily,
58 fontWeight: weightScale['Regular'],
59 fontSize: '10px',
60 letterSpacing: '15%',
61 textDecoration: 'none',
62 textCase: 'uppercase',
63};
64export const overlineNeg = overline;
65
66//Subtitle-2
67export const subtitle2 = {
68 fontFamily: body1.fontFamily,
69 fontWeight: 'Medium',
70 fontSize: '13px',
71 letterSpacing: '0.7%',
72 textDecoration: 'none',
73 textCase: 'undercase',
74};
75export const subtitle2Neg = subtitle2;
76
77//Subtitle-1
78export const subtitle1 = {
79 fontFamily: body1.fontFamily,
80 fontWeight: weightScale['Regular'],
81 fontSize: '15px',
82 letterSpacing: '1%',
83 textDecoration: 'none',
84 textCase: 'undercase',
85};
86export const subtitle1Neg = subtitle1;
87
88//Headline-6
89export const headline6 = {
90 fontFamily: body1.fontFamily,
91 fontWeight: weightScale['Medium'],
92 fontSize: '19px',
93 letterSpacing: '0.8%',
94 textDecoration: 'none',
95 textCase: 'undercase',
96};
97export const headline6Neg = {...headline6, fontWeight: weightScale['Regular']};
98
99//Headline-5
100export const headline5 = {
101 fontFamily: body1.fontFamily,
102 fontWeight: weightScale['Regular'],
103 fontSize: '23px',
104 letterSpacing: '0',
105 textDecoration: 'none',
106 textCase: 'undercase',
107};
108export const headline5Neg = {...headline5, fontWeight: weightScale['Light']};
109
110//Headline-4
111export const headline4 = {
112 fontFamily: body1.fontFamily,
113 fontWeight: weightScale['Regular'],
114 fontSize: '33px',
115 letterSpacing: '0.75%',
116 textDecoration: 'none',
117 textCase: 'undercase',
118};
119export const headline4Neg = {...headline4, fontWeight: weightScale['Light']};
120
121//Headline-3
122export const headline3 = {
123 fontFamily: body1.fontFamily,
124 fontWeight: weightScale['Regular'],
125 fontSize: '46px',
126 letterSpacing: '0',
127 textDecoration: 'none',
128 textCase: 'undercase',
129};
130export const headline3Neg = {...headline3, fontWeight: weightScale['Light']};
131
132//Headline-2
133export const headline2 = {
134 fontFamily: body1.fontFamily,
135 fontWeight: weightScale['Light'],
136 fontSize: '58px',
137 letterSpacing: '-0.8%',
138 textDecoration: 'none',
139 textCase: 'undercase',
140};
141export const headline2Neg = {
142 ...headline2,
143 fontWeight: weightScale['Extra Light'],
144};
145
146//Headline-1
147export const headline1 = {
148 fontFamily: body1.fontFamily,
149 fontWeight: weightScale['Light'],
150 fontSize: '93px',
151 letterSpacing: '-1.6%',
152 textDecoration: 'none',
153 textCase: 'undercase',
154};
155export const headline1Neg = {
156 ...headline1,
157 fontWeight: weightScale['Extra Light'],
158};