FPS Style Guide
A comprehensive showcase of our design system and UI components.
Typography
Hero Headline (60px / 36px mobile)
Heading 1 (48px / 30px mobile)
Heading 2 (36px / 24px mobile)
Heading 3 (30px / 20px mobile)
Heading 4 (24px / 18px mobile)
Body paragraph text (18px / 16px mobile). This is the default text style used throughout the website. It uses the Inter font family with medium weight for optimal readability.
Small text (16px / 14px mobile). Used for captions, labels, and secondary information.
Bold/Emphasis text should be used sparingly for highlighting important information.
Color Palette
Background Colors
App Background
#FFFFFF Surface
#F2F0FF Interactive Colors
Interactive Default
#604AFF Primary Action
#00DE6B Decorative Colors
Green
#00DE6B Cyan
#33FFF5 Semantic Colors
Success
#00DE6B Warning
#FF4B4A Buttons
Primary Buttons
Secondary Buttons
Button States
Hover over buttons to see hover states with subtle transform and color changes.
Form Elements
Text Inputs
Select Dropdown
Checkboxes
Radio Buttons
Focus states include a colored glow effect: purple in light mode, green in dark mode.
Cards
Standard Card
Cards use the surface background color and have subtle hover effects.
Card with Icon
Cards can include icons, images, and various content types.
Text Utilities
Primary text color
Secondary text color
Muted text color
Success text color
Warning text color
Text Alignment
Left aligned text
Center aligned text
Right aligned text
Spacing System
Our spacing system uses CSS custom properties:
--space-xs: 0.25rem (4px)--space-sm: 0.5rem (8px)--space-md: 1rem (16px)--space-lg: 1.5rem (24px)--space-xl: 2rem (32px)--space-2xl: 3rem (48px)--space-3xl: 4rem (64px)