Outfit
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !?&@#
Font family for the Moth design system.
Design Tokens
Foundational values that define the visual style of the design system, including colors, typography, spacing, and more. Click any token to copy it.
Font
Two families: one for everything, one for code.
Font Weight
Three weights keep the hierarchy clear.
Body text and most labels.
Regular: Ship with confidence
Headings and emphasis.
Bold: Ship with confidence
Display and page headings.
Black: Ship with confidence
Font Size
The type scale, from hint text to display headings.
Small hint text.
Ship with confidence
Smaller components.
Ship with confidence
Default body text.
Ship with confidence
Large text.
Ship with confidence
Small headers.
Ship with confidence
Subheaders.
Ship with confidence
Large headings. Only once per page.
Ship with confidence
Display headings that scale with the viewport.
Ship with confidence
Line Height
Each line height pairs with the font size of the same name. Guides show the height of each line.
Use with the xs font size.
Modular, consistent
and ready for production.
Use with the s font size.
Modular, consistent
and ready for production.
Use with the m font size.
Modular, consistent
and ready for production.
Use with the l font size.
Modular, consistent
and ready for production.
Use with the xl font size.
Modular, consistent
and ready for production.
Use with the 2xl font size.
Modular, consistent
and ready for production.
Use with the 3xl font size.
Modular, consistent
and ready for production.
Use with the 4xl font size.
Modular, consistent
and ready for production.
Letter Spacing
Pairs with the font size of the same name: a little looser for small text, tighter for display text.
Use with the xs font size.
Ship with confidence
Use with the s font size.
Ship with confidence
Use with the m font size.
Ship with confidence
Use with the l font size.
Ship with confidence
Use with the xl font size.
Ship with confidence
Use with the 2xl font size.
Ship with confidence
Use with the 3xl font size.
Ship with confidence
Use with the 4xl font size.
Ship with confidence
Space
Use for padding, margins and gaps. Bars are drawn at actual size.
Extra small spacing.
Small spacing.
Default spacing.
Large spacing.
Extra large spacing.
Extra extra large spacing.
Sizing
Buttons, inputs and selects share one height, so they line up side by side.
Height of medium buttons and form fields.
Border Radius
Three corner styles cover every component.
Sharp
Small elements like checkboxes.
Default
The default for most components.
Full
Pill shapes like buttons.
Breakpoints
Screen widths where layouts change. Use the values in media queries; CSS variables can't be used there directly.
Small phones and up.
Large phones and small tablets.
Tablets and small laptops.
Laptops. The sidebar layout starts here.
Large screens. Also the widest container.
Color
Semantic colors. Reach for these before the raw scales below.
Surfaces & borders
Background
Background color of the content area.
Surface
Surfaces on top of the background.
Surface raised
Surfaces on top of surfaces.
Border
Default border color.
Border info
Borders of informational elements.
Border success
Borders of success elements.
Border warning
Borders of warning elements.
Border danger
Borders of error and destructive elements.
Text
Aa The quick brown fox
Text
Default color for text.
Aa The quick brown fox
Text weak
Subdued color for body text.
Aa The quick brown fox
Text weaker
More subdued color for body text.
Aa The quick brown fox
Text weakest
Placeholders in form elements.
Aa The quick brown fox
Text accent
Accent-colored text, used sparingly.
Aa The quick brown fox
Text contrast
Text on light fills, like a hovered primary button.
Accent & status
Accent
Brand color for primary actions and highlights.
Info
Informational messages.
Success
To convey success.
Warning
Use to warn the user.
Danger
Errors, or when something will be deleted.
Neutral
Solid neutral status color, used on components like badge.
Focus & selection
Focus border
Focus outline on every control, and the border of a focused field.
Focus ring
Soft halo around a focused field.
Highlight
Background of selected text, everywhere.
Color Scales
The raw 12-step scales behind every semantic color.
gray
success
warning
danger
info
accent