Cozy North

A warm, minimalistic CSS framework inspired by Scandinavian design and readable typography.

Color Palette

#faf6f1

#f5efe6

#f2dcc8

#d4915f

#c4703f

#a0522d

#6b5d50

#3d3229

Semantic Colors

Success Warning Error Info Accent Default

Typography

The quick brown fox

Warm, readable, and comfortable to scan

Good typography shouldn't make you think. It should feel like settling into your favorite chair with a warm drink, where the words simply flow and your eyes never strain.

Body text is optimized at 15px with a 1.65 line-height for maximum comfort. The max-width of 68ch keeps lines from getting too long to track comfortably.

"Simplicity is the ultimate sophistication." — good design is invisible, letting content breathe naturally.

Inline code looks like this, and works naturally within sentences. Here's a Ctrl+S keyboard shortcut too.

Buttons

Sizes & Shapes

Forms & Inputs

Full Name

Email Address

Message

Navigation Patterns

Segmented Control

Cards

Getting Started

Drop in the CSS file and start using the class names. No build step, no JavaScript required.

Quick Start

Warm Card

A slightly elevated variant with warmer tones, perfect for highlighted or featured content.

65% complete

Flat Card

For content that needs to blend more subtly into the background, with no shadow and muted styling.

Alerts

This is an informational message. Something useful to know about.

Changes saved successfully. Your settings have been updated.

Your session will expire in 5 minutes. Please save your work.

Unable to connect to the server. Please check your connection.

Table

Name	Role	Status
E Emma Wilson	Designer	Active
J James Park	Developer	Away
S Sofia Rivera	PM	Active

Chat Pattern

Can you help me pick a color palette?

Of course! What kind of mood are you going for? Something warm and cozy, or more cool and minimal?

Warm and cozy, exactly like this framework

Loading States

Cozy North CSS Framework v1.0.0

Warm design for comfortable interfaces