{"id":"1bd3b2ba-9ad9-44ed-9130-03f9d94de821","name":"Sequel","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","colors":[{"name":"Midnight Void","hex":"#000000","role":"Page backgrounds, primary dark surfaces, text on light elements.","group":"neutral","cssVariable":"--color-midnight-void"},{"name":"Cloud Whisper","hex":"#ffffff","role":"Primary text, critical UI elements, borders for ghost buttons — creating stark contrast against dark backgrounds.","group":"neutral","cssVariable":"--color-cloud-whisper"},{"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","cssVariable":"--color-slate-dust"},{"name":"Steel Gray","hex":"#202020","role":"Secondary background for containers, slightly differentiated from the deepest black.","group":"neutral","cssVariable":"--color-steel-gray"},{"name":"Mist Gray","hex":"#c0c0c0","role":"Subtle text, less prominent borders, and icons.","group":"neutral","cssVariable":"--color-mist-gray"},{"name":"Charcoal Tone","hex":"#333333","role":"Badge backgrounds when slightly darker contrast is needed, secondary borders.","group":"neutral","cssVariable":"--color-charcoal-tone"},{"name":"Ash Accent","hex":"#999999","role":"Tertiary text, descriptive labels, less emphasized information.","group":"neutral","cssVariable":"--color-ash-accent"},{"name":"Light Ash","hex":"#cccccc","role":"Fine print, less important body copy. Similar to Ash Accent but slightly lighter.","group":"neutral","cssVariable":"--color-light-ash"},{"name":"Cadet Gray","hex":"#b3b3b3","role":"Placeholder text or disabled states, providing a further step down in visual hierarchy.","group":"neutral","cssVariable":"--color-cadet-gray"},{"name":"Badge Overlay","hex":"#333333","role":"Background for transparent badges, providing a muted dark tint.","group":"neutral","cssVariable":"--color-badge-overlay"}],"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"}],"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."]}}