MAR

Created from prompt

# Wall Calendar Design Specification — Monthly Calendar Page ## Input Props This design is **parameterized**. The following props control each page: - **`month`**: The month to render (1–12) - **`year`**: The year (e.g. 2025) - **`color`**: The primary background color for the entire page (hex value). All other colors (text, grid lines, date numbers, legends) are derived from this single color. See "Color System" below. ## Overall Format - Portrait orientation wall calendar page - Spiral/wire binding at the top edge - Single center hole punch for wall hanging - Clean, minimal, bold, modern aesthetic - **The entire page background is the `color` prop** — this is a bold, saturated, monochromatic design - All text and grid elements use a contrasting shade derived from the background color (darker or lighter version of the same hue, or a complementary accent) ## Reference Color Palette (one color per month) These are the suggested `color` values based on the reference images: | Month | Color Name | Hex (approx) | |-------|----------------|---------------| | JAN | Mustard Yellow | #D4A017 | | FEB | Bright Red | #E02020 | | MAR | Warm Orange | #E8751A | | APR | Soft Pink | #F0A0B0 | | MAY | Teal Blue | #6BB8B0 | | JUN | Warm Beige | #D8C8A0 | | JUL | Bubblegum Pink | #E890A0 | | AUG | Warm Cream | #DDD0B8 | | SEP | Dark Forest | #1A3A2A | | OCT | Golden Yellow | #C8A820 | | NOV | Emerald Green | #1A7A4A | | DEC | Forest Green | #1A6A3A | ## Color System (derived from `color` prop) - **Page background**: The `color` prop value itself - **Grid lines**: A slightly darker or lighter shade of the background (10–15% shift) — subtle, tonal contrast - **Month abbreviation text**: A contrasting color that pops against the background. For light backgrounds (yellow, pink, beige, cream), use a bold warm red/orange (#E02020 to #D44A00). For dark backgrounds (forest green, dark teal), use a lighter or pastel contrasting color (pink #E890A0 or orange #E8751A) - **Day-of-week labels**: Same color as the month abbreviation text, but smaller - **Date numbers**: Same color as grid lines (tonal, subtle) - **Moon phase icons & legend**: Accent color — either matching the month text color or a muted version - **Brand text**: Same color as the month abbreviation text - **Holiday text**: Same as date number color or a slightly bolder accent ## Dimensions & Proportions - Top ~25% is the header area (month name) - Bottom ~75% is the calendar grid - Margins: roughly equal on left and right (~5% of width), slightly larger at bottom ## Header Section - **Month abbreviation**: 3-letter uppercase (JAN, FEB, MAR, etc.) - **Alignment: LEFT-JUSTIFIED** — flush with the left margin of the grid - **Font**: **Rounded, heavy, blocky sans-serif** — characterized by: - Very heavy/black weight - Distinctly rounded terminals and corners (not sharp geometric) - Tight letter-spacing (slightly negative tracking) - Chunky, playful but modern feel - Reference fonts: **Nunito Black**, **Baloo 2 ExtraBold**, **Lilita One**, or **Quicksand Bold** — the key quality is the combination of heaviness + rounded edges - **Color**: Contrasting accent (see Color System above) - **Size**: Very large — dominates the top quarter of the page ## Day-of-Week Row - Positioned directly above the grid, separated by a thin line - Days as 3-letter uppercase abbreviations: **SUN MON TUE WED THU FRI SAT** - Same font family as month name, medium-bold weight - Same color as month abbreviation text - Evenly spaced across all 7 columns - **SAT column label** may use a different accent color (e.g. red for weekends) on some months ## Calendar Grid - **6 rows × 7 columns** (to accommodate any month layout) - Thin border lines forming the grid — tonal/subtle, not high contrast - Cells are rectangular, wider than tall (roughly 1.3:1 aspect ratio) - **Background**: Same as page background (no separate cell fill — the grid is just lines on the colored background) - **Date numbers**: Positioned in the **top-right corner** of each cell - Date font: Same rounded sans-serif family, regular/medium weight, small - Date numbers are **zero-padded** for single digits (01, 02, 03… not 1, 2, 3) - Empty cells for days outside the current month are left blank - **The "1" or "01" date** of the month may be highlighted in the accent/month-name color to mark the start ## Mini Next-Month Calendar - Located in the **top-left cell** (first empty cell area before day 1) - Displays the following month as a tiny mini calendar - Month label rotated 90° counter-clockwise along the left edge, uppercase - Small 7×5 grid with S M T W T F S headers - Very small text, same tonal color as grid lines - Fits within the first cell or spanning ~1.5 cells of the top row ## Holidays & Notable Dates - Displayed as small text at the **bottom of the relevant cell** - Font: Very small, regular weight - Holiday date numbers may be highlighted in accent color ## Moon Phases - Small circular icons placed near the date number in relevant cells - Four phases: - **New Moon**: Solid filled circle - **First Quarter**: Half-filled circle (right half) - **Full Moon**: Open/outlined circle - **Last Quarter**: Half-filled circle (left half) - Icons use the accent color ## Moon Phase Legend - Positioned at the **bottom-left of the page**, below the grid - Horizontal row of 4 items: icon + label for each phase - Small text ## Branding - Brand name **"HABITCAL"** in the **bottom-right corner** below the grid - All caps, bold, same rounded heavy font as the month name - Same color as month abbreviation text - Small but legible, positioned as a subtle brand mark - No period after the name ## Typography Summary | Element | Weight | Size (relative) | |--------------------|-------------|------------------| | Month abbreviation | Black/ExtraBold (rounded) | ~48–72pt equivalent (very large) | | Day-of-week labels | Bold (rounded) | ~12–14pt | | Date numbers | Medium (rounded) | ~14–16pt | | Holiday text | Regular | ~7–8pt | | Mini calendar | Regular | ~5–6pt | | Brand name | Bold (rounded) | ~8–10pt | **Font family**: Use a single rounded heavy sans-serif throughout. Top choices in order of closeness to the reference: 1. **Nunito** (Black weight for headers, Regular for body) 2. **Baloo 2** (ExtraBold for headers) 3. **Quicksand** (Bold for headers) 4. **Varela Round** (only has one weight, less ideal) ## Key Design Characteristics 1. **Monochromatic, bold color pages** — each month is a single saturated background color, not white 2. The month abbreviation is LEFT-JUSTIFIED and uses a warm contrasting accent color 3. **Rounded, chunky, playful typography** — not sharp/geometric 4. Grid lines are subtle and tonal (same-hue as background, slightly shifted) 5. The overall feel is: **bold, colorful, playful, modern, Scandinavian pop** 6. No decorative illustrations — pure typography + color + grid 7. Every element on the page derives from the single `color` prop Set Default BG Color to White Dont show any holidays