{"id":"f89bad29-019a-48d7-9724-c40a0d7d8171","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","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":"Legora","summary":"Warm monochrome legal canvas","description":"Legora employs a classic minimalist aesthetic with high contrast typography and subdued, often desaturated, color accents. The design emphasizes clear information hierarchy through sparse layouts and strong textual elements. Subtle background shifts and minimal interactive elements create an atmosphere of quiet professionalism, allowing content to take center stage.","industry":"ai","colorScheme":"light","colors":[{"name":"Inkwell Black","hex":"#000000","role":"Primary text, borders, dark background for hero section and certain UI elements","group":"neutral"},{"name":"Canvas White","hex":"#fefefc","role":"Page background, primary light surface for cards and content sections","group":"neutral"},{"name":"Text Gray","hex":"#0a0a0a","role":"Content text, secondary dark borders, slightly softer than Inkwell Black for body copy","group":"neutral"},{"name":"Pale Ash","hex":"#ebf5ed","role":"Subtle background for UI elements, input fields, and alternating section backgrounds","group":"neutral"},{"name":"Shadowstone Gray","hex":"#6b6b6b","role":"Muted helper text, secondary body copy","group":"neutral"},{"name":"Whisper Gray","hex":"#444444","role":"Tertiary text, even subtler than Shadowstone Gray, for very de-emphasized elements","group":"neutral"},{"name":"Parchment Tan","hex":"#e1d5b6","role":"Subtle background accent for specific sections, adding a warm, academic feel","group":"accent"},{"name":"Sky Tint","hex":"#bdd4f0","role":"Background for certain interactive link states or prominent data blocks","group":"accent"},{"name":"Steel Blue","hex":"#98a7aa","role":"Background for specific link states, a cool accent","group":"accent"}],"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"}],"typeScale":[{"role":"caption","size":11,"lineHeight":0.8},{"role":"body","size":14,"lineHeight":1.25},{"role":"heading-sm","size":20,"lineHeight":1.3},{"role":"heading","size":24,"lineHeight":1.1,"letterSpacing":-0.24},{"role":"heading-lg","size":32,"lineHeight":0.95,"letterSpacing":-0.32},{"role":"display","size":88,"lineHeight":0.95,"letterSpacing":-1.76}],"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."]},"components":[{"name":"Ghost Navigation Link","role":"Primary navigation item"},{"name":"Filled Action Button","role":"Call to action button"},{"name":"Outlined Cookie Consent Button","role":"Secondary action in cookie consent"},{"name":"Text Input Field","role":"User input control"},{"name":"Cookie Consent Banner","role":"Legal disclosure pop-up"}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\ntext: #000000\nbackground: #fefefc\nborder: #000000\naccent: #e1d5b6\nprimary action: no distinct CTA color\n\nExample Component Prompts:\nNo distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color.\n2. Create an Input Field: background Pale Ash (#ebf5ed), text Text Gray (#0a0a0a), border-radius 8px, padding 10px. Placeholder text in Suisse Intl Medium 13px weight 500, #6b6b6b.\n3. Create a Feature Block: background Canvas White (#fefefc), heading 'Review faster' using Aktiv Grotesk VF Variable Regular 20px weight 400, #0a0a0a. Body text using Suisse Intl Book 14px weight 450, #0a0a0a. Card padding 16px, element gap 10px."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777508844863-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777508844863-thumb.jpg"},"similarStyleIds":["7b083729-e694-4b66-82a3-befb08451722","325ab18a-72a5-4ff3-8823-eed4d8bceef0","733f32ca-efc3-40fb-bc58-327bd2b45828","68d18deb-bb09-4258-8024-001af9c844c0","4d832c12-dd14-45b0-bba7-2d3bc25d8264","aeefc294-a8f7-443d-b76a-538dddc29afe","62b22816-2d98-4e98-9c17-bf600ddb2fc8","6c0b77d3-71f9-469d-98aa-4ce1d6d76ac8","a6950b49-8ce4-4330-9499-26ca08061599","1f204e95-454a-437e-845b-c1b169d35607","36752f78-1c43-471b-b125-e82152ad23dd","12255b63-e506-4bc1-a4cd-d05487de32f3","63bd1ed9-b161-45fd-8734-85282bd945ec","ddd9ffaa-d831-4cb4-a5bf-a1efce421dca","1b44386e-31a8-40b0-a577-27c088b51264","75fdb89f-ca64-41b3-af36-7a78bd09448e","64aadcc7-f884-41ea-9b0b-a90dfc10c9ec","9fecf7d6-b717-49ca-8edc-b10d6110b21c","80d7ef36-ed7e-48bb-b558-f772eb40106f","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7"],"exports":{"designMdUrl":"/references/refero/f89bad29-019a-48d7-9724-c40a0d7d8171/design.md","tokensJsonUrl":"/references/refero/f89bad29-019a-48d7-9724-c40a0d7d8171/tokens.json","tailwindV4Url":"/references/refero/f89bad29-019a-48d7-9724-c40a0d7d8171/tailwind-v4.css","cssVariablesUrl":"/references/refero/f89bad29-019a-48d7-9724-c40a0d7d8171/tailwind-v4.css"}}