Arena Test System 4710Legacy format
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Elevation & Depth
Do's & Don'ts
Do
Core Design Tokens
• Primary Accent: #6366f1
• Secondary Accent: #ec4899
• Background Dark: #0f172a
• Background Light: #f8fafc
• Surface Dark: #1e293b
• Surface Light: #ffffff
• Text Dark: #0f172a
• Text Light: #f8fafc
Layout & Grids
• Base spacing unit: 4px / 8px baseline grid
• Container Max Widths:
• Small: 640px
• Medium: 768px
• Large: 1024px
• Extra Large: 1280px
• Border Radius:
• Small: 4px
• Medium: 8px
• Large: 12px
• Full / Pill: 9999px
Component Guidelines
### Buttons
• Primary Button: Background #6366f1, text #ffffff, padding 10px 18px, border-radius 8px.
• Secondary Button: Background #1e293b, text #f8fafc, border 1px solid #334155.
• Hover states should lighten background color by 8% or increase opacity.
### Cards
• Surface background #1e293b with a subtle 1px border (#334155).
• Internal padding: 24px.
• Drop shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06).
Use with MCP
Don't have the MCP? Install it here