Sega design skill for AI agents

Overview

Sega is a playful, arcade-inspired design system skill file that instructs AI coding assistants to generate interfaces that feel like game menus, cabinet screens, scoreboards, character-select panels, and interactive arcade overlays. Its aesthetic is built on the VT323 pixel typeface, saturated blue and yellow brand colors, hard-edged 0px geometry, chunky pill-shaped buttons that physically press into offset blocks, and cards wrapped in rainbow-ringed shadows that feel like arcade cabinet trim.

Where many playful systems rely on soft illustration, rounded cards, gradients, or toy-like decoration, Sega is more game-native. It feels bright, tactile, pixelated, energetic, and mechanical. Buttons should look pressable. Cards should look framed. Menus should feel like they belong on a title screen. Interaction states should feel like game input feedback: hover, focus, press, loading, locked, selected, and completed states must all be obvious.

When you feed this skill file to an AI assistant, every generated component — buttons, cards, forms, navigation, modals, game menus, leaderboards, score panels, settings screens, achievements, loading states, empty states, and onboarding flows — should inherit the Sega visual language: VT323 typography, 0px panels, chunky arcade controls, saturated primary blue, bright yellow secondary, hard offset blocks, sharp outlines, and playful motion.

The result is a UI system that feels fun, immediate, nostalgic, and game-ready while still remaining structured, accessible, and implementation-focused.

Design Tokens

Color Palette

Sega uses a high-energy arcade palette built around electric blue, bright yellow, white surfaces, and dark readable text. The palette should feel like a game cabinet interface: bold, high-contrast, graphic, and highly interactive.

The most important relationship is between electric blue, bright yellow, white panels, and hard arcade framing. Blue carries the brand’s energy. Yellow creates reward, contrast, and urgency. White surfaces keep content readable. Dark text keeps the system usable.

The palette should feel loud, but not random. Blue and yellow are the primary game colors. Success, warning, and danger must stay semantic and should not be used as decorative cabinet colors.

Recommended Arcade Semantic Tokens

Implementations should define semantic aliases so the game-like styling stays consistent across components.

Use these roles instead of scattering raw values across the codebase. If rainbow-ring shadows are implemented, keep them consistent and tokenized.

Color Usage Principles

Sega color usage follows five rules:

1. Blue leads the game interface — primary actions, selected states, active panels, and major brand areas use primary.
2. Yellow creates arcade energy — use secondary for highlight blocks, reward states, focus accents, and supporting CTAs.
3. White keeps play readable — content-heavy panels should use surface.
4. Dark ink anchors the system — outlines, text, and offset blocks need strong contrast.
5. Semantic colors stay semantic — success, warning, and danger communicate real state unless they are used inside a clearly decorative rainbow trim system.

Avoid using every saturated color on every component. The interface should feel like a designed arcade cabinet, not a random confetti palette.

Typography

Sega uses VT323 for both primary and display typography. This gives the system a pixel-terminal, retro-game voice. The type should feel like scoreboards, menu labels, title screens, HUD overlays, and arcade prompts.

Font Families

VT323 should be used confidently. Its pixelated form is the core personality of the system. Do not mix in a polished sans-serif for ordinary UI unless a product-specific accessibility fallback is required.

JetBrains Mono should be reserved for technical content, not used as a decorative replacement for VT323.

Type Scale

Sega uses a distinctive arcade type scale:

This odd-number scale helps the interface feel less like a standard SaaS product and more like a game UI. Use it consistently. Do not fall back to generic 14 / 16 / 20px sizing unless the implementation environment requires it.

Weight

The font weight range is listed from 100 through 900, but pixel typefaces often have fewer visually distinct weights in practice. Use weight carefully.

Recommended usage:

• 400 for body copy and default UI text
• 500 for labels and navigation
• 600 for buttons and compact headings
• 700 for score values, card titles, and game prompts
• 800–900 only for large title-screen moments if the font rendering supports it well

Avoid very thin weights. Pixel typography loses clarity when it becomes too light. If VT323 does not render multiple weights distinctly, use size, color, outline, and spacing instead of weight to create hierarchy.

Pixel Typography Rules

Pixel typography needs different handling than normal sans-serif UI type.

Rules:

