---
title: Typography
description: An overview of all available typography CSS variables.
---

Some reusable patterns work better as CSS variables, or “shorthands”, than as components. Typography is one of these cases, since its usage and context vary widely.

The shorthands below are composed of core [Tailwind utility classes](../docs/tailwind-classes). You can view the full list of shorthands in [`typography.scss`](https://github.com/supabase/supabase/blob/master/apps/studio/styles/typography.scss).

## Shorthands

| Value              | Usage                                                                      |
| ------------------ | -------------------------------------------------------------------------- |
| `text-code-inline` | Apply to a `code` element for inline code or similar custom inline content |
| `text-primary`     | Accessible Supabase green for readable branded text                        |

`text-primary` meets WCAG AA for normal text on app surfaces: darkened in light mode,
bright in dark mode. Focus rings and selected controls derive their brighter fill from
the same primary hue. See [Primary and brand colors](../docs/color-usage#primary-and-brand-colors) for when
to use each green.