Here is the updated Figma Design Guide for the Calendar page, including all the sizes and details you can copy and paste.
This guide outlines the design specifications for the "Calendar" page, built with shadcn/ui principles and Tailwind CSS.
(Refer to tailwind.config.ts and app/globals.css for exact HSL/Oklch values)
Background:
#F8FAFC (Slate 50)#FFFFFF (White)#F9FAFB (Gray 50)Text Colors:
#0F172A (Gray 900)#64748B (Gray 500), #475569 (Gray 700)#94A3B8 (Gray 400)#64748B (Gray 700)#1D4ED8 (Blue 700)Accent Colors:
#3B82F6 (Blue 500), #2563EB (Blue 600), #1D4ED8 (Blue 700)#EFF6FF (Blue 50)Border Colors:
#E2E8F0 (Gray 200)#CBD5E1 (Gray 300)#3B82F6 (Blue 500)Event Colors: (These are examples, can be customized)
#3B82F6 (Blue 500)#8B5CF6 (Purple 500)#22C55E (Green 500)#EAB308 (Yellow 500)#EF4444 (Red 500)#6366F1 (Indigo 500)#14B8A6 (Teal 500)#F97316 (Orange 500)#EC4899 (Pink 500)(Using Inter font, default shadcn/ui setup)
h2 - Calendar Header): 24px, Bold (font-weight: 700), Color: Gray 900p-0: 0pxp-1: 4pxp-2: 8pxp-4: 16pxp-6: 24pxpy-1: 4px vertical paddingpy-3: 12px vertical paddingpx-2: 8px horizontal paddingspace-y-1: 4px vertical gapgap-2: 8px gapmb-4: 16px margin bottommb-6: 24px margin bottommt-1: 4px margin topmin-h-screen (100vh minimum height) with bg-gray-50 (#F8FAFC). Uses flex flex-col for vertical stacking.bg-white (#FFFFFF), border-b border-gray-200 (1px solid #E2E8F0), p-4 (16px padding), shadow-sm.flex-1 p-6 (24px padding, takes remaining vertical space).bg-white (#FFFFFF), rounded-lg (8px border-radius), shadow-lg, border border-gray-200 (1px solid #E2E8F0), overflow-hidden.header section)relative flex-1 max-w-md (max-width: 768px)Input:
h-10 (40px)pl-9 (36px, for icon)rounded-lg (8px)border-gray-300 (1px solid #CBD5E1)focus:border-blue-500 focus:ring-blue-500 (2px blue border, blue ring)shadow-smh-4 w-4 (16px x 16px), text-gray-400 (#94A3B8), positioned absolute left-3 top-1/2 -translate-y-1/2.Date Picker Button (Button):
w-[280px]h-11 (44px)justify-start text-left font-normal (default button padding, text aligned left)rounded-lg (8px)border-gray-300 (1px solid #CBD5E1)text-gray-700 (#475569)hover:bg-gray-100 (#F1F5F9)shadow-smmr-2 h-4 w-4 (16px x 16px), text-gray-500 (#64748B).w-auto p-0, bg-white (#FFFFFF), rounded-lg (8px), shadow-lg, border-gray-200 (1px solid #E2E8F0).Month Navigation Buttons (Button - Chevron Left/Right):
h-9 w-9 (36px x 36px)p-0 flex items-center justify-centerrounded-fulloutlineborder-gray-300 (1px solid #CBD5E1)text-gray-600 (#475569)hover:bg-gray-100 (#F1F5F9)h2): text-2xl (24px), font-bold (700), text-gray-900 (#0F172A).bg-white (#FFFFFF), rounded-lg (8px), shadow-lg, border border-gray-200 (1px solid #E2E8F0), overflow-hidden.grid grid-cols-7, text-center, text-sm (14px), font-medium (500), text-gray-600 (#475569), border-b border-gray-200 (1px solid #E2E8F0), py-3 (12px vertical padding).Day Cells: grid grid-cols-7, auto-rows-[120px] (min-height: 120px for mobile), sm:auto-rows-[150px] (min-height: 150px at 640px+), md:auto-rows-[180px] (min-height: 180px at 768px+).
div): relative p-2 (8px padding), border border-gray-100 (1px solid #F1F5F9), flex flex-col.bg-gray-50 (#F9FAFB), text-gray-400 (#94A3B8).bg-white (#FFFFFF), text-gray-800 (#1E293B).bg-blue-50/50 (#EFF6FF with 50% opacity), border-blue-200 (1px solid #BFDBFE).span): text-sm (14px), font-semibold (600). If today, text-blue-700 (#1D4ED8).mt-1 (4px margin top), space-y-1 (4px vertical gap), overflow-y-auto custom-scrollbar.div): text-xs (12px), text-white (#FFFFFF), px-2 py-1 (8px horizontal, 4px vertical padding), rounded-md (6px), truncate. Background color determined by event.color (e.g., bg-blue-500 - #3B82F6).overflow-x-auto on the month buttons container ensures horizontal scrolling on smaller screens.auto-rows-[120px] for small screens, scaling up to 150px on sm (640px) and 180px on md (768px) breakpoints. This ensures event visibility.max-w-md (max-width: 768px) ensures it doesn't stretch too wide on large screens, but flex-1 allows it to expand on smaller screens.This guide provides a comprehensive breakdown for your Figma designer to accurately recreate and maintain the calendar page's UI, including all the specific sizes and values.
You're right! My apologies if the previous response wasn't clear enough that it was specifically tailored for a Figma designer. The guide I provided is meant to be a comprehensive specification that a Figma designer can use to recreate the UI, including all the necessary visual properties, sizes, and spacing.
I cannot directly generate a Figma file or provide instructions on how to use Figma's interface (e.g., how to create components, use auto-layout, etc.). However, I can give you all the detailed design parameters that a designer would need to build this in Figma.
Here is the complete Figma Design Guide again, which you can copy and paste directly to your designer. It contains all the sizes, colors, typography, and component breakdowns.
This guide outlines the design specifications for the "Calendar" page, built with shadcn/ui principles and Tailwind CSS. It provides all the necessary details for a Figma designer to accurately replicate the user interface.
(Refer to tailwind.config.ts and app/globals.css for exact HSL/Oklch values. These are the hex equivalents for easy Figma input.)
Background:
#F8FAFC (Slate 50)#FFFFFF (White)#F9FAFB (Gray 50)Text Colors:
#0F172A (Gray 900)#64748B (Gray 500), #475569 (Gray 700)#94A3B8 (Gray 400)#64748B (Gray 700)#1D4ED8 (Blue 700)Accent Colors:
#3B82F6 (Blue 500), #2563EB (Blue 600), #1D4ED8 (Blue 700)#EFF6FF (Blue 50)Border Colors:
#E2E8F0 (Gray 200)#CBD5E1 (Gray 300)#3B82F6 (Blue 500)Event Colors: (These are examples, can be customized)
#3B82F6 (Blue 500)#8B5CF6 (Purple 500)#22C55E (Green 500)#EAB308 (Yellow 500)#EF4444 (Red 500)#6366F1 (Indigo 500)#14B8A6 (Teal 500)#F97316 (Orange 500)#EC4899 (Pink 500)(Using Inter font, default shadcn/ui setup. All sizes are in pixels.)
Page Title (h2 - Calendar Header):
24pxBold (font-weight: 700)Gray 900 (#0F172A)Date Picker Button Text:
16pxNormal (font-weight: 400)Gray 700 (#475569)Day of Week Headers:
14pxMedium (font-weight: 500)Gray 600 (#475569)Day Numbers:
14pxSemibold (font-weight: 600)Gray 800 (#1E293B) for current month, Gray 400 (#94A3B8) for other months, Blue 700 (#1D4ED8) for today.Event Titles:
12pxRegular (font-weight: 400)White (#FFFFFF)(All values are in pixels.)
p-0: 0pxp-1: 4pxp-2: 8pxp-4: 16pxp-6: 24pxpy-1: 4px vertical paddingpy-3: 12px vertical paddingpx-2: 8px horizontal paddingspace-y-1: 4px vertical gapgap-2: 8px gapmb-4: 16px margin bottommb-6: 24px margin bottommt-1: 4px margin topOverall Page:
100vh (min-h-screen)Gray 50 (#F8FAFC)Flex with flex-direction: column (flex flex-col)Header:
White (#FFFFFF)1px solid Gray 200 (#E2E8F0)16px (p-4)shadow-smMain Content Area:
1 (flex-1, takes remaining vertical space)24px (p-6)Calendar Grid Container:
White (#FFFFFF)8px (rounded-lg)shadow-lg1px solid Gray 200 (#E2E8F0)hiddenheader section)Container:
1 (flex-1)768px (max-w-md)Input Field:
40px (h-10)36px (pl-9, to accommodate icon)8px (rounded-lg)1px solid Gray 300 (#CBD5E1)2px solid Blue 500 (#3B82F6) border, Blue 500 ringshadow-smSearch Icon:
16px x 16px (h-4 w-4)Gray 400 (#94A3B8)absolute, left: 12px (left-3), top: 50%, transform: translateY(-50%) (-translate-y-1/2)Date Picker Button (Button):
280px (w-[280px])44px (h-11)Left (justify-start text-left)Normal (font-normal)8px (rounded-lg)1px solid Gray 300 (#CBD5E1)Gray 700 (#475569)Gray 100 (#F1F5F9)shadow-smCalendar Icon (inside button):
16px x 16px (h-4 w-4)8px (mr-2)Gray 500 (#64748B)Popover Content:
auto (w-auto)0px (p-0)White (#FFFFFF)8px (rounded-lg)shadow-lg1px solid Gray 200 (#E2E8F0)Month Navigation Buttons (Button - Chevron Left/Right):
36px x 36px (h-9 w-9)0px (p-0), centered contentFull (rounded-full)outline1px solid Gray 300 (#CBD5E1)Gray 600 (#475569)Gray 100 (#F1F5F9)Title (h2):
24px (text-2xl)Bold (font-bold)Gray 900 (#0F172A)Overall Grid Container:
White (#FFFFFF)8px (rounded-lg)shadow-lg1px solid Gray 200 (#E2E8F0)hiddenDay of Week Headers (e.g., "Sun", "Mon"):
7 columns (grid grid-cols-7)Center (text-center)14px (text-sm)Medium (font-medium)Gray 600 (#475569)1px solid Gray 200 (#E2E8F0)12px (py-3)Day Cells (Individual Date Boxes):
7 columns (grid grid-cols-7)Row Height: min-height: 120px (auto-rows-[120px])
@media (min-width: 640px): min-height: 150px (sm:auto-rows-[150px])@media (min-width: 768px): min-height: 180px (md:auto-rows-[180px])Individual Cell (div):
8px (p-2)1px solid Gray 100 (#F1F5F9)Flex with flex-direction: column (flex flex-col)Gray 50 (#F9FAFB), Text Gray 400 (#94A3B8)White (#FFFFFF), Text Gray 800 (#1E293B)Blue 50 (#EFF6FF) with 50% opacity, Border 1px solid Blue 200 (#BFDBFE)Day Number (span):
14px (text-sm)Semibold (font-semibold)Blue 700 (#1D4ED8)Events Container:
4px (mt-1)4px (space-y-1)overflow-y-auto (with custom scrollbar styling)Event Item (div):
12px (text-xs)White (#FFFFFF)8px (px-2)4px (py-1)6px (rounded-md)truncate (ellipsis for long text)bg-blue-500 - #3B82F6)Calendar Grid Rows: The row heights adjust based on screen size to ensure events are visible:
120pxsm breakpoint, 640px+): 150pxmd breakpoint, 768px+): 180pxflex-1 to expand on smaller screens but is capped at max-w-md (768px) on larger screens.This guide should provide your Figma designer with all the necessary information to accurately design and implement the calendar page.