• Keep labels short.
• Avoid long paragraphs in VT323 at small sizes.
• Use generous line height for body copy.
• Use larger sizes for critical instructions.
• Avoid heavy letter spacing that breaks pixel rhythm.
• Avoid all-caps long sentences.
• Test readability on high-density and low-density screens.
• Provide a fallback font stack.

Example token setup:

:root {
  --font-primary: "VT323", monospace;
  --font-mono: "JetBrains Mono", monospace;

  --text-xs: 13px;
  --text-sm: 15px;
  --text-md: 17px;
  --text-lg: 21px;
  --text-xl: 27px;
  --text-2xl: 35px;
}

Spacing

Sega uses a 4px-based spacing scale:

Spacing should feel chunky and game-like. Components need enough room for offset blocks, rainbow trim, large pixel labels, and physical press effects.

Use larger spacing around:

• Pressable buttons
• Rainbow-shadow cards
• Scoreboard panels
• Character or item selection grids
• Game menu groups
• Achievement blocks
• Loading screens
• Modal actions

Because offset blocks visually expand the footprint of components, leave enough space so shadows do not collide with neighboring UI.

The Sega Look

Sega has a distinct arcade-game identity. It should feel interactive, bright, tactile, and screen-native.

Arcade Cabinet Energy

The interface should feel like it belongs inside a game cabinet or retro console menu. It should be bold, legible, and instantly interactive.

Good Sega layouts often include:

• Large pixel headings
• Strong framed panels
• Chunky action buttons
• Score-like numbers
• Cabinet-trim card shadows
• Bright blue and yellow emphasis
• Hard-edged layouts
• Clear selected and locked states
• Short game-like labels

Avoid making the interface look like a generic product dashboard with a pixel font applied on top. The full component system must carry the arcade feel.

0px Corners as the Default

Most structural surfaces should use hard-edged 0px corners.

Use 0px radius for:

• Cards
• Panels
• Modals
• Menus
• Scoreboards
• Tables
• Alerts
• Game HUD blocks
• Character selection frames
• Image frames

This creates a sharp, cabinet-screen aesthetic. The major exception is the signature chunky pill button.

Chunky Pill Buttons as the Signature Exception

Buttons are the main exception to the hard-edged rule. They should be chunky, pill-shaped, and physically press into solid offset blocks.

Use pill geometry for:

• Primary buttons
• Secondary buttons
• Menu actions
• Start buttons
• Continue buttons
• Choice buttons
• Game control actions

Recommended radius:

--radius-panel: 0px;
--radius-button: 999px;

The contrast between square panels and pill controls makes buttons feel tactile and game-like.

Physical Press Offset Blocks

Buttons should feel like real arcade controls. They sit above a solid block shadow and compress into it when pressed.

Recommended button shadow tokens:

:root {
  --press-shadow-sm: 3px 3px 0 var(--arcade-shadow);
  --press-shadow-md: 6px 6px 0 var(--arcade-shadow);
  --press-shadow-lg: 8px 8px 0 var(--arcade-shadow);
}

Recommended behavior:

.button-primary {
  border-radius: 999px;
  background: var(--arcade-blue);
  color: var(--arcade-paper);
  border: 2px solid var(--arcade-ink);
  box-shadow: 6px 6px 0 var(--arcade-shadow);
  transform: translate(0, 0);
}

.button-primary:hover {
  box-shadow: 8px 8px 0 var(--arcade-shadow);
  transform: translate(-2px, -2px);
}

.button-primary:active {
  box-shadow: 2px 2px 0 var(--arcade-shadow);
  transform: translate(4px, 4px);
}

The active state should clearly compress. This press behavior is not optional for primary arcade controls.

Rainbow-Ringed Card Shadows

Cards should feel like arcade cabinet trim. The signature treatment is a multi-layer, rainbow-ringed shadow around hard-edged panels.

Recommended rainbow trim concept:

.card-arcade {
  background: var(--arcade-paper);
  border: 2px solid var(--arcade-ink);
  border-radius: 0;
  box-shadow:
    4px 4px 0 var(--cabinet-trim-1),
    8px 8px 0 var(--cabinet-trim-2),
    12px 12px 0 var(--arcade-shadow);
}

Rules:

