Figma-ready HTML Export

Gundam Match Lab Design System

Foundations and reusable interface patterns for a calm, precise competitive instrument.

Back to application
00

Identity

Responsive Logo System

Gundam Match Lab primary logo
Primary target-card lockup / light surfaces
Gundam Match Lab reverse logo
Reverse lockup / dark surfaces
Gundam Match Lab target-card symbol
Application mark / favicon / mobile
ForegroundSurfaceContrast
Primary inkLight surface16.89:1
Secondary inkLight surface5.36:1
Warning inkLight surface5.42:1
Primary inkDark surface15.57:1
Secondary inkDark surface7.37:1
Warning inkDark surface7.87:1
01

Foundations

Semantic Tokens

BackgroundApplication canvas
SurfacePrimary workspace
Surface RaisedInteractive layer
AccentPrimary signal
SuccessPositive result
WarningQualification
ErrorBlocking issue
InfoNeutral context
Typography Display Heading 1 Heading 2 Heading 3 98.4%

Body text prioritises clarity and measured line length.

Small and caption text provide supporting context.
Spacing
Radius and elevation
SmallMediumLargeRaised
02

Components

Controls and Feedback

Buttons
Form controls
Badges and alerts
High confidenceLimited coverageInvalid deck5,000 games
InformationPaired seeds isolate the effect of a deck change.
Coverage warningUnsupported effects can reduce result reliability.
Progress
Running paired simulations68%
68%
  1. Prepare
  2. Seed
  3. Simulate
  4. Compare
  5. Recommend
Primary object

Use Modified Deck

+4.8%

Measured improvement with high confidence.

High confidence
Card hierarchy
PrimaryDecision or hero action
SecondaryImportant working context
PassiveSupporting information
Progressive disclosure
Simulation Coverage

47 fully modelled cards, 3 cards with partial behaviour, 0 stats only.

03

Data Display

Tables and Charts

Comparison table
MetricCurrentModifiedDifference
Win Rate51.2%56.0%+4.8 pts
Mulligan Rate18.4%14.1%-4.3 pts
Game Length7.8 turns7.4 turns-0.4
Matchup telemetryMeasured win rate
Blue Control52%
White Midrange57%
Red Aggro46%
CurrentModifiedQualification
04

States

Interaction and Feedback

DefaultReady for input
ActiveCurrent workspace
SelectedTournament Test
SuccessModified deck wins
WarningModerate reliability
ErrorDeck is incomplete
05

Layout Rules

Responsive Framework

1440 pxMaximum content width
1120 pxDesktop to tablet shift
760 pxSingle-column application flow
44 pxMinimum touch target