What is the most convinient way to organize the Typography and the Colors files?

I have a React Native Project (+ Typescript), where I collect all the StyleSheet values for Typography in one separate file (Typography.ts). It looks something like this:

const typography = {buttonText: {    fontSize: 16,    color: Colors.buttonTextColor,    fontWeight: 'bold',},headline2: {    fontSize: 20,    fontWeight: Platform.OS === 'android' ? 'bold' : '600',    color: Colors.fontColorMedium,},textVeryLight: {    color: Colors.fontColorLight,    lineHeight: 24,    letterSpacing: -0.03,    fontSize: 16,  }}export default typography

As you may notice, it's not very convinient, because the names are confusing (after some time the names like "textVeryLight" will mean nothing to you). I would like to find out, if there is a better way to organize this. The same goes for the Colors.ts file, where I collect all the colors used in the project. It looks like this:

const Definitions = {orangeLightBg: '#FCEDDB',peachyLight: '#AC8484',peachyDark: '#ebdfdf99',richGreenLicht: '#e1ede699',richGreenDark: '#7ca68e',darkOrange: '#ff8766'}const Color = {    backgroundOrange: Definitions.orangeLightBg,    backgroundPeachy: Definitions.peachyLight,    shadowColor: Definitions.black,    fontColorPeachy: Definitions.peachyDark,    backgroundRichGreen: Definitions.richGreenLicht,    fontColorRichGreen: Definitions.richGreenDark,    fontColorLightGray: Definitions.gray08,    bulletPointOrange: Definitions.darkOrange}export default Color

I have an idea for the Color.ts file: it probably needs to be in one object, there is no need for the second one, because it doubles the code. Right?

Anyone got any tips?