{"id":"1bd3b2ba-9ad9-44ed-9130-03f9d94de821","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/1bd3b2ba-9ad9-44ed-9130-03f9d94de821","originalSiteUrl":"https://sequel.co","capturedAt":"2026-04-12T16:15:08.564Z","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":"Sequel","summary":"Black canvas, sharp typography","description":"This design system evokes a sense of understated luxury and serious intent, reflecting a 'dark mode meets gallery space' aesthetic. A dramatic pure black background (#000000) provides a stark canvas for crisp white typography (#ffffff) and subtle, almost invisible components. The system primarily relies on meticulous typography with a custom serif for headlines and a custom sans-serif for body text, creating a strong sense of intellectual weight without visual overwhelm. Rounded lozenges (9999px radius) offer the only soft edges, contrasting sharply with the otherwise linear, rigid structure, suggesting pockets of approachable interaction within a rigorous framework.","industry":"fintech","colorScheme":"dark","colors":[{"name":"Midnight Void","hex":"#000000","role":"Page backgrounds, primary dark surfaces, text on light elements.","group":"neutral"},{"name":"Cloud Whisper","hex":"#ffffff","role":"Primary text, critical UI elements, borders for ghost buttons — creating stark contrast against dark backgrounds.","group":"neutral"},{"name":"Slate Dust","hex":"#f5f5f0","role":"Primary background for solid buttons, providing a subtle off-white alternative to pure white for interactive elements.","group":"neutral"},{"name":"Steel Gray","hex":"#202020","role":"Secondary background for containers, slightly differentiated from the deepest black.","group":"neutral"},{"name":"Mist Gray","hex":"#c0c0c0","role":"Subtle text, less prominent borders, and icons.","group":"neutral"},{"name":"Charcoal Tone","hex":"#333333","role":"Badge backgrounds when slightly darker contrast is needed, secondary borders.","group":"neutral"},{"name":"Ash Accent","hex":"#999999","role":"Tertiary text, descriptive labels, less emphasized information.","group":"neutral"},{"name":"Light Ash","hex":"#cccccc","role":"Fine print, less important body copy. Similar to Ash Accent but slightly lighter.","group":"neutral"},{"name":"Cadet Gray","hex":"#b3b3b3","role":"Placeholder text or disabled states, providing a further step down in visual hierarchy.","group":"neutral"},{"name":"Badge Overlay","hex":"#333333","role":"Background for transparent badges, providing a muted dark tint.","group":"neutral"}],"typography":[{"role":"Primary sans-serif for body text, navigation, and most UI elements. Its precise tracking and varied weights at numerous sizes provide significant typographic flexibility, maintaining clarity even at small scales.","sizes":"10px, 11px, 12px, 13px, 14px, 15px, 16px, 18px, 20px, 22px, 30px, 32px, 54px, 58px, 115px, 128px","family":"VisueltPro","weight":"300, 400, 500","lineHeight":"1.00, 1.20, 1.40, 1.50","substitute":"system-ui, sans-serif","letterSpacing":"-0.0500em, -0.0300em, -0.0250em, -0.0200em, 0.0300em, 0.0500em, 0.0700em, 0.0800em"},{"role":"Exclusive for large headlines, this custom serif font and its distinct light weight (500) sets a tone of intellectual authority. The negative letter-spacing at display sizes creates a commanding, tightly-knit appearance, making headlines feel sculpted.","sizes":"32px, 58px, 128px","family":"Bradford","weight":"500","lineHeight":"1.00, 1.20","substitute":"serif","letterSpacing":"-0.0500em, -0.0250em"}],"typeScale":[{"role":"caption","size":10,"lineHeight":1.5,"letterSpacing":0.3},{"role":"heading","size":18,"lineHeight":1.2},{"role":"heading-lg","size":20,"lineHeight":1.2},{"role":"display-sm","size":22,"lineHeight":1.2},{"role":"display","size":30,"lineHeight":1},{"role":"display-lg","size":32,"lineHeight":1,"letterSpacing":-0.8}],"spacing":{"radius":{"cards":"10px","badges":"9999px","buttons":"9999px"},"elementGap":"3-28px","sectionGap":"47-76px","cardPadding":"0px"},"radius":{"cards":"10px","badges":"9999px","buttons":"9999px"},"guidelines":{"do":["Prioritize #000000 for backgrounds and #ffffff for primary text to maintain high contrast and dramatic impact.","Use Bradford font exclusively for large headings (32px and above) with its distinct weight 500 and negative letter spacing (-0.0500em or -0.0250em).","Apply 9999px border-radius to all interactive elements like buttons and badges for distinctive pill shapes.","Utilize rgba(200, 200, 200, 0.1) for subtle, transparent badge backgrounds, ensuring text remains #ffffff.","Maintain a clear visual hierarchy using VisueltPro's varied weights and sizes for body copy, navigation, and secondary UI elements, without relying on color for differentiation.","Employ the negative letter-spacing values from the typography specification for precise text rendering at various sizes.","Use 10px border-radius only for specific featured cards to provide a subtle visual differentiator against the predominant 0px radius."],"dont":["Avoid using highly saturated or chromatic colors; stick to the achromatic palette with #ffffff, #000000, and the various grays.","Do not introduce sharp corners on buttons or badges; the 9999px radius is a signature visual element.","Refrain from using Bradford font for body text or small UI elements; its use is reserved for large, impactful headlines.","Do not add additional box-shadows beyond rgba(0, 0, 0, 0.35) 0px 10px 30px 0px for elevated elements and rgba(0, 0, 0, 0.15) 0px 4px 20px 0px for interactive button states.","Avoid using multiple border styles or weights; maintain simple, thin borders for ghost elements or an absence of borders.","Do not use generic system fonts in place of VisueltPro or Bradford; their unique characteristics are integral to the brand.","Avoid excessive spacing that diminishes the dense, deliberate feel; element gaps should adhere to the provided '3-28px' range."]},"components":[{"name":"CTA Button Group","role":""},{"name":"Lozenge Badge Collection","role":""},{"name":"Featured Category Cards","role":""},{"name":"Primary Lozenge Button","role":"Call to Action"},{"name":"Ghost Lozenge Button","role":"Secondary Action"},{"name":"Circular Play Button","role":"Media Playback"},{"name":"Standard Card","role":"Content container"},{"name":"Featured Card","role":"Prominent content container"},{"name":"Lozenge Badge","role":"Category/Tag"},{"name":"Subtle Pill Badge","role":"Secondary Category/Tag"}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\n- Text: #ffffff\n- Background: #000000\n- CTA Button Background: #f5f5f0\n- CTA Button Text: #000000\n- Ghost Button Border: #ffffff\n- Badge Background: rgba(200, 200, 200, 0.1)\n\nExample Component Prompts:\n1. Create a Primary Lozenge Button: background-color #f5f5f0, color #000000, border-radius 9999px, padding 0px 24px, font VisueltPro weight 400. Text: 'Build the future'.\n2. Create a Ghost Lozenge Button: background-color transparent, color #ffffff, border 1px solid #ffffff, border-radius 9999px, padding 0px 20px, font VisueltPro weight 400. Text: 'Watch the film'.\n3. Create a Featured Card: background-color transparent, border-radius 10px, box-shadow none, padding 0px 0px. Within it, use a full-bleed image and a Lozenge Badge: background-color rgba(200, 200, 200, 0.1), color #ffffff, border-radius 9999px, padding 8px 16px, font VisueltPro weight 400. Badge text: 'Founders'.\n4. Create a large headline using Bradford font: color #ffffff, font-family Bradford, font-weight 500, font-size 128px, line-height 1.0, letter-spacing -0.0500em. Text: 'Your Legacy, Made'."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776010481020-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776010481020-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1bd3b2ba-9ad9-44ed-9130-03f9d94de821-1777584327946-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1bd3b2ba-9ad9-44ed-9130-03f9d94de821-1777584327946-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1bd3b2ba-9ad9-44ed-9130-03f9d94de821-1777584327946-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1bd3b2ba-9ad9-44ed-9130-03f9d94de821-1777584327946-preview-detail-poster.jpg"},"similarStyleIds":["4d4772a3-e1da-415f-a6d7-658dcefdcecd","7b083729-e694-4b66-82a3-befb08451722","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","62b22816-2d98-4e98-9c17-bf600ddb2fc8","3389358b-68b2-4fca-82a8-52c07b3a3475","ef7c4bc2-f75d-4198-8be3-52af5be494ac","733e6475-892a-4138-8835-bf40344df317","36752f78-1c43-471b-b125-e82152ad23dd","7f6799d9-0733-4523-9a94-036b9ad3bf28","e0ad1a25-5609-45e6-a355-9bdeec86c5ae","5b405eec-67ba-4dd0-8dab-ace000151a78","0fd67ec5-7e9c-4ca9-b368-5d9c7388477a","408a149c-702f-4442-99df-bea49d9c0d9b","b8a8976c-52d9-4ebb-95ea-4c40f4a9acab","7c38e84b-aea0-4c8f-b3e9-60b994ee6c6b","6eb5fc89-d0db-4293-8bff-13c5aa530a28","1f0cc2ef-9de0-4cbb-909f-ca120ef6d0ae","a7530405-e523-4268-bba5-ef13549fd61c","b8ba443e-5d83-4f37-b8c6-a1acd7623d0c","c3ceca5c-d329-4559-b947-016172941ba2"],"exports":{"designMdUrl":"/references/refero/1bd3b2ba-9ad9-44ed-9130-03f9d94de821/design.md","tokensJsonUrl":"/references/refero/1bd3b2ba-9ad9-44ed-9130-03f9d94de821/tokens.json","tailwindV4Url":"/references/refero/1bd3b2ba-9ad9-44ed-9130-03f9d94de821/tailwind-v4.css","cssVariablesUrl":"/references/refero/1bd3b2ba-9ad9-44ed-9130-03f9d94de821/tailwind-v4.css"}}