Colors & Typography

Colors

Updated color variables for new components.

highlight

Used for active or selected elements in the Viewer.

primary

Used for Actions. Icons use 'primary' at 100% opacity while various components will use a reduced opacity. Hover and other states increase the opacity.

popover

muted

background

These three colors are used as background colors. For the lowest level above black use 'background'. For normal panel backgrounds and other interactive components, use 'muted'. For elements such as menus and popovers, use 'popover'.

foreground

muted-foreground

For primary and important text, use 'foreground'. When secondary text is available, use 'muted-foreground' to create separation and readability.

Typography

Type variables and guidelines

text-base13px

text-base is used as the base font size of the Viewer interface. Use when putting text in panels or other interface elements next to medical images.

text-lg14px

text-lg can be used for dialog text or important messaging text within the Viewer. Use this font size for easier reading on other standard text pages.

text-xl16px

text-xl can be used as headings within dialogs or messaging.

text-2xl18px

text-2xl can be used for page headers in the Viewer application or as dialog titles.

text-3xl20px

text-3xl can be used for extra large text size in the application.

text-sm12px

text-sm can be used for details that do not need to be standard sizes in the Viewer.