4SP Component Library

A comprehensive guide to the UI elements used across the v5 client.

Colors & Theme

Page Background

#040404

Container Background

#000000

Input Background

#111111

Border Color

#333333

Primary (Indigo 500)

#4f46e5

Primary Text

#c0c0c0

Typography

Heading 1 (4xl)

Heading 2 (3xl)

Heading 3 (2xl)

Body text. The font family is 'Geist'. Note that font-weight 400 is forced on headings.

Secondary text / metadata often uses #505050 or #888.

Buttons

Toolbar / Settings Style

Unified style with 18px border radius, consistent padding, and shadow effects.

Default

Primary Override

Danger Override

Lock Screen / Authentication

Aligned with the toolbar style.

Unlock Button

Icon Buttons

Used in the Navbar and Overlays.

User Profile

Inputs

Standard Text Input

Lock Screen Code

Panic Key

Redirects to...

Navigation Elements

Inactive Tab

Active Tab

Cards & Containers

Settings Box

Section Title

This is a standard container used in the settings menu to group related controls.

Dashboard Widget

Games & Media

Game Card

Used in the Games page grid. Includes hover effects and action buttons.

Zone Item

Minecraft

Version Dropdown