{"id":"f89bad29-019a-48d7-9724-c40a0d7d8171","name":"Legora","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/f89bad29-019a-48d7-9724-c40a0d7d8171","originalSiteUrl":"https://legora.com","capturedAt":"2026-04-30T00:28:00.411Z","colors":[{"name":"Inkwell Black","hex":"#000000","role":"Primary text, borders, dark background for hero section and certain UI elements","group":"neutral","cssVariable":"--color-inkwell-black"},{"name":"Canvas White","hex":"#fefefc","role":"Page background, primary light surface for cards and content sections","group":"neutral","cssVariable":"--color-canvas-white"},{"name":"Text Gray","hex":"#0a0a0a","role":"Content text, secondary dark borders, slightly softer than Inkwell Black for body copy","group":"neutral","cssVariable":"--color-text-gray"},{"name":"Pale Ash","hex":"#ebf5ed","role":"Subtle background for UI elements, input fields, and alternating section backgrounds","group":"neutral","cssVariable":"--color-pale-ash"},{"name":"Shadowstone Gray","hex":"#6b6b6b","role":"Muted helper text, secondary body copy","group":"neutral","cssVariable":"--color-shadowstone-gray"},{"name":"Whisper Gray","hex":"#444444","role":"Tertiary text, even subtler than Shadowstone Gray, for very de-emphasized elements","group":"neutral","cssVariable":"--color-whisper-gray"},{"name":"Parchment Tan","hex":"#e1d5b6","role":"Subtle background accent for specific sections, adding a warm, academic feel","group":"accent","cssVariable":"--color-parchment-tan"},{"name":"Sky Tint","hex":"#bdd4f0","role":"Background for certain interactive link states or prominent data blocks","group":"accent","cssVariable":"--color-sky-tint"},{"name":"Steel Blue","hex":"#98a7aa","role":"Background for specific link states, a cool accent","group":"accent","cssVariable":"--color-steel-blue"}],"typography":[{"role":"System fallback for small UI elements and utility text.","sizes":"12px","family":"sans-serif","weight":"400","weights":[400],"lineHeight":"1.20","substitute":"Arial, Helvetica"},{"role":"Primary body text, labels, and paragraph content. The 'Book' weight at 450 provides a substantial yet refined feel. Its specific font features ('blwf', 'cv03', 'cv04', 'cv09', 'cv11') are critical for the brand's typographic identity.","sizes":"11px, 13px, 14px, 16px","family":"Suisse Intl Book","weight":"450","weights":[450],"lineHeight":"0.80, 1.25, 1.30","substitute":"Inter","letterSpacing":"-0.01em at 16px, 0.01em at 11px","fontFeatureSettings":"\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\""},{"role":"Subheadings and supporting headlines in product descriptions. The regular weight keeps it grounded.","sizes":"15px, 20px","family":"Aktiv Grotesk VF Variable Regular","weight":"400","weights":[400],"lineHeight":"1.30","substitute":"Inter","fontFeatureSettings":"\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\""},{"role":"Emphasis headlines. The highly distinctive 'Light' weight (300) for large display sizes creates an unusually refined and open feel, conveying authority through restraint rather than boldness.","sizes":"24px, 32px, 88px","family":"Rhymes Display Light","weight":"300","weights":[300],"lineHeight":"0.95, 1.10","substitute":"Lora","letterSpacing":"-0.02em at 88px, -0.01em at 24px","fontFeatureSettings":"\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\""},{"role":"Prominent display headlines, particularly the main hero title. Its serif elegance adds a touch of classic sophistication.","sizes":"80px","family":"Playfair Display","weight":"400","weights":[400],"lineHeight":"1.00","substitute":"Playfair Display","letterSpacing":"-0.02em"},{"role":"Secondary utility text and metadata, providing a clear sans-serif contrast.","sizes":"12px","family":"Inter","weight":"400","weights":[400],"lineHeight":"1.20","substitute":"Inter"},{"role":"Input labels and placeholder text, providing clear readability.","sizes":"13px","family":"Suisse Intl Medium","weight":"500","weights":[500],"lineHeight":"1.00","substitute":"Inter"}],"spacing":{"radius":{"cards":"8px","images":"8px","inputs":"8px","buttons":"2px","cookieConsent":"4px"},"elementGap":"10px","sectionGap":"80px","cardPadding":"16px"},"radius":{"cards":"8px","images":"8px","inputs":"8px","buttons":"2px","cookieConsent":"4px"},"shadows":{"surfaces":[{"hex":"#fefefc","name":"Canvas White","level":0,"purpose":"Primary page background and default light surface."},{"hex":"#ebf5ed","name":"Pale Ash","level":1,"purpose":"Subtle elevated surface for input fields and alternating content blocks."},{"hex":"#e1d5b6","name":"Parchment Tan","level":2,"purpose":"Accent background for specific content sections, providing a warm, slightly higher-level background."}]},"guidelines":{"do":["Prioritize high visual contrast between text (#000000, #0a0a0a) and background (#fefefc, #ebf5ed), maintaining AAA accessibility standards.","Use Rhymes Display Light (weight 300) for large headlines (32px and up) with a tight line height and negative letter-spacing for a refined, spacious feel.","Apply Suisse Intl Book (weight 450) consistently for all body text, maintaining its specific font feature settings for brand consistency.","Utilize Pale Ash (#ebf5ed) as a subtle alternating background color for content sections, providing visual rhythm without strong division.","Employ a radius of 8px for cards, images, and input fields to convey a soft, modern touch.","Ensure interactive elements like buttons and links maintain a clear visual distinction, even if the primary action color is derived from a browser default.","Use Inkwell Black (#000000) for hero section text and prominent borders to create a strong initial impression against dark backgrounds."],"dont":["Avoid using highly saturated colors for large UI elements; accents should be subtle and functional.","Do not introduce strong drop shadows; rely on background color changes or minimal borders for surface differentiation.","Do not deviate from the specified font families and weights, especially for Rhymes Display Light, as its unique weight defines the brand's headline style.","Avoid over-clustering content; embrace white space and the specified elementGap (10px) to maintain a compact yet uncrowded appearance.","Do not use generic system borders for inputs; always apply Pale Ash (#ebf5ed) background and 8px border-radius.","Do not use multiple button styles for primary actions; stick to the translucent white filled button on dark backgrounds and the outlined white button on light backgrounds.","Avoid full-bleed imagery that competes with text; imagery should be contained or used as a subtle background element as seen in the hero."]}}