• Use no blur.
• Keep offsets aligned to the spacing scale.
• Use rainbow-ring trim on featured cards, not every small element.
• Do not let shadows reduce readability or overlap nearby content.
• Keep the panel itself crisp and white or brand-filled.
• Avoid soft drop shadows.

The effect should read as cabinet trim or layered plastic, not as realistic elevation.

Flat, Hard, Game-Like Surfaces

Sega is flat and hard-edged. It should avoid polished app effects.

Avoid:

• Soft shadows
• Blurred elevation
• Glassmorphism
• Glossy gradients
• Subtle gray borders
• Overly soft rounded cards
• Minimal invisible buttons
• Thin delicate typography
• Low-contrast pastel treatments

The system should look direct, graphic, and immediately playable.

Playful Motion and Input Feedback

Sega should use motion like a game UI: quick, tactile, and responsive.

Use motion for:

• Button press compression
• Selected state pop
• Menu item hover
• Level unlock feedback
• Score count-up
• Loading loops
• Achievement reveal
• Focus movement
• Card selection

Recommended motion durations:

All motion must respect reduced-motion preferences.

Component Coverage

The Sega skill file should guide complete interface generation across game UIs, playful product screens, arcade-style landing pages, dashboards, settings, leaderboards, onboarding, and interactive experiences.

Buttons

Buttons are the signature component. They should look chunky, tactile, and pressable.

Button variants:

Primary button rules:

• Use pill radius.
• Use thick border, usually 2px or 3px.
• Use solid offset block shadow.
• Use VT323 at 17px or larger.
• Use short, action-oriented labels.
• Use primary blue or secondary yellow depending on hierarchy.
• Use clear hover, focus-visible, active, disabled, loading, and error states.
• Active state must visually press into the offset block.
• Loading state must preserve button width.

Recommended button states:

Good button labels:

Avoid vague labels like Submit, Click here, or Go.

Cards and Panels

Cards should feel like arcade cabinet modules, game menu panels, item cards, score panels, or character selection frames.

Card rules:

• Use 0px radius.
• Use a strong border.
• Use white or brand-filled surface.
• Use rainbow-ringed shadow for featured cards.
• Avoid soft shadows.
• Avoid subtle gray dividers.
• Keep typography large enough for pixel readability.
• Ensure long content wraps cleanly.
• Interactive cards must use button or link semantics.
• Featured cards need enough margin for their trim shadows.

Card variants:

Interactive cards should show hover, focus-visible, selected, locked, and active states where relevant.

Game Menus

Menus are a core Sega pattern. They should feel like title screens, pause menus, or arcade selection screens.

Menu rules:

• Use VT323 for all labels.
• Use large labels, usually 21px or above for primary menu items.
• Use obvious selected state.
• Support keyboard navigation.
• Support pointer and touch input.
• Use sound-like visual feedback without requiring sound.
• Keep menu groups aligned.
• Avoid tiny secondary actions.

Menu item states:

Active menu state must use more than color alone.

Navigation

Navigation should feel like game wayfinding, not a standard corporate nav bar.

Navigation patterns may include:

• Title-screen top nav
• Pause-menu sidebar
• Pixel tabs
• Scoreboard header
• Stage select nav
• Bottom control bar
• Breadcrumbs as level paths

Navigation rules:

• Use VT323 at 15px, 17px, or 21px.
• Use short labels.
• Use active state with fill, border, marker, or icon.
• Use blue for primary active state.
• Use yellow for reward or highlight state.
• Preserve keyboard navigation.
• Provide visible focus states.
• Avoid subtle text-only nav if it is hard to identify as interactive.

Forms

Forms should feel like arcade input panels, name-entry screens, or settings menus while remaining easy to use.

Form rules:

• Labels must always be visible.
• Placeholder text must not replace labels.
• Inputs should use 0px radius or minimal pixel-like geometry.
• Input text should use 17px for readability.
• Borders should be strong, not subtle gray.
• Focus-visible states must be obvious.
• Error messages must be linked to fields programmatically.
• Required fields must be indicated accessibly.
• Disabled fields must remain understandable.
• Long labels and helper text must wrap cleanly.

Recommended input styling:

.input {
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--arcade-ink);
  border-radius: 0;
  padding: 12px 16px;
  font-family: var(--font-primary);
  font-size: 17px;
}

.input:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 3px;
}

For high-playfulness forms, inputs may use a small hard offset shadow. For dense settings forms, reduce decorative effects and prioritize scanning.

Name Entry and Code Inputs

Sega works especially well for arcade name-entry, PIN, invite-code, and game-code inputs.

Rules:

• Use large VT323 characters.
• Use strong border boxes.
• Use clear cursor/focus state.
• Support paste behavior.
• Support keyboard navigation between cells.
• Announce errors clearly.
• Do not rely on color alone.
• Keep touch targets comfortable.

Example labels:

Leaderboards and Scoreboards

Leaderboards are a signature use case. They should feel like arcade score screens.

Leaderboard rules:

• Use VT323 for names, ranks, and scores.
• Use tabular alignment where possible.
• Right-align score values.
• Use large score text.
• Use blue or yellow highlight for the current player.
• Use semantic colors only for actual state feedback.
• Support loading, empty, and error states.
• Provide responsive behavior for small screens.
• Avoid color-only ranking indicators.

Scoreboard fields may include:

• Rank
• Player
• Score
• Level
• Time
• Streak
• Status
• Reward

Example row states:

HUD and Status Bars

HUD components should communicate game state clearly.

HUD patterns may include:

• Health
• Energy
• Score
• Timer
• Lives
• Level
• XP
• Coins
• Streak
• Progress

HUD rules:

• Use compact pixel labels.
• Keep values large and readable.
• Use strong contrast.
• Use icons only when they improve recognition.
• Do not rely on color alone for health, danger, or completion.
• Support responsive compression.
• Avoid excessive animation.

Good labels:

Achievement and Reward Cards

Achievements should feel celebratory, but not inaccessible.

Achievement rules:

• Use card trim, yellow highlights, and large VT323 headings.
• Use clear earned / locked states.
• Include text labels.
• Use icons or badges as secondary cues.
• Avoid relying on color alone.
• Respect reduced-motion preferences.
• Keep unlock animations short.

Achievement states:

Modals and Overlays

Modals should feel like pause screens, confirmation panels, or arcade dialog boxes.

Modal rules:

• Use 0px radius.
• Use strong border.
• Use white or brand-filled surface.
• Use optional rainbow trim for major dialogs.
• Avoid soft shadows.
• Use large VT323 title.
• Use pill buttons for actions.
• Trap focus inside the modal.
• Close on Escape unless explicit confirmation is required.
• Return focus to the triggering element after close.

Destructive modals must use danger language and explain consequences clearly.

Example destructive copy:

Reset this run?

Your current progress will be lost.

[Reset run] [Cancel]

Alerts and Feedback

Alerts should feel like system messages or game prompts.

Alert rules:

• Use strong border and readable text.
• Use semantic colors only for real state feedback.
• Include text labels and recovery guidance.
• Do not rely on color alone.
• Keep alert copy concise.
• Make dismiss controls keyboard accessible.
• Avoid excessive flashing.

Example feedback copy:

Loading States

Loading states should feel like arcade transitions without slowing the user down.

Loading patterns may include:

• Pixel spinner
• Loading… prompt
• Progress bar
• Level loading card
• Blinking cursor
• Skeleton panels with hard edges
• Coin or token animation

Loading rules:

• Include accessible loading text.
• Preserve layout dimensions.
• Avoid rapid flashing.
• Respect reduced-motion preferences.
• Do not block interaction longer than necessary.
• Do not use animation as the only feedback.

Good loading copy:

Empty States

Empty states should feel like game prompts, not blank app screens.

Empty state rules:

• Use a framed card or scoreboard panel.
• Use a large VT323 heading.
• Explain what is missing.
• Provide one clear action.
• Use playful but clear copy.
• Avoid vague labels.
• Avoid decorative art that pushes the action away.

Examples:

Tables and Data

Sega can support data screens, especially leaderboards, inventories, match history, and game settings.

Table rules:

• Use VT323 for player-facing data.
• Use JetBrains Mono only for developer or technical values.
• Use hard-edged rows and strong dividers.
• Keep row height readable.
• Right-align scores and numeric values.
• Use selected row states with more than color.
• Support horizontal scroll or card transformation on small screens.
• Avoid overly dense tables if VT323 becomes hard to scan.

Tables should feel like scoreboard lists, not spreadsheets with a novelty font.

Accessibility

Sega enforces WCAG 2.2 AA as a baseline. Arcade-inspired interfaces can become inaccessible quickly if pixel type, saturated colors, motion, and press effects are not carefully implemented.

Core Accessibility Requirements

• Text must meet WCAG 2.2 AA contrast against its background.
• Every interactive element must be reachable and operable by keyboard.
• Every interactive element must have a visible focus-visible state.
• Color must never be the only indicator of state.
• Form errors must be visually and programmatically associated with fields.
• Semantic HTML must be used before ARIA.
• Touch targets should be large enough for comfortable interaction.
• Motion must respect reduced-motion preferences.
• Pixel typography must remain readable at supported sizes.
• Game-like interactions must provide keyboard alternatives.

Pixel Font Readability

VT323 is expressive, but it must be used responsibly.

Rules:

• Avoid body text smaller than 17px when possible.
• Use 13px and 15px only for short labels or metadata.
• Keep paragraphs short.
• Use clear line height.
• Avoid low-contrast text.
• Avoid long all-caps text.
• Test on mobile and lower-resolution screens.
• Provide fallback fonts.

If a long content page becomes hard to read in VT323, increase type size, shorten copy, or create a readable fallback style while preserving the Sega visual treatment in headings and controls.

Contrast Requirements

The blue and yellow palette is high-energy but must be tested.

Rules:

• Text on primary blue must use a contrast-safe foreground.
• Text on secondary yellow should usually be dark.
• Small text on saturated blue or yellow must be tested.
• Disabled states must remain understandable.
• Rainbow trim must not reduce text readability.
• Focus rings must stand out against both blue and yellow surfaces.
• Semantic colors must be tested against their actual backgrounds.

Do not assume saturated color equals accessible contrast.

Focus States

Focus states should be bold, arcade-like, and unmistakable.

Preferred focus treatments:

• 3px or thicker outline
• Yellow focus ring on blue components
• Blue focus ring on yellow or white components
• Offset outline outside the button and its shadow
• Selection frame for cards and menu items
• Focus marker icon plus outline for dense menus

Avoid focus states hidden behind offset blocks, rainbow shadows, or animated effects.

Keyboard and Gamepad Interaction

Sega interfaces should support keyboard-first interaction. If the product supports gamepad input, visual focus and selection states must still map clearly to keyboard focus.

Keyboard rules:

• Buttons activate with Enter and Space.
• Links activate with Enter.
• Menus support Tab and, where appropriate, arrow-key navigation.
• Modals trap focus and return focus after close.
• Selection grids support keyboard movement.
• Choice cards use radio, checkbox, button, or link semantics.
• Sliders and settings controls use native or accessible patterns.
• Drag-and-drop interactions provide keyboard alternatives.

Gamepad-inspired UI must not become pointer-only.

Motion Accessibility

Motion should feel tactile, but not overwhelming.

Acceptable motion:

• Button press compression
• Menu selection nudge
• Card selected pop
• Score count-up
• Achievement reveal
• Pixel loading loop

Motion rules:

• Respect prefers-reduced-motion.
• Avoid rapid flashing.
• Avoid continuous blinking text for important content.
• Do not animate essential instructions away.
• Do not use motion as the only selected-state cue.
• Keep transitions short and functional.

Reduced-motion mode should preserve press states through static visual changes rather than animation.

Content and Tone

Sega uses concise, confident, helpful copy with a playful game-like edge. It should feel energetic and clear, not childish or confusing.

Voice Principles

Sega copy should be:

• Short
• Direct
• Playful
• Action-oriented
• Confident
• Easy to scan
• Clear under pressure

The interface can use game language, but it should not sacrifice clarity. Users should always know what an action does.

Good Examples

Avoid

Game-like copy should be fun, but every label must still explain the action.

Game Copy Standards

Use game metaphors when they clarify the experience.

Good uses:

• Start game
• Resume run
• Save progress
• Unlock reward
• Choose player
• Submit score
• Try again
• Next stage

Avoid vague or overly stylized labels:

• Blast off
• Do it
• Power up
• Let’s gooo
• Make magic
• Press here

The visual design provides the arcade energy. The copy should keep the user oriented.

How to Use with AI Tools

Cursor and Claude Code

Add the Sega skill file to your project so the assistant can use it as design-system context while generating UI code.

npx typeui.sh sega

The skill file should be saved as SKILL.md or another project-level instruction file. Once present, ask the assistant to generate pages, components, flows, or refactors using the Sega design system.

Example prompts:

Create an arcade-style landing page using the Sega design system.

Build accessible chunky pill buttons that press into hard offset blocks.

Generate a leaderboard screen with VT323 typography, score panels, and rainbow-ringed card shadows.

Refactor this game settings page to use hard-edged 0px panels, pixel typography, and arcade interaction states.

Claude

Use the design skill directly in Claude by adding the markdown file as project knowledge or pasting it into the beginning of a conversation.

Then ask for implementation-specific output:

Generate React components for Sega buttons, cards, inputs, modals, and leaderboards.

Create component rules for arcade menus, scoreboards, achievements, and loading states using this skill.

Audit this UI against the Sega design rules and list required changes.

ChatGPT, Windsurf, Copilot, v0, and Other AI Tools

The file is standard markdown, so it can be used with any AI assistant that accepts context, prompt instructions, or project-level rules.

Useful workflows include:

• Paste the skill into the chat before requesting UI code.
• Add it to a repository-level instruction file.
• Use it as context for game UI, playful dashboards, or arcade-themed product pages.
• Use it to define button press states, card trim, menus, scoreboards, and achievements.
• Use it as a QA checklist during code review.
• Ask the assistant to migrate an existing neutral UI into the Sega arcade style.

The best results come from prompting for concrete details: VT323 typography, 0px panels, pill-button exception, offset block press behavior, rainbow-ring card shadows, keyboard support, reduced-motion behavior, and accessibility acceptance criteria.

Design Philosophy

Sega is governed by a few core principles.

1. The Interface Should Feel Playable

Every interactive element should look and feel responsive. Buttons press. Menu items highlight. Cards select. Feedback should be immediate and obvious.

2. Pixel Typography Creates the World

VT323 is not decoration. It defines the system’s voice. Use it consistently and ensure it remains readable.

3. Sharp Panels, Chunky Controls

The system contrasts hard-edged 0px panels with rounded pill buttons. Panels feel like screens and cabinet frames. Buttons feel like physical controls.

4. Shadows Are Mechanical, Not Soft

Offset blocks and rainbow trim are part of the arcade object system. They should be hard, blur-free, and tactile.

5. Color Means Energy and State

Blue and yellow create arcade identity. Semantic colors communicate status. Use color boldly but consistently.

6. Playful Does Not Mean Random

A game-inspired interface still needs tokens, hierarchy, spacing, states, responsive behavior, and accessible semantics.

7. Accessibility Keeps the Game Playable

Keyboard support, visible focus states, readable pixel type, sufficient contrast, reduced-motion support, and clear labels are part of the game experience.

Anti-Patterns

Avoid these implementations when generating Sega-style interfaces:

• Generic rounded SaaS cards
• Soft drop shadows or blurred elevation
• Glassmorphism, glossy gradients, or subtle pastel styling
• Applying VT323 only to headings while the rest of the UI feels generic
• Using 0px corners on buttons when the chunky pill button is required
• Using large rounded corners on cards and panels
• Thin gray borders instead of strong arcade framing
• Offset button shadows that do not compress on active state
• Rainbow-ring shadows on every tiny component
• Low-contrast text on blue or yellow fills
• Pixel text that is too small to read
• Placeholder-only form labels
• Interactive cards without keyboard semantics
• Menus that only work with pointer hover
• Flashing animations that ignore reduced-motion preferences
• Vague labels like Submit, Click here, or Go
• Color-only selected, success, warning, danger, or locked states
• One-off spacing values outside the defined scale
• Components missing hover, focus-visible, active, disabled, loading, empty, or error states

Sega should feel playful and arcade-native, but never cluttered, inaccessible, or gimmicky.

Migration Notes

When adapting an existing interface to Sega, migrate in this order:

