{"id":"a639fa6c-1705-47c2-b452-d4479469a734","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/a639fa6c-1705-47c2-b452-d4479469a734","originalSiteUrl":"https://chester.how","capturedAt":"2026-04-11T16:39:40.393Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Chester's Garden","summary":"Digital garden journal: crisp pages, intimate handwriting, and colorful bookmarks.","description":"Chester's Garden feels like a carefully curated notebook or a personal journal, blending structured content with an organic, lived-in feel. The clean, almost stark white background (#fafafa) and light gray divisions (#e5e7eb) provide a quiet stage, allowing strong typographic choices and varied media to take center-stage. The interplay between the elegant, serifed Fraunces for headlines and the pragmatic, sans-serif Inter for body text defines its character, creating a sense of approachable authority where intellectual pursuits meet personal exploration. Subtle accent colors are used as contextual highlights, like digital Post-it notes within a physical garden.","tags":["personal blog","digital garden","minimalist","typographic focus","clean","journal-like","subtle accents","content-driven","muted colors"],"industry":"agency","colorScheme":"light","colors":[{"name":"Canvas White","hex":"#fafafa","role":"Major surface background, card backgrounds.","group":"neutral"},{"name":"Paper Gray","hex":"#e5e7eb","role":"Default borders, subtle separators, background for non-interactive elements.","group":"neutral"},{"name":"Charcoal Text","hex":"#171717","role":"Primary text color for headings and prominent links.","group":"neutral"},{"name":"Ink Black","hex":"#000000","role":"Strongest text contrast, used for body text and navigation links.","group":"neutral"},{"name":"Subtle Gray","hex":"#a3a3a3","role":"Secondary text, disabled states, supporting icons.","group":"neutral"},{"name":"Accent Orange","hex":"#7c2d12","role":"Used for 'READ' tags, indicating intellectual content — a warm, inviting educational cue.","group":"brand"},{"name":"Highlight Orange","hex":"#fdd3b1","role":"Soft background for 'READ' tags, providing gentle visual emphasis.","group":"brand"},{"name":"Accent Violet","hex":"#581c87","role":"Specific content type indicators like 'Writing' or 'Projects'.","group":"brand"},{"name":"Highlight Violet","hex":"#e6cefe","role":"Soft background wash for 'Writing' or 'Projects' tags.","group":"brand"},{"name":"Accent Blue","hex":"#0c4a6","role":"Specific content type indicators, e.g., 'Projects' or 'Hobbies'.","group":"brand"},{"name":"Highlight Blue","hex":"#afe5fc","role":"Soft background wash for 'Hobbies' tags.","group":"brand"},{"name":"Accent Green","hex":"#365314","role":"Specific content type indicators, e.g., 'Plants' or active states.","group":"brand"},{"name":"Highlight Green","hex":"#daf5ae","role":"Soft background wash for 'Plants' tags.","group":"brand"}],"typography":[{"role":"Workhorse sans-serif for body text, navigation, and detailed information. Its subtle negative letter-spacing keeps text feeling grounded and compact, fitting the 'notebook' analogy.","sizes":"14px, 16px","family":"Inter","weight":"400","lineHeight":"1.43, 1.50, 1.63","substitute":"system-ui, sans-serif","letterSpacing":"-0.4"},{"role":"Signature serif for all headings and key narrative elements. Its light weight (300) at larger display sizes (60px) sets a tone of quiet confidence, conveying authority through elegance rather than boldness. The generous negative letter-spacing maintains a polished, traditional feel.","sizes":"30px, 36px, 60px","family":"Fraunces","weight":"300","lineHeight":"1.00, 1.11, 1.20, 1.25","substitute":"Georgia, serif","letterSpacing":"-0.9"},{"role":"Used for code snippets or technical details, providing a clear distinction from the main narrative while maintaining legibility with tight letter-spacing.","sizes":"14px","family":"ui-monospace","weight":"400","lineHeight":"1.43","substitute":"monospace","letterSpacing":"-0.35"}],"typeScale":[{"role":"body-sm","size":14,"lineHeight":1.43,"letterSpacing":-0.4},{"role":"body","size":16,"lineHeight":1.5,"letterSpacing":-0.4},{"role":"heading","size":30,"lineHeight":1.25,"letterSpacing":-0.9},{"role":"heading-lg","size":36,"lineHeight":1.2,"letterSpacing":-0.9},{"role":"display","size":60,"lineHeight":1.11,"letterSpacing":-0.9}],"spacing":{"radius":{"tags":"4px","cards":"8px","images":"4px","buttons":"9999px"},"elementGap":"8px","sectionGap":"40px","cardPadding":"16px","pageMaxWidth":"1536px"},"radius":{"tags":"4px","cards":"8px","images":"4px","buttons":"9999px"},"guidelines":{"do":["Prioritize 'Fraunces' for all headings and short, impactful statements to leverage its elegant, light-weight character.","Use 'Inter' 16px weight 400 for all paragraph text, maintaining a consistent, highly readable, and unobtrusive voice.","Apply #fafafa as the primary background color for all main content areas to create a bright, airy canvas.","Utilize #e5e7eb for subtle borders and background for non-interactive list items or dividers, maintaining visual softness.","Employ 8px border-radius for all content cards and larger UI elements, balancing subtle softness with structure.","Apply 9999px border-radius to all interactive tags and buttons, creating a distinct pill shape that signals interactivity.","Use accent colors (e.g., #7c2d12, #581c87, #0c4a6, #365314) and their light background variants consistently for content categorization, acting as visual cues like colored labels.","Apply minimal inset shadow rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.1) 0px -2px 0px 1px inset to card backgrounds, giving them a subtle definition without heavy lifting."],"dont":["Avoid bolding or using heavier weights for 'Fraunces'; its impact comes from its lightness (weight 300).","Do not use highly saturated colors for large blocks of content; reserve them for small, intentional accents only.","Refrain from introducing strong drop shadows; the design relies on subtle inset shadows for depth or light elevation for images (rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px).","Avoid using multiple border-radii values for a single component type; maintain consistency (e.g., tags are always 9999px).","Do not use #000000 for body text unless higher contrast is explicitly required, #171717 or #a3a3a3 are preferred for a softer read.","Do not vary letter spacing from the defined values; 'Inter' at -0.4px and 'Fraunces' at -0.9px letter-spacing are critical to the typographic feel.","Avoid generic hover states like simple color changes for interactive elements; opt for underlines on links or distinct background changes for buttons/tags."]},"components":[{"name":"Content Tag Collection","role":""},{"name":"Book Card — Reading","role":""},{"name":"Coffee Brew Card — Hobbies","role":""},{"name":"Primary Navigation Link","role":"Top-level navigation items"},{"name":"Navigation Tab Active","role":"Currently active category indicator"},{"name":"Card Container","role":"Content grouping element"},{"name":"Inline Text Link","role":"Interactive text embedded within body copy"},{"name":"Content Tag (Primary)","role":"Categorization of content, e.g. 'Reading', 'Projects'"},{"name":"Content Tag (Secondary)","role":"More granular content tags, e.g. 'Plants'"},{"name":"Image Card","role":"Card containing an image"},{"name":"Footer Link","role":"Navigational links in the footer"}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- **Text Primary:** #000000\n- **Text Secondary:** #a3a3a3\n- **Background Soft:** #fafafa\n- **Border/Divider:** #e5e7eb\n- **Accent Tag (Read):** #7c2d12 (text) on #fdd3b1 (bg)\n\n### 3-5 Example Component Prompts\n1. **Create an introductory hero section:** Use a #fafafa background. Headline 'Chester's Garden' should be 'Fraunces' 60px, weight 300, #171717, letter-spacing -0.9px, line-height 1.11. Body paragraph 'Hey there, I’m Chester…' should be 'Inter' 16px, weight 400, #000000, letter-spacing -0.4px. Ensure generous sectionGap of 40px below the text block.\n2. **Generate a content card for a project:** Card background #fafafa, border 1px solid #e5e7eb, 8px border-radius. Include an image with 4px border-radius and the shadow `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`. Use 'Inter' 14px, weight 400, #a3a3a3 for a small subtitle like 'Projects'. Use 'Fraunces' 30px, weight 300, #171717, letter-spacing -0.9px for the main title of the project.\n3. **Design a content filter tag for 'Hobbies':** Pill shape (9999px border-radius). Background color #afe5fc, text color #0c4a6e. Text 'Inter' 14px, weight 400. Horizontal padding 6px, vertical padding 2px.\n4. **Create a horizontal navigation menu:** Items are 'Inter' 16px, weight 400. Default color #a3a3a3, with active item as #000000 in a 9999px rounded pill with #000000 background and #fafafa text, padding 4px vertical, 6px horizontal. The entire menu should float on a #fafafa background."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775925555081-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775925555081-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/a639fa6c-1705-47c2-b452-d4479469a734-1777581642561-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/a639fa6c-1705-47c2-b452-d4479469a734-1777581642561-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/a639fa6c-1705-47c2-b452-d4479469a734-1777581642561-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/a639fa6c-1705-47c2-b452-d4479469a734-1777581642561-preview-detail-poster.jpg"},"similarStyleIds":["43c1b150-0dab-42f9-9bce-fe0be3dde26c","9f228e72-997a-4410-9190-68359028e3d0","3e70af05-a07f-4c11-98ca-6ecb4765e967","d56508d7-c307-47f7-ad30-052e5a69f01f","2b67c471-ff5c-4443-9f8d-e704b6bb5236","88e9d606-7e8f-479c-9508-1b081e254ed9","47cb86b6-cb2d-41c8-94ba-8607cd7c41cd","a521abb9-d84b-4870-b5a8-363be7c3f94a","54f257e9-1d6b-4410-b94a-1dfe648ecc87","47c9e353-bed3-4d6c-8316-63a2db5cc377","e8eda526-d686-4e45-a60d-61b6503a8eda","80d7ef36-ed7e-48bb-b558-f772eb40106f","6d0db1c7-5500-40cd-b2f3-d3d9abbd3a2f","9501cfdc-3eb3-4b64-90f6-9afdded48945","ff4b9eff-dc0b-4886-bd65-c2f5e9069318","5bfe6c1d-1b15-4f8d-b0c9-677a33291c5d","9c92c3d1-a2fe-4a27-a324-826b19501774","e6a3facd-791c-4cc6-868d-2c6382d3cb0a","e0ad1a25-5609-45e6-a355-9bdeec86c5ae","14e563d8-a35a-4867-b4bf-15d1620ddae7"],"exports":{"designMdUrl":"/references/refero/a639fa6c-1705-47c2-b452-d4479469a734/design.md","tokensJsonUrl":"/references/refero/a639fa6c-1705-47c2-b452-d4479469a734/tokens.json","tailwindV4Url":"/references/refero/a639fa6c-1705-47c2-b452-d4479469a734/tailwind-v4.css","cssVariablesUrl":"/references/refero/a639fa6c-1705-47c2-b452-d4479469a734/tailwind-v4.css"}}