Design System

The visual DNA of blogsandpages.com – our hand-drawn aesthetic, design tokens, and component library.

Our design system is built around a distinctive hand-drawn aesthetic. Using the Kalam and Patrick Hand typefaces, wobbly borders, hard offset shadows, and dot patterns, we create a warm, approachable visual identity that stands apart from the polished corporate look of most web platforms.

Colors

Paper #fdfbf7

Pencil #2d2d2d

Accent #ff4d4d

Secondary #2d5da1

Post-it #fff9c4

Muted #e5e0d8

Success #4caf50

Warning #ff9800

Typography

--fs-display (4.5rem) Aa

--fs-h1 (3.5rem) Heading 1

--fs-h2 (2.5rem) Heading 2

--fs-h3 (2rem) Heading 3

--fs-body-lg (1.25rem) Body Large

--fs-body (1.125rem) Body Text

--fs-small (1rem) Small Text

--fs-xs (0.875rem) Extra Small

Spacing

--spacing-1 (0.25rem)

--spacing-2 (0.5rem)

--spacing-4 (1rem)

--spacing-6 (1.5rem)

--spacing-8 (2rem)

--spacing-12 (3rem)

--spacing-16 (4rem)

Shadows

none

subtle

hover

base

deep

Border-Radius

wobbly-1

wobbly-2

wobbly-3

round

Components

Primary Ghost Secondary Small Large

<a href="#" class="btn">Primary</a>
<a href="#" class="btn btn--ghost">Ghost</a>
<a href="#" class="btn btn--secondary">Secondary</a>

SEO WordPress Blogging Webdesign Post-it

<span class="badge badge--seo">SEO</span>
<span class="badge badge--wordpress">WordPress</span>
<span class="badge badge--blogging">Blogging</span>

Card Title

Card content with the hand-drawn paper style.

<div class="card">
  <div class="card__content">
    <h4>Title</h4>
    <p>Content</p>
  </div>
</div>

Great service and beautiful blog design!

— Jane D., Blogger

<div class="testimonial">
  <p class="testimonial__quote">...</p>
  <p class="testimonial__author">&mdash; Name</p>
</div>