Design System Tokens - Typography

You can adjust any of the defaults in the src/_config/values folder of your design system.

Body font

This the base typeface for most of the components. You can modify the default as needed.

export const bodyFontValue = '"Segoe UI", Arial, Helvetica, sans-serif';

Usage in your code

CSS

font-family: var(--body-font);

JavaScript

import {bodyFont} from '@genesislcap/alpha-design-system';

const styles = css`
  :host {
    font-family: ${bodyFont};
}`;

Font sizes and line heights

This is a group of variables describing the font size and line-height hierarchy.

export const typeRampBaseFontSizeValue = '14px';
export const typeRampBaseLineHeightValue = '20px';
// ... remaining variables

Usage in your code

CSS

font-size: var(--type-ramp-minus-1-font-size);
line-height: var(--type-ramp-minus-1-line-height);

JavaScript

import {typeRampMinus1FontSize, typeRampMinus1LineHeight} from '@genesislcap/alpha-design-system';

const styles = css`
  :host {
    font-size: ${typeRampMinus1FontSize};
    line-height: ${typeRampMinus1LineHeight};
}`;