Arena Test System 4710Legacy format

Headline
Aa
Search
Body
Aa
Label
Aa
Label

Typography

HeadingsInter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif · 16px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyInter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CodeJetBrains Mono, monospace · 16px · Regular

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

cardShadow

Do's & Don'ts

Do

Lighten background color by 8% or increase opacity for hover states.
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).
Download .md
O S O S @tiger3homs
License MIT
Uploaded 4 months ago
Version v1
File size 1.2 KB
Downloads 42
Copies 2
clean dark dashboard minimal saas

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/tiger3homs/arena-test-system-4710 and implement it in my code

Don't have the MCP? Install it here