{"id":"a639fa6c-1705-47c2-b452-d4479469a734","name":"Chester's Garden","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","colors":[{"name":"Canvas White","hex":"#fafafa","role":"Major surface background, card backgrounds.","group":"neutral","cssVariable":"--color-canvas-white"},{"name":"Paper Gray","hex":"#e5e7eb","role":"Default borders, subtle separators, background for non-interactive elements.","group":"neutral","cssVariable":"--color-paper-gray"},{"name":"Charcoal Text","hex":"#171717","role":"Primary text color for headings and prominent links.","group":"neutral","cssVariable":"--color-charcoal-text"},{"name":"Ink Black","hex":"#000000","role":"Strongest text contrast, used for body text and navigation links.","group":"neutral","cssVariable":"--color-ink-black"},{"name":"Subtle Gray","hex":"#a3a3a3","role":"Secondary text, disabled states, supporting icons.","group":"neutral","cssVariable":"--color-subtle-gray"},{"name":"Accent Orange","hex":"#7c2d12","role":"Used for 'READ' tags, indicating intellectual content — a warm, inviting educational cue.","group":"brand","cssVariable":"--color-accent-orange"},{"name":"Highlight Orange","hex":"#fdd3b1","role":"Soft background for 'READ' tags, providing gentle visual emphasis.","group":"brand","cssVariable":"--color-highlight-orange"},{"name":"Accent Violet","hex":"#581c87","role":"Specific content type indicators like 'Writing' or 'Projects'.","group":"brand","cssVariable":"--color-accent-violet"},{"name":"Highlight Violet","hex":"#e6cefe","role":"Soft background wash for 'Writing' or 'Projects' tags.","group":"brand","cssVariable":"--color-highlight-violet"},{"name":"Accent Blue","hex":"#0c4a6","role":"Specific content type indicators, e.g., 'Projects' or 'Hobbies'.","group":"brand","cssVariable":"--color-accent-blue"},{"name":"Highlight Blue","hex":"#afe5fc","role":"Soft background wash for 'Hobbies' tags.","group":"brand","cssVariable":"--color-highlight-blue"},{"name":"Accent Green","hex":"#365314","role":"Specific content type indicators, e.g., 'Plants' or active states.","group":"brand","cssVariable":"--color-accent-green"},{"name":"Highlight Green","hex":"#daf5ae","role":"Soft background wash for 'Plants' tags.","group":"brand","cssVariable":"--color-highlight-green"}],"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"}],"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."]}}