6xl Ag 5xl Ag 4xl Agstnd.build 3xl Ag 2xl Ag xl Ag lg Ag base Ag — The quick brown fox jumps over the lazy dog sm Ag — The quick brown fox jumps over the lazy dog xs Ag — The quick brown fox jumps over the lazy dog 2xs Ag — The quick brown fox jumps over the lazy dog 3xs Ag — The quick brown fox jumps over the lazy dog UI Components
Every component from @stnd/ui. Each section below is a
self-contained demo imported directly from the package. Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Design System Tokens
A living reference of every token in Standard. Tweak colors and fonts in the Lab and come back here to see the effect.
Hue Palette
Every hue derived from the foreground seed via OKLCH offsets.
red orange yellow green cyan blue magenta Semantic Colors
Status, feedback, and UI signal colors.
success warning error info accent link Foreground Tones
--color-foreground --color-muted --color-subtle --color-border Surface Elevations
--color-background --color-secondary --color-surface --surface-low --surface-mid --surface-high --surface-highest This page is a living showcase of Standard's design tokens. Open the Lab to experiment with different seeds and ratios, then return here to see the cascade.
Team Members
Invite your team members to collaborate.
-
boxSofia Davis
m@example.com
-
boxJackson Lee
p@example.com
-
boxIsabella Nguyen
i@example.com
-
boxHarper Fox
h@example.com
Status Badge
Button Variants
Input Fields
Alerts
Color Tokens
System colors derived from your foreground seed.
Typography
Heading and body text styles.
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Small text
Smaller text
Muted text
Chat Bubble Example
Demonstrating the received and send message styles.
Contact Support
A form example with validation and structure.
Accordion
Is it accessible?
Yes. It adheres to the WAI-ARIA design pattern.
Is it styled?
Yes. It comes with default styles that matches the other components' aesthetic.
Is it animated?
Yes. It's animated by default, but you can disable it if you prefer.
What are the key considerations when implementing a comprehensive
enterprise-level authentication system?
Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.
How does modern distributed system architecture handle eventual
consistency and data synchronization across multiple regions?
Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.
Alert Dialog
Avatar
CN 
Badge
Card
Login to your account
Enter your details below to login to your account
Meeting Notes
Transcript from the meeting with the client.
Client requested dashboard redesign with focus on mobile responsiveness.
- New analytics widgets for daily/weekly metrics
- Simplified navigation menu
- Dark mode support
- Timeline: 6 weeks
- Follow-up meeting scheduled for next Tuesday
Is this an image?
This is a card with an image.
Header and Content
This is a card with a header and a content.
Header + Content + Footer
This is a card with a header, content and footer.
Checkbox
By clicking this checkbox, you agree to the terms and conditions.
Combobox
Dialog
Dropdown Menu
Form
Input
Label
Pagination
Popover
Radio Group
Select
Skeleton
Slider
Switch
Table
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Paypal | $450.00 |
| INV005 | Paid | Credit Card | $550.00 |
| INV006 | Pending | Bank Transfer | $200.00 |
| INV007 | Unpaid | Credit Card | $300.00 |
| Total | $2,500.00 | ||
Tabs
Account
Make changes to your account here. Click save when you're done.
Password
Change your password here. After saving, you'll be logged out.
Textarea
Type your message and press enter to send.
Tooltip
Launcher
The universal command palette. No login needed for this demo — search will be wired later.
Keyboard Shortcuts
Typography Scale
Sans
by the magnificent Inter from rmts
Everyone has the right to freedom of thought, conscience and religion; this right includes freedom to change his religion or belief, and freedom, either alone or in community with others and in public or private, to manifest his religion or belief in teaching, practice, worship and observance.
Everyone has the right to freedom of opinion and expression; this right includes freedom to hold opinions without interference and to seek, receive and impart information and ideas through any media and regardless of frontiers.
Everyone has the right to rest and leisure, including reasonable limitation of working hours and periodic holidays with pay.
Serif
The unrivaled Source Serif 4
No one shall be subjected to arbitrary arrest, detention or exile.
Everyone is entitled in full equality to a fair and public hearing by an independent and impartial tribunal, in the determination of his rights and obligations and of any criminal charge against him.
No one shall be subjected to arbitrary interference with his privacy, family, home or correspondence, nor to attacks upon his honour and reputation. Everyone has the right to the protection of the law against such interference or attacks.
Monospace
From the open source workload of IBM, and also the swissest.
Whereas a common understanding of these rights and freedoms is
No one shall be held in slavery or servitude; slavery and the slave trade shall be prohibited in all their forms.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Buttons
Buttons, alerts, badges, and text in every palette color. Flip themes in the Lab to verify contrast and legibility.
Each button uses a palette color as its background. Check contrast of white text on every hue.
Badges
Filled, secondary, outline, and destructive badge variants across all palette colors.
Colored Text
Each hue as body text on the page background. Verify every color remains legible at reading size.
The quick red fox jumps over the lazy dog. 0123456789
The quick orange fox jumps over the lazy dog. 0123456789
The quick yellow fox jumps over the lazy dog. 0123456789
The quick green fox jumps over the lazy dog. 0123456789
The quick cyan fox jumps over the lazy dog. 0123456789
The quick blue fox jumps over the lazy dog. 0123456789
The quick magenta fox jumps over the lazy dog. 0123456789
The quick success fox jumps over the lazy dog. 0123456789
The quick warning fox jumps over the lazy dog. 0123456789
The quick error fox jumps over the lazy dog. 0123456789
The quick info fox jumps over the lazy dog. 0123456789
The quick accent fox jumps over the lazy dog. 0123456789
The quick link fox jumps over the lazy dog. 0123456789
Real-World Patterns
Typical UI patterns combining color with text, icons, and backgrounds.
Status indicators
Inline links & emphasis
Your subscription is active. Next billing date is June 15. If you need help, contact support or cancel your plan. We also recommend checking out our knowledge base for tips.
Action row
Alerts
Semantic alert banners. Border, background tint, and text must all remain readable.
Notification cards
Invoice #1042 — $49.00 has been processed.
You've used 92% of your 10 GB storage quota.
main branch — TypeError at line 42 in utils.ts
Try the redesigned dashboard with improved analytics.
Spacing Tokens
Baseline Multiples
All spacing is based on --baseline (1rlh). Here are the multiplied
steps.
--space-d8 --space-d6 --trim --space-d4 --leading --space-d3 --space-d2 --space-half --space --space-2 --space-3 --space-4 --space-6 --space-8 --space-12 Content Measure (line-width)
Max content widths for readability.
--line-width-xs
--line-width-sm
--line-width-md
--line-width-lg
--line-width-xl Shadows
Raised (default surface)
--shadow-raised Inner highlight + border ring + ambient Ambient
--shadow Subtle base drop shadow Large
--shadow-lg Ambient + lift Extra Large
--shadow-xl Ambient + lift + glow Glow
--shadow-glow Accent-colored soft glow Inset
--shadow-inset Inner shadow for pressed states Ring
--shadow-ring Inset border ring (1px) Composite Shadows
Layering shadow primitives for richer depth.
shadow, shadow-glow shadow-ring, shadow-lg shadow-raised, shadow-glow shadow-inset, shadow-ring Interactive Demo
Right-click (or long-press) on the cards below to trigger the context menu. The menu is viewport-aware: try right-clicking near the edges of your screen.
Usage
The context menu is composed of small, focused components. Everything is styled automatically using Standard tokens.
import ContextMenu from "../ui::example/ContextMenu.svelte";
import ContextMenuItem from "../ui::example/ContextMenuItem.svelte";
<ContextMenu client:load>
<div>Right click this!</div>
<div slot="content">
<ContextMenuItem icon="edit">Edit</ContextMenuItem>
</div>
</ContextMenu>Architecture
- Viewport Detection: Uses
getBoundingClientRect()to ensure the menu stays within view. - Svelte 5 Runes: Built with
$stateand$derivedfor optimal performance. - Design Tokens: Uses
--color-background,--radius, and--shadow-xl. - Vanilla: No external dependencies (framer-motion, etc.). Pure CSS and JS.
Easing & Speed Lab
Visualize and compare the transition timing functions and durations
available in the framework. Pick a preset or define a custom
cubic-bezier, adjust the duration, then hit Play.
transition: all 0.5s ease;