1. Replace generic typography with VT323 for primary and display text.
2. Normalize type sizes to the 13 / 15 / 17 / 21 / 27 / 35px scale.
3. Replace soft rounded cards with hard-edged 0px panels.
4. Convert primary actions into chunky pill buttons.
5. Add solid offset block shadows to buttons.
6. Implement active button compression into the offset block.
7. Add strong borders to cards, inputs, menus, and panels.
8. Add rainbow-ringed shadows to featured cards and cabinet-like panels.
9. Apply blue #4502FF to primary brand actions and selected states.
10. Apply yellow #FFDA14 to highlights, secondary actions, rewards, and focus accents.
11. Normalize spacing to the 4 / 8 / 12 / 16 / 24 / 32px scale.
12. Add explicit hover, focus-visible, active, disabled, loading, empty, and error states.
13. Update menus, scoreboards, and leaderboards to support keyboard interaction.
14. Replace vague labels with short, game-appropriate action copy.
15. Test pixel typography readability across supported breakpoints.
16. Test contrast across blue, yellow, white, and semantic state surfaces.
17. Add reduced-motion fallbacks for press, pop, loading, and achievement animations.
18. Run the QA checklist before shipping.

Do not migrate by simply applying a pixel font and bright colors. Sega depends on the full arcade object system: VT323 typography, hard-edged panels, chunky pill controls, physical press behavior, cabinet-trim card shadows, explicit states, and accessibility-first interaction rules.

QA Checklist

Use this checklist when reviewing generated UI against the Sega design skill.

Visual System

• VT323 defines the visible personality of the interface.
• Cards and panels use hard-edged 0px corners.
• Buttons use chunky pill geometry as the signature exception.
• Primary buttons physically press into solid offset blocks.
• Featured cards use rainbow-ringed cabinet-trim shadows.
• Shadows are hard and blur-free.
• Blue #4502FF is used for primary brand energy and selected states.
• Yellow #FFDA14 is used for highlights, rewards, secondary actions, and focus accents.
• Soft shadows, glassmorphism, glossy gradients, and generic SaaS styling are avoided.
• The interface feels arcade-inspired and playable, not merely themed.

Typography

• Type sizes come from the 13 / 15 / 17 / 21 / 27 / 35px scale.
• VT323 is used for primary and display typography.
• JetBrains Mono is reserved for technical values.
• Pixel text remains readable at supported sizes.
• Long labels and headings wrap cleanly.
• Body copy is not too small or too dense.
• Important instructions are large enough to scan quickly.
• Font weight is used only where it renders clearly.

Components

• Buttons include default, hover, focus-visible, active, disabled, loading, and error states.
• Active buttons visibly compress into their offset blocks.
• Cards include standard, featured, selected, locked, loading, empty, and error states where relevant.
• Forms use visible labels and accessible error messaging.
• Inputs use strong borders and readable 17px text.
• Navigation and menus have clear active and focus states.
• Leaderboards align scores and support loading, empty, and error states.
• HUD elements remain readable and do not rely on color alone.
• Modals trap focus and return focus after closing.
• Empty states include helpful copy and one clear action.

Accessibility

• Text contrast meets WCAG 2.2 AA.
• Text on blue and yellow surfaces has been tested.
• Keyboard navigation works across all interactive elements.
• Focus-visible states are obvious and not hidden by shadows.
• Color is never the only indicator of state.
• Form errors are linked to fields programmatically.
• Semantic HTML is used before ARIA.
• Touch targets are comfortable.
• Pixel typography remains readable on mobile and desktop.
• Reduced-motion preferences are respected.
• Game-like menus and selection grids support keyboard interaction.

Motion and Interaction

• Hover states feel responsive.
• Active states feel physically pressed.
• Selection states are immediate and clear.
• Loading states preserve layout dimensions.
• Achievement or reward animations are short and optional.
• No rapid flashing is used.
• Motion is not the only feedback mechanism.
• Reduced-motion mode preserves all meaning.

Content

• CTA labels are short, specific, and action-oriented.
• Game metaphors clarify rather than obscure meaning.
• Error messages explain what happened and how to recover.
• Empty states explain what is missing and what to do next.
• Destructive actions clearly state consequences.
• Loading states describe the current operation.
• Vague labels like Submit, Click here, and Go are avoided.

Sega is a disciplined design system for interfaces that should feel playful, arcade-native, tactile, and game-ready. Its strength comes from VT323 pixel typography, hard-edged 0px panels, chunky pill buttons, physical press states, rainbow-ringed cabinet shadows, bold blue-and-yellow color, and accessibility-first interaction rules.