Colors

Deep Navy

HEX: #072260

HSL: (222, 86%, 20%)

RGB: (7, 34, 96)

Crimson

HEX: #DC143C

HSL: (348, 78%, 52%)

RGB: (220, 20, 60)

Lime Cream

HEX: #C5D86D

HSL: (71, 58%, 64%)

RGB: (197, 216, 109)

Pearl Aqua

HEX: #AFE0CE

HSL: (158, 44%, 78%)

RGB: (175, 224, 206)

Linen

HEX: #FFEDDF

HSL: (26, 100%, 94%)

RGB: (255, 237, 223)

Smoky Rose

HEX: #86615C

HSL: (7, 19%, 44%)

RGB: (134, 97, 92)

Magenta

HEX: #FF00FF

HSL: (300, 100%, 50%)

RGB: (255, 0, 255)

OrangeRed

HEX: #FF4500

HSL: (38, 100%, 50%)

RGB: (255, 69, 0)

Yellow

HEX: #FFFF00

HSL: (60, 100%, 50%)

RGB: (255, 255, 0)

Aquamarine

HEX: #7FFFD4

HSL: (160, 100%, 70%)

RGB: (127, 255, 212)

Spring Green

HEX: #00FF7F

HSL: (150, 100%, 50%)

RGB: (0, 255, 127)

Salmon

HEX: #fa8072

HSL: (0.02, 93%, 71%)

RGB: (250,128,114)

Fonts

Text Styles

H1: Main heading

  • Font-weight: 700 (bold)
  • Font-size: 32px
  • Font-family: Merriweather

H2: Subheading

  • Font-weight: 600 (semi-bold)
  • Font-size: 24px
  • Font-family: Montserrat

H3: Section heading

  • Font-weight: 500 (medium)
  • Font-size: 18px
  • Font-family: Inter

P: Paragraph text

  • Font-weight: 400 (regular)
  • Font-size: 16px
  • Font-family: Roboto

Buttons

Design Tokens

Colors

Reusable color variables for backgrounds, text, accents, borders, and palette values.

--bg-primary --text-primary --accent-primary

Typography

Font families, sizes, and weights used to keep text styling consistent.

--font-primary --fs-md --fw-bold

Spacing

Consistent spacing scale for padding, margins, gaps, and layouts.

--space-xs --space-sm --space-lg

Radius & Shadows

Reusable border radius and shadow values for cards, buttons, and surfaces.

--radius-md --shadow-md --shadow-lg

Components

Design Section

A reusable layout wrapper used for each major part of the style guide.

.design-section

Design Card

A reusable card component for colors, typography samples, tokens, and examples.

.design-card

Button System

A shared button base class with reusable visual variants.

.button .button-primary .button-outline

Theme Toggle

A small interactive control that switches between light and dark mode.

.theme-toggle

Forms

Text Inputs

Use clear labels and helpful placeholder text.

Textarea

Useful for longer user input.

Select Menu

Select menus help users choose from predefined options.

Validation States

Please enter a valid email address.

Username is available.

Checkbox

Radio Buttons

Feedback UI

Success! Your action was completed.

Layout Components

Containers

Small Container
Medium Container
Large Container

Responsive Grid

Grid Item
Grid Item
Grid Item

Card Layout

Reusable Card

Cards organize related content inside a flexible surface.

Spacing Scale

XS
SM
MD
LG

Accessibility

Semantic HTML

The project uses semantic elements such as <header>, <nav>, <main>, <section>, and <footer> to improve structure and screen reader support.

Keyboard Navigation

Interactive elements such as navigation links and theme toggle buttons are fully keyboard accessible and preserve visible focus states.

Color Contrast

The color palette was designed to maintain readable contrast ratios across both light and dark themes.

Responsive Design

Flexible layouts, responsive grids, and scalable spacing tokens ensure the interface remains usable across multiple screen sizes.

Theme System

Light & Dark Mode

The interface supports dynamic light and dark themes using CSS custom properties and data attributes.

[data-theme="light"] [data-theme="dark"]

Persistent Preferences

The selected theme is stored using localStorage so the user's preference remains active after refreshing the page.

localStorage.setItem()

Reusable Tokens

Backgrounds, text colors, borders, and surfaces automatically adapt through reusable design tokens.

--bg-primary --text-primary

Interactive Toggle

A reusable theme toggle button dynamically updates the interface and switches icons using Lucide icons.

.theme-toggle