Color Palette

Military Palette

Tactical Black

#0A0A0A

Tactical Olive

#3D4F2F

Tactical Olive Dark

#2A3720

Tactical Tan

#C4A77D

Tactical Gunmetal

#2A3439

Tactical Gunmetal Light

#3D4A50

Accent Colors

Tactical Orange

#FF6B00

Tactical Orange Light

#FF8A33

Tactical Orange Dark

#CC5500

Gray Scale

#F7F7F7

#E3E3E3

#C8C8C8

#A4A4A4

#818181

#666666

#515151

#434343

#383838

#1A1A1A

Typography

Military Font (Oswald)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body Font (Inter)

Large body text for emphasis.

Regular body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Small text for captions and secondary information.

Extra small text for fine print.

Display Sizes

Display Large

Display Medium

Display Small

Buttons

Variants

Sizes

States

Link Button

Cards

Default Card

Basic card with subtle background.

Elevated Card

Card with shadow for emphasis.

Outlined Card

Transparent with border.

Badges

Primary Secondary Success Warning Error

Small Medium

Statistics

12,450

Shots Delivered

42

Batches Completed

98 %

Delivery Rate

$ 124K

Total Raised

Progress Bars

Current Batch 75%

With Animation 45%

Complete 100%

Small Size 25%

Form Elements

Email Address

Email with Error

Please enter a valid email address

Display Name (Optional)

Breakpoints

Name	Min Width	Description	Usage
xs	320px	Small phones	xs:class
sm	480px	Large phones	sm:class
md	768px	Tablets	md:class
lg	1024px	Laptops	lg:class
xl	1280px	Desktops	xl:class
2xl	1440px	Large desktops	2xl:class

Contrast Ratios (WCAG AA)

Sample

Primary text on black

#0A0A0A on #F7F7F7

19.4:1

PASS

Sample

Orange on black

#0A0A0A on #FF6B00

5.2:1

PASS

Sample

Secondary text on black

#0A0A0A on #A4A4A4

7.0:1

PASS

Sample

White on orange

#FF6B00 on #FFFFFF

3.7:1

Large text only (3:1)

Sample

Black on orange

#FF6B00 on #0A0A0A

5.2:1

PASS

Spacing Scale

xs

sm

md

lg

xl

2xl

3xl