camera

🏡 Ben’s Cozy Cabin Style Guide

Welcome to the Cozy Cabin UI Style Guide—your one-stop shop for colors, fonts, and design cues inspired by woodgrain, warm lamps, and chill uptime monitoring.
Use this for anything: status pages, dashboards, robots, landing pages, or even your next secret pie recipe website.

---

🎨 Color Palette

Name	Variable	Hex	Color	Usage Example
Cabin Cream	--color-cabin-cream	#F4E1C1		Background, panels
Deep Forest Green	--color-deep-forest-green	#1aad3a		Success, accents
Chill Blue	--color-chill-blue	#087fe7		Info, maintenance
Muted Teal	--color-muted-teal	#27918d		Info, cool highlights
Sunny Yellow	--color-sunny-yellow	#ffaf0f		Warnings, pop highlights
Fire Orange	--color-fire-orange	#ff6f00		Warnings, buttons
Rusty Red	--color-rusty-red	#f64831		Danger, errors
Soft Black	--color-soft-black	#666666		Text, outlines, shadows
Shadow Gray	--color-shadow-gray	#77726e		Secondary text, borders
Deer Brown	--color-deer-brown	#B3824D		Furniture, warm elements
Deep Sea Blue	--color-deep-sea-blue	#2383e2		Details, contrast

Example: CSS Variables

:root {
  --color-cabin-cream: #F4E1C1;
  --color-deep-forest-green: #1aad3a;
  --color-chill-blue: #087fe7;
  --color-muted-teal: #27918d;
  --color-sunny-yellow: #ffaf0f;
  --color-fire-orange: #ff6f00;
  --color-rusty-red: #f64831;
  --color-soft-black: #666666;
  --color-shadow-gray: #77726e;
  --color-deer-brown: #B3824D;
  --color-deep-sea-blue: #2383e2;
}

---

🖋️ Typography

• Headers: Montserrat, Nunito, or Quicksand (rounded, friendly)
• Body: Roboto or Open Sans (clean sans-serif)
• Display/Playful: Fredoka One for “fun” elements or numbers

---

🪵 Style Elements

• Background: Always use Cabin Cream or a wood-texture if you’re feeling extra.
• Borders & Corners: Soft, rounded (border-radius: 1rem or more).
• Cards & Containers: White or cream backgrounds, subtle shadows, gentle borders.
• Buttons: Chunky, rounded, bold—Fire Orange or Deep Forest Green with white text.
• Icons: Flat, filled, and use the palette above. They default to Chill Blue and darken to Deep Sea Blue when pressed.

---

🏷️ Usage Examples

Primary Button

.button-primary {
  background: var(--color-fire-orange);
  color: #fff;
  border-radius: 0.75rem;
  padding: 0.75rem 2rem;
  font-weight: bold;
  border: none;
  transition: background 0.2s;
}
.button-primary:hover {
  background: var(--color-deep-forest-green);
}

Header

.header {
  color: var(--color-deep-forest-green);
  background: var(--color-cabin-cream);
  font-family: 'Montserrat', sans-serif;
}

Card

.card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 24px 0 rgba(119,114,110,0.12);
  border: 1px solid var(--color-shadow-gray);
  padding: 2rem;
}

Bird Login

The login screen uses a playful bird illustration. Eyes follow the email caret and wings rise to cover them when focusing the password field.

.svgContainer {
  position: relative;
  width: 200px;
  height: 200px;
}
.pupil {
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.wingLeft,
.wingRight {
  visibility: hidden;
  transition: transform 0.4s ease;
}

---

🪑 Mood & Aesthetic

• Cozy, relaxed, and inviting.
• Modern, not sterile.
• Inspired by wood cabins, soft lamps, and a sense of uptime security.
• Visual warmth, even when displaying system errors.

Pro tip: If you’re not sure what color to use, imagine the soft glow of a lamp on a wooden wall, a hot drink, and a status page that says, “All systems operational.” That’s your vibe.

---

For overall project progress see docs/status_tracker.md.