Restate Design System
Documentation of current styles, components, and patterns
Typography
Font Families
Stack Font Weight Comparison
Heading Styles
Heading 1 - The quick brown fox jumps
Heading 2 - The quick brown fox jumps
Heading 3 - The quick brown fox jumps
Heading 4 - The quick brown fox jumps
Heading 5 - The quick brown fox jumps
Heading 6 - The quick brown fox jumps
Body Text Styles
Large body text - The quick brown fox jumps over the lazy dog. This is commonly used for introductory paragraphs and section leads.
Regular body text - The quick brown fox jumps over the lazy dog. This is the standard text size used throughout the site.
Small body text - The quick brown fox jumps over the lazy dog. Used for captions, helper text, and secondary information.
Extra small text - The quick brown fox jumps over the lazy dog. Used for labels and fine print.
Code Styles
Here is some inline code within a paragraph of text.
const greeting = "Hello, World!";
console.log(greeting);Notch Font (Inline Highlights)
Use Stack Sans Notch for emphasis and inline highlights to draw attention to key terms or phrases.
Small: This is notch text inline
Base: This is notch text inline
Large: This is notch text inline
XL: This is notch text inline
Colors
Primary Colors
Gray Scale
Common Border Colors
Spacing Scale
Border Radius
Common Component Patterns
Card
Card Title
This is a common card pattern with rounded corners, border, and padding. Used throughout the site for content containers.
Learn more →CTA Section
Ready to get started?
Large white bordered container used for conversion-focused sections with strong visual hierarchy.
Code Block
import { RestateContext } from "@restatedev/restate-sdk";
export async function processPayment(
ctx: RestateContext,
paymentId: string
) {
// Durable execution with automatic retry
const result = await ctx.run(() =>
chargeCard(paymentId)
);
return result;
}Spotlight Callout
Highlighted Feature
Gradient overlay callout box with brand-blue text styling. Used for highlighting important features or announcements.
FAQ/Accordion Item
What is Restate?
Responsive Breakpoints
| Name | Size | Usage |
|---|---|---|
| xxs | 424px | Custom - Extra small mobile |
| xs | 512px | Custom - Small mobile |
| sm | 640px | Large mobile |
| md | 768px | Tablet |
| lg | 1024px | Desktop |
| xl | 1280px | Large desktop |
| 2xl | 1536px | Extra large desktop |
Component Files
Design Principles
Semantic HTML First
Uses native HTML elements (details/summary for accordions) rather than JavaScript-heavy solutions for better accessibility and performance.
OKLCH Color Space
Uses perceptually uniform OKLCH colors for brand blue ensuring better color consistency across different displays and color modes.
Performance Focused
Pure Tailwind + PostCSS approach without CSS-in-JS runtime. Font display swap strategy. Next.js Image optimization.
Accessibility
ARIA labels, proper focus states, color contrast adherence, and screen reader support throughout.
This design system documentation is for internal reference only (noindex, nofollow).
Generated from existing codebase at /app/design-system