Design tokens and patterns from the Quartz/Fireball production design system. Use these exact values — not Tailwind approximations — when building templates and prototypes.
Primary brand palette. Import from @/lib/quartz/theme as quartzColors.
Primary
quartzTeal
#447D87
quartzColors.primary
Teal Light
teal
#66B8C7
quartzColors.primaryLight
Dark Teal
darkTeal
#579FAE
quartzColors.primaryDark
Primary Text
primaryText
#122124
quartzColors.text
Secondary Text
secondaryText
#6E7879
quartzColors.textSecondary
Field Border
quartzFieldBorder
#D7DDE2
quartzColors.border
Background
white
#FFFFFF
quartzColors.background
Light Gray
lighterGray
#F5F6F7
quartzColors.backgroundGray
Success
#E4F8E8
quartzColors.success
Warning
#FFE7DE
quartzColors.warning
Error
#FAD3D1
quartzColors.error
Info
#E9F1FF
quartzColors.info
In Progress
#EFEEFF
quartzColors.inProgress
Danger
#E4251B
quartzColors.danger
All presets from typographyPresets in lib/quartz/shims/styles.ts. Each rendered at actual size.
Based on a 4px grid. Import as spacing from @/lib/quartz/theme. Base unit: SPACING_UNIT_PX = 4.
Interactive demos of Quartz form patterns. Tab through the fields to see the real focus states. The focus ring is outline: 2px solid #447D87; outline-offset: 2px — not a Tailwind ring utility.
Border: 1px solid #D7DDE2 | border-radius: 4px
Checked bg: #447D87 | Unchecked bg: #D7DDE2
Correct
border: 1px solid #D7DDE2
border-radius: 4px
outline: 2px solid #447D87
outline-offset: 2px
Incorrect (Tailwind approximation)
border: 1px solid gray-200
border-radius: rounded-lg (8px)
ring: ring-blue-500/50 (box-shadow)
Wrong color, wrong radius, wrong technique
Live <Button> from @/lib/quartz in all variants and sizes.
Quartz uses a consistent focus ring across all interactive elements.
outline: 2px solid #579FAE
outline-offset: 1px
outline: 2px solid #447D87
outline-offset: 2px
box-shadow: inset 0 0 0 2px #447D87
outline: none
ring-2 ring-blue-500/50
Wrong color, wrong technique, wrong radius
Full Quartz + shared component catalog with live previews.
No description available
The style of the `<Alert>`
Render the `<Box>` as a given element
The content of the `<Button>`
The description text for the `<Checkbox>`
Allows getting a ref to the component instance
The id of the text element
No description available
The size of the `<EmptyState>`
The description text for the `<Field>` that should be displayed under a label
The content of the `<fieldset>`
No description available
Allows getting a ref to the component instance
The `<button>` or `<a>` tag to expand to the full width of the container
No description available
No description available
Allows getting a ref to the component instance
Allows getting a ref to the component instance
The content of the underlying `<legend>` element
A function which provides the style props to spread on the root link element and the inner conten...
The content that is available after loading
The main label to describe the `<OptionCard>`
No description available
The description text for the `<Radio>`
The description text for the `<RadioCard>`
Allows getting a ref to the component instance
Content items that will be dynamically swapped out
Whether the group items should behave as a radio (single select) or checkbox (multi select)
Allows getting a ref to the component instance
A description of the `<Switch>`
The currently selected tab
If `container`, the textarea will expand to the size of its containing element
No description available
No description available
Allows getting a ref to the component instance
Allows getting a ref to the component instance