Jumpstart Design System

Component Library and Style Guide · Components

4

Palette Showcase

Solid color preview. Light references remain available in specifications and tokens.

7

Button Library

Variant Small (40px) Medium (44px) Large (48px) Extra Large (52px)
Primary
Option Action
Strong
Return
8

Tags and Status Indicators

Tag Sizes

XS Tag SM Tag MD Tag LG Tag

Color Variants (Solid Fill)

Green Signal Blue Red Yellow Light Blue Platinum Pink Teal

Color Variants (Light Fill)

Green Signal Blue Red Yellow Light Blue Platinum Pink Teal

Special Types

Verified

Status Indicators (Solid Fill)

Active Pending Inactive

Status Indicators (Light Fill)

Active Pending Inactive
9

Icon Library

Most Used Icons

Curated icon set from lucide-react for high-frequency UI usage.

5

Typography

Type Scale

Display / H1

Jumpstart Design System

Section Heading / H2

Typography Section

Body Large

Component Library and Style Guide

Body

Text defaults to clear reading with consistent rhythm across cards, tables and labels.

Meta / Label

Most Used Icons

Typography Rules

Family

Raleway is applied globally with sans-serif fallback.

Weights

400 for regular reading, 600 for emphasis, 700 for titles and actions.

Scale

11px, 12px, 13px, 14px, 16px, 18px, 20px, 24px, 36px, 48px.

Letter Spacing

Use tracking-tight in major headings, tracking-wider and tracking-widest only in technical labels.

Case

Uppercase is reserved for labels and metadata, not for core body text.

1

01. Overview

Handbook V2 context

Clean, hierarchical visual system ready to scale across product

The Jumpstart design system uses navy for authority, green for action, yellow for momentum and warnings, light blue for transactional information, signal blue for secondary information, red for urgent overdue communication, and pink for both problem signaling and expressive positive emphasis. White, soft gray, and medium gray are the base of the system so pages stay calm and readable. Visual hierarchy comes from spacing, scale and contrast, never from excessive decoration.

Navy + Green Authority and action with clear visual roles
4px Grid Tokenized scale for every spacing decision
80 / 15 / 5 Color distribution: light surfaces, navy contrast, green action
AA Target Contrast and visible focus as baseline
2

02. Core Principles

Generous whitespace, hierarchy by scale and spacing, green only where action exists, and navy for institutional trust.

Hierarchy by scale

Headings with negative tracking and wide spacing create fast scanning.

Action with restraint

Green appears in CTAs, progress icons and focus states, never as generic decoration.

Visual trust

Navy structures authority surfaces, especially in institutional sections.

3

Color behavior and composition rules

Usage logic

  • Overall mood stays composed: mostly white and light gray, with color used only when meaning is explicit.
  • Distribution target: 80% white/light surfaces, 15% navy anchors, 5% green action states.
  • Navy + white are a pair for authority contrast; use only 2-3 dark sections per page.
  • Green + pink are a pair for solution versus pain signaling, never decorative.
  • Medium Gray is default reading color; headings stay navy and actions stay green/yellow/pink by state.
  • Yellow is rare and intentional, reserved for warnings or moments that require pause.
  • When any rule intersects with current palette rules in this gallery, the current gallery rules take precedence.
6

06. Spacing (Complete Summary)

Absolute rule: always use multiples of 4px. When in doubt, choose more space.

Base tokens

space-1 · 4px
space-2 · 8px
space-3 · 12px
space-4 · 16px
space-6 · 24px
space-8 · 32px
space-12 · 48px
space-16 · 64px
space-20 · 80px

Usage

Context Rule
Section (vertical)clamp(80px, 10vw, 140px)
Section (horizontal)clamp(20px, 5vw, 80px)
Max width1200px centered
Card padding / gap24px / 24px
Title to grid48px
Primary / Secondary8px x 16px
Strong CTA12px x 24px
Label to heading8px
Heading to subtitle16px
Subtitle to CTA24px
10

10. Accessibility

Minimum standards to preserve contrast, keyboard navigation, and clear state feedback.

Checklist Target Implementation
ContrastAAPrimary text in navy over light surfaces.
Visible focus100% of controls:focus-visible in green with consistent outline treatment.
Icon-only buttonsAccessible nametitle or aria-label is required.
Reduced motionRespect user preferenceDisable transitions under prefers-reduced-motion.
11

11. Brand Logos

Logo usage is strict: only ultra-light or ultra-dark surfaces. Logos are never applied over colored backgrounds such as green, yellow, or blue.

  • Use logos only on ultra-light backgrounds (#FFFFFF, #F7F7F7) or ultra-dark backgrounds (#0A122A).
  • Use logo_white_background.* on ultra-light surfaces and logo_dark_background.* on ultra-dark surfaces.
  • Prohibited: never place logos on colored backgrounds (#21CC36, #F0C808, #4A90E2, #69A2B0).
  • Public apps: only square_dark.png and small_square_dark.png are allowed.
  • Internal dark mode only: square_white.png and small_square_white.png.
  • No overlays, gradients, blend modes, or recoloring.

Approved: Ultra-light (SVG + PNG)

Light-background logo SVG
Light-background logo PNG

Approved: Ultra-dark (SVG + PNG)

Dark-background logo SVG
Dark-background logo PNG

PROHIBITED: Green background

Prohibited Invalid usage on green

PROHIBITED: Yellow background

Prohibited Invalid usage on yellow

PROHIBITED: Blue background

Prohibited Invalid usage on blue
12

12. Email Templates

Email templates are presented in full-screen cards with horizontal slide navigation so each one can be reviewed at maximum size without leaving this page.

Payment Due Today

Warning

Payment Reminder

Info

Payment Overdue

Error

Payment Confirmed

Success
13

13. File Templates

Invoice and receipt are file templates (not emails). They are shown in full-screen cards with horizontal slide navigation for complete review in this page.

Invoice Template

File / Pending

Official Receipt

File / Paid