Design System & Style Guide

Color Palette

Blue Ocean Hex: #1877F2 RGB: rgb(52, 152, 219)
Lime Green Hex: #32CD32 RGB: rgb(46, 204, 113)
Vivid Red Hex: #e74c3c RGB: rgb(231, 76, 60)
Border grey Hex: #808080 RGB: rgb(142, 68, 173) Border Color

Typography

Montserrat

Regular: The quick brown fox jumps over the lazy dog.

Bold: The quick brown fox jumps over the lazy dog.

Italic: The quick brown fox jumps over the lazy dog.

Open Sans

Light: The quick brown fox jumps over the lazy dog.

Bold: The quick brown fox jumps over the lazy dog.

Italic: The quick brown fox jumps over the lazy dog.

Text Styles

Main Heading (H1)

font-family: 'Montserrat', sans-serif;
font-size: 2.5rem;
font-weight: 700;
color: #333;
text-align: center;

Subheading (H2)

font-family: 'Roboto Slab', serif;
font-size: 1.8rem;
font-weight: 400;
color: #2c3e50;
border-bottom: 2px solid #3498db;

Body Text

font-family: 'Open Sans', sans-serif;
font-size: 1rem;
line-height: 1.6;
color: #333;

Methods for Web Designing: A Creative Journey

Crafting a Style Guide: A Tale of HTML and CSS

Let me take you through the fascinating world of web design, where every tag, class, and style tells a story of creativity and functionality.

The HTML Structure: Building the Foundation

I created a semantic HTML structure that tells a clear story. Each section became a chapter in my design narrative:

  • <section id="colors">: A vibrant palette of design language
  • <section id="typography">: The voice and personality of this website
  • <section id="text-styles">: The grammatical rules of visual communication

The id attributes became more than just selectors - they were landmarks in my design journey, each telling a unique part of this website's story.

CSS: Painting with Code

CSS transformed this basic HTML into a living, breathing design system. Each class became a brushstroke:

  • .color-box: More than a div, it's a canvas of color and interaction
  • .font-showcase: A stage where typography performs
  • :hover effects: Adding life and personality to static elements

Take the .color-box, for example. It's not just a container, but a storyteller: 

.color-box {
    display: flex;                  // Organizing content with purpose
    flex-direction: column;         // Stacking information thoughtfully
    box-shadow: multiple layers     // Creating depth and dimension
    transition: all 0.3s ease;      // Adding fluid, natural movement
}

Design Principles in Action

Each design decision was intentional:

  • Hierarchy: Using h1, h2, h3 to create a clear information structure
  • Readability: Choosing fonts and colors that guide the user's eye
  • Interaction: Adding hover effects that provide feedback and delight

Responsive Thinking

Responsive design isn't just about screen sizes - it's about creating an adaptive experience: 

body {
    max-width: 1200px;      // Containing content
    margin: 0 auto;         // Centering on larger screens
    padding: 2rem;          // Breathing room
}

.color-palette {
    display: flex;          // Flexible layout
    flex-wrap: wrap;        // Adapting to different screen sizes
    gap: 1rem;              // Consistent spacing
}

"In web design, every pixel tells a story, every interaction creates an experience."