{"id":"973332dc-4e10-4e90-85d8-3bce9c3cd3ed","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/973332dc-4e10-4e90-85d8-3bce9c3cd3ed","originalSiteUrl":"https://socio-type.com","capturedAt":"2026-04-30T02:23:05.841Z","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":"Sociotype","summary":"Editorial White Canvas","description":"Sociotype presents as a serious, editorial platform for typography, characterized by an expansive white canvas, precise black typography, and highly controlled spacing. Interaction elements are almost entirely ghosted or underlined, relying on a subtle shift to black for active states. The visual weight is carried by the large, expressive font specimens and carefully structured content blocks, rather than decorative colors or heavy UI components.","industry":"design","colorScheme":"light","colors":[{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, card surfaces, primary text on dark hero sections","group":"neutral"},{"name":"Ink Black","hex":"#000000","role":"Primary text, borders, active states for ghost buttons and navigation, accent markings","group":"neutral"},{"name":"Medium Gray","hex":"#818181","role":"Muted text, secondary information, placeholder text, inactive link borders","group":"neutral"},{"name":"Light Gray","hex":"#d6d6d6","role":"Subtle dividers, borders between content sections","group":"neutral"},{"name":"Faded Gray","hex":"#9d9d9d","role":"Tertiary text, list item borders","group":"neutral"}],"typography":[{"role":"Main Onsite — detected in extracted data but not described by AI","sizes":"11px, 12px, 13px, 14px, 16px, 18px, 26px, 40px","family":"Main Onsite","weight":"400","lineHeight":"1, 1.13, 1.19, 1.22, 1.29, 1.31, 1.33, 1.38","letterSpacing":"0.015, 0.025, 0.04, 0.05, 0.08"},{"role":"Primary typeface for all body text, navigation, buttons, and smaller headings. Its regular weight ensures readability while maintaining a modern, understated presence.","sizes":"251px","family":"Onsite","weight":"400","weights":[400],"lineHeight":"1.25","substitute":"system-ui, sans-serif","letterSpacing":"0.0800em at 11px, 0.0500em at 12px, 0.0400em at 13px, 0.0250em at 14px, 0.0150em at 16px, 0.0150em at 18px"},{"role":"Display typeface for featured headlines and typographic showcases. Its unique character defines the brand's aesthetic in a large, impactful way.","sizes":"251px","family":"Avec Sharp","weight":"400","weights":[400],"lineHeight":"1.25","substitute":"serif","letterSpacing":"0.0010em"},{"role":"Alternative display typeface, used for specific typographic showcases. Shares the overall expressive, impactful role of Avec Sharp.","sizes":"251px","family":"Ceno","weight":"400","weights":[400],"lineHeight":"1.25","substitute":"serif","letterSpacing":"0.0010em"},{"role":"Alternative display typeface, used for specific typographic showcases. Expands the brand's visual range for showcasing different font styles.","sizes":"251px","family":"Meso","weight":"400","weights":[400],"lineHeight":"1.25","substitute":"serif","letterSpacing":"0.0010em"},{"role":"Alternative display typeface with ligatures, used for specific typographic showcases. Highlights the intricate details of font design.","sizes":"251px","family":"Gestura","weight":"400","weights":[400],"lineHeight":"1.25","substitute":"serif","letterSpacing":"0.0010em","fontFeatureSettings":"'liga' on"},{"role":"Alternative display typeface, used for specific typographic showcases. Contributes to the diverse presentation of font families.","sizes":"251px","family":"Rework","weight":"400","weights":[400],"lineHeight":"1.25","substitute":"serif","letterSpacing":"0.0010em"}],"typeScale":[{"role":"caption","size":11,"lineHeight":1.38,"letterSpacing":0.88},{"role":"body","size":14,"lineHeight":1.29,"letterSpacing":0.35},{"role":"heading","size":26,"lineHeight":1.13,"letterSpacing":0.26},{"role":"display-sm","size":40,"lineHeight":1,"letterSpacing":0.6},{"role":"display","size":251,"lineHeight":1.25,"letterSpacing":2.51}],"spacing":{"radius":{"none":"0px"},"elementGap":"12px","sectionGap":"120px","cardPadding":"0px"},"radius":{"none":"0px"},"guidelines":{"do":["Prioritize Ink Black (#000000) for all primary text and interactive element outlines on default light backgrounds.","Use Canvas White (#ffffff) as the dominant page, card, and footer background, establishing a clean, expansive aesthetic.","Maintain a strict 0px border-radius for all components, including buttons, cards, and input fields, for a sharp, precise feel.","Implement interactive elements primarily as ghost buttons or underlined text, with minimal visual styling beyond color and text decoration transitions.","Structure content with ample vertical spacing, leveraging the implied section gap of 120px to create distinct content blocks.","Employ the Onsite font for all functional text under 'display' sizes, ensuring consistency in body, navigation, and button labels.","Utilize Avec Sharp, Ceno, Meso, Gestura, or Rework fonts exclusively for large, impactful display typography to showcase different font characteristics."],"dont":["Avoid using saturated background colors or heavy fills for interactive elements; stick to the achromatic palette.","Do not introduce shadows or significant elevation on cards or buttons; elements should appear flat against the canvas.","Refrain from applying rounded corners to any UI elements; all corners should be sharp 0px radius.","Do not use highly contrasting accent colors for calls to action; rely on text weight, size, and subtle border changes for emphasis.","Avoid dense, clustered layouts; allow generous empty space around content sections and individual elements.","Do not deviate from the specified typefaces Onsite, Avec Sharp, Ceno, Meso, Gestura, or Rework; no other typefaces are part of this system.","Do not use generic system fonts or default browser styles for links; ensure all interactive text uses the defined ghost button or underlined styles."]},"components":[{"name":"Ghost Button - Inactive","role":"Navigational and call-to-action link styling"},{"name":"Ghost Button - Muted","role":"Secondary actions or menu items"},{"name":"Featured Card","role":"Displaying prominent typefaces without visual distraction"},{"name":"Text Input","role":"User input for forms (e.g., newsletter signup)"}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\ntext: #000000\nbackground: #ffffff\nborder: #000000\naccent: no distinct accent color\nprimary action: no distinct CTA color\n\nExample Component Prompts:\n1. Create a top navigation bar: Canvas White background, Ink Black ghost text links in Onsite font at 14px (letter-spacing 0.35px). Each link should have a 1px Ink Black bottom border on hover. Spacing between links is 50px right margin. Global top-left brand text 'SOCIOTYPE' in Ink Black. Top-right utilitarian links 'Shop', 'Trials', 'About', 'Cart (0)'.\n2. Design a featured typeface section: Canvas White background. Headline 'Featured: [Typeface Name]' in Onsite 40px (letter-spacing 0.6px), Ink Black. Followed by descriptive body text in Onsite 14px (letter-spacing 0.35px), Ink Black. A 'More Info →' ghost button (Ink Black text and 1px bottom border, Onsite 14px, letter-spacing 0.35px).\n3. Create a prominent typeface showcase block: Avec Sharp 251px (letter-spacing 2.51px) in Ink Black on a Canvas White background. Ensure no padding or border-radius, maintaining a sharp edge."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777515764859-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777515764859-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/973332dc-4e10-4e90-85d8-3bce9c3cd3ed-1777582862332-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/973332dc-4e10-4e90-85d8-3bce9c3cd3ed-1777582862332-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/973332dc-4e10-4e90-85d8-3bce9c3cd3ed-1777582862332-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/973332dc-4e10-4e90-85d8-3bce9c3cd3ed-1777582862332-preview-detail-poster.jpg"},"similarStyleIds":["d5931dff-2ae3-44c7-b76f-9e5936f90611","139c4bee-396d-494c-baf0-fe211bf4928d","ff8f39ee-a10e-4a9d-a94d-6993c6084060","703d69b7-2863-44fa-a443-2ac090db3873","657e55de-8cff-4d24-9a4e-17d3b7593a55","3cc1d30c-3b08-48af-bbf0-df195d77835f","be5cf0d7-fc29-4b7f-bf86-f87185b122fc","5c9743ad-fe33-4d21-9185-db012f6f96c7","6d64a4da-ef40-453e-86f7-4bfabc0c9051","d56508d7-c307-47f7-ad30-052e5a69f01f","5f72a3c2-7040-4d8c-9882-4d9384822469","e80c5b4a-fd03-460e-a577-49928a4ab5db","ab1b113a-ed21-4512-acc2-d10c8927c410","25009c35-8b3b-4898-9295-3e0e0aa07207","a90dbcb6-e42c-4992-a83b-94879699dd4f","6bc0dff4-b803-4e0c-a8f5-bef016843ae8","3e70af05-a07f-4c11-98ca-6ecb4765e967","6c0b77d3-71f9-469d-98aa-4ce1d6d76ac8","66fdf7a4-7d28-452e-88ec-c84e49b3ae6f","3eae6f8d-fa39-433f-b872-745c6dd0cb79"],"exports":{"designMdUrl":"/references/refero/973332dc-4e10-4e90-85d8-3bce9c3cd3ed/design.md","tokensJsonUrl":"/references/refero/973332dc-4e10-4e90-85d8-3bce9c3cd3ed/tokens.json","tailwindV4Url":"/references/refero/973332dc-4e10-4e90-85d8-3bce9c3cd3ed/tailwind-v4.css","cssVariablesUrl":"/references/refero/973332dc-4e10-4e90-85d8-3bce9c3cd3ed/tailwind-v4.css"}}