Website color theme and style guide + Brand Guidelines (My Ginger Garlic Kitchen)

// My Ginger Garlic Kitchen website color theme and style guide and Brand Guidelines.

By Anupama
, Last updated

Brand Guidelines: My Ginger Garlic Kitchen Recipes

Overview

This document outlines the visual identity, design standards, and brand guidelines for My Ginger Garlic Kitchen Recipes website - a cooking and recipe niche platform.

mggk color theme style

Color Palette

Primary Theme Colors

Core Colors

  • Dark: #8F903C (RGB: 143, 144, 60)
  • Darker: #6D7931 (RGB: 109, 121, 49)
  • Darkest: #434418 (RGB: 67, 68, 24)
  • Light: #AEC08C (RGB: 174, 192, 140)
  • Lighter: #B8D6B2 (RGB: 184, 214, 178)
  • Lightest: #D8D9B1 (RGB: 216, 217, 177)

Supporting Colors

  • Very Light Background: #F7FFCC
  • Grey: #404040 (RGB: 64, 64, 64)
  • Light Grey: #F0F0F0 (RGB: 240, 240, 240)
  • White: #FFFFFF

Light Mode Theme

  • Background: White (#FFFFFF)
  • Text: Grey (#404040)
  • Dark Grey Elements: Light Grey (#F0F0F0)
  • Links: Darker (#6D7931)
  • Black Text: #000000

Dark Mode Theme

  • Background: #212121
  • Text: #ECECEC
  • Dark Grey Elements: #0D0D0D (RGB: 13, 13, 13)
  • Links: #79DFC1 (Teal/Mint)
  • White Text: #FFFFFF
  • Black Elements: #000000

Typography

Font Family

Primary Font: System UI Serif Stack

-apple-system-ui-serif, ui-serif, Noto Serif, Iowan Old Style, 
Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, 
Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, 
Segoe UI Symbol, sans-serif

Font Sizes & Hierarchy

Desktop (Base: 1em / 16px)

  • H1: 2.074rem (33.18px) - Bold (700)
  • H2: 1.728rem (27.65px) - Bold (700)
  • H3: 1.44rem (23.04px) - Bold (700)
  • H4: 1.2rem (19.2px) - Bold (700)
  • Body: 1em (16px)
  • Small: 0.833rem (13.33px)

Large Screens (≥1200px)

  • Base: 1.25em (20px)
  • Body Paragraph: 19px
  • Line Height: 1.6

Mobile (≤544px)

  • Paragraph: 1.25em
  • Line Height: 1.6
  • Padding: 9px

Font Styling

  • Headings: Bold (700 weight)
  • Heading Margins: Top: 1.5rem, Bottom: 1.5rem
  • Line Height: 1.5 (standard), 1.6 (body text)

Layout & Spacing

Container Elements

  • Box Padding: 1.25rem (20px)
  • Section Padding: Varies by component

Responsive Breakpoints

  • Mobile: ≤544px
  • Small Screens: ≤640px
  • Extra Small: ≤425px
  • Mini: ≤359px
  • Desktop: ≥1200px

Grid System

Flexbox Layout:

  • Left Column: 30% width (Desktop), 100% (Mobile ≤640px)
  • Right Column: 70% width (Desktop), 100% (Mobile ≤640px)

Recipe Layout:

  • Left: 30% width (Desktop), 100% (Mobile)
  • Right: 65% width (Desktop), 100% (Mobile)

UI Components

Buttons

Primary Button

  • Background: Darker (#6D7931)
  • Border: 2px solid Darker
  • Text Color: White
  • Dark Mode: Light (#79DFC1) background, Black text

Outline Button

  • Border: 2px solid Darker (#6D7931)
  • Text Color: Darker
  • Background: Transparent
  • Dark Mode: Light (#79DFC1) border and text
  • Background: Lightest (#D8D9B1)
  • Link Color: White
  • Link Hover: #EEEEEE
  • Padding: 0.5rem, Right: 1rem
  • Dark Mode Background: Light grey (#F0F0F0)
  • Dark Mode Text: Black
  • Color: Darker (#6D7931)
  • Font Weight: Bold
  • Text Decoration: Underline (3px thickness)
  • Underline Offset: 5px
  • Underline Color: Lighter (#B8D6B2)
  • Hover: Lighter color with animated background transition
  • Dark Mode: Light (#79DFC1)

Content Blocks

Ordered Lists

  • Counter Style: Circular numbered badges
  • Counter Background: Lighter (#B8D6B2)
  • Counter Text: Black, Bold, 0.8rem
  • Counter Size: 26px × 26px
  • Line Height: 1.5
  • List Item Margin: 30px left
  • List Item Padding: 5px

Blockquotes

  • Font Size: 1.25rem
  • Line Height: 1.5
  • Color: Darker (#6D7931)
  • Margin: Top 1rem, Bottom 2rem, Left 3rem
  • Opening Quote: “❝” (38px, Darker color)
  • Font Family: Sans-serif

Images (Article)

  • Max Width: 100%
  • Height: Auto
  • Margin: 13px auto

H4 Headings

  • Background: Lightest (#D8D9B1)
  • Padding: 10px

Special Components

Recipe Print Block

  • Line Height: 1.5
  • Border: 1px dashed black
  • Padding: 10px
  • Font Family: Sans-serif
  • Padding: 15px
  • Background: Lightest (#D8D9B1)
  • Border Radius: 7px
  • Dark Mode Background: Dark (#8F903C)

Cooking Tip Block

  • Background: Lightest (#D8D9B1)
  • Header Background: Darker (#6D7931)
  • Header Text: White, 1.5em, Bold (700)
  • Title Size: 1.5em, Bold (700)
  • Card Text Padding: 20px
  • Dark Mode Background: Dark Grey (#0D0D0D)

“You May Also Like” Section

  • Margin Bottom: 20px
  • Padding: 10px
  • Border: 2px solid Lightest (#D8D9B1)
  • Border Radius: 10px
  • Link Color: Darker (#6D7931)
  • Dark Mode Link Color: Light (#79DFC1)

Category Items

  • Background: Lightest (#D8D9B1)
  • Margin: 5px
  • Padding: 10px

Homepage Category Box

  • Position: Absolute (Top: 25px, Left: 0)
  • Background: White / Very Light BG (#F7FFCC)
  • Font Size: 16px
  • Font Weight: Bold (700)
  • Text Transform: Capitalize
  • Color: Darker (#6D7931)
  • Dark Mode Background: Dark Grey (#0D0D0D)
  • Padding: 1rem 5rem
  • Background: Darkest (#434418)
  • Text Color: White
  • Font Size: 12px
  • Text Align: Left
  • Background: Lightest (#D8D9B1)
  • Dark Mode Background: Darker (#6D7931)

Author Bio Section

  • Padding: 15px
  • Border: 1px solid #F5F5F5
  • Border Radius: 7px
  • Background: Light Grey (#F0F0F0)
  • Dark Mode Background: Dark Grey (#0D0D0D)

Social Icons

  • Padding: 10px
  • Background: Light (#AEC08C)
  • Max Width: 100%
  • Max Height: 100%
  • Padding Bottom: 40px

Forms & Interactive Elements

Mailing Block

  • Margin Bottom: 15px
  • Padding: 15px
  • Border Radius: 10px
  • Background: Darkest (#434418)
  • Text Color: White

Comments Block

  • Margin Bottom: 15px
  • Padding: 15px
  • Border Radius: 10px
  • Background: Light Grey (#F0F0F0)
  • Text Color: Black

Video Embeds

Video Wrapper

  • Aspect Ratio: 16:9 (56.25% padding-bottom)
  • Border: 3px solid #FF0000 (YouTube red)
  • Position: Relative
  • Padding Top: 5px

YouTube Elements

  • Color: #E52D27 (YouTube red)

Post Elements

Blog Post Title

  • Font Size: 1.75rem
  • Line Height: 1.4em
  • Margin Bottom: 0.25rem
  • Color: Grey (#404040)
  • Font Display: Swap
  • Dark Mode: White

Blog Post Meta

  • Color: Grey (#404040)
  • Font Style: Italic
  • Dark Mode: White

Blog Header

  • Margin Bottom: 0.5rem

Blog Masthead

  • Background: Lightest (#D8D9B1)
  • Margin Bottom: 1rem

Accessibility & Special Features

  • Visibility: Only recipe print blocks visible
  • Position: Absolute (Top: 0, Left: 0)

Table of Contents

  • Link Font Weight: Normal (not bold)

Mobile Optimizations

  • Word Break: Break-word for links (≤425px)
  • Padding Reduction: Minimal padding for mini screens (≤359px)
  • Recipe Block: No border on extra small screens

Brand Voice & Content Guidelines

Visual Identity

  • Nature-inspired: Earthy tones reflecting fresh ingredients
  • Organic Feel: Sage greens and natural earth tones
  • Clean & Readable: Serif fonts for warmth and tradition
  • Accessible: Support for both light and dark modes

Color Usage Rules

  1. Use Darker (#6D7931) for primary actions and links
  2. Use Lightest (#D8D9B1) for backgrounds and subtle highlights
  3. Use Darkest (#434418) for footers and strong emphasis
  4. Maintain consistent color relationships in dark mode

Typography Rules

  1. Always use serif font stack for body content
  2. Maintain 1.5-1.6 line height for readability
  3. Use bold (700) weight for all headings
  4. Ensure sufficient margin spacing around headings

Component Consistency

  1. Border radius: 7-10px for rounded elements
  2. Padding: 15px standard for content blocks
  3. Borders: 2px for buttons, 1-3px for decorative elements
  4. Transitions: 0.1-0.4s for hover effects

Implementation Notes

Browser Support

  • Webkit: Custom text decoration and background clip
  • Print: Optimized recipe printing
  • Responsive: Mobile-first approach

Performance

  • Font Display: Swap for web fonts
  • Image Optimization: Auto height, max-width 100%
  • Flexible Layout: Flexbox for modern browsers

Last Updated: November 2025

Subscribe to our mailing list and collect recipes wherever you are. It's FREE + You'll also get a BONUS EBOOK about INTERESTING COOKING TIPS.

Share this Post with your friends: