{"id":"7b083729-e694-4b66-82a3-befb08451722","name":"Aboard","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/7b083729-e694-4b66-82a3-befb08451722","originalSiteUrl":"https://aboard.com","capturedAt":"2026-04-30T00:53:57.955Z","colors":[{"name":"Ember Glow","hex":"#de4c00","role":"Primary action backgrounds, link accents, functional icons — a vivid, warm orange that cuts through the dark palette","group":"brand","cssVariable":"--color-ember-glow"},{"name":"Peach Fuzz","hex":"#efa680","role":"Orange outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color","group":"brand","cssVariable":"--color-peach-fuzz"},{"name":"Deep Forest","hex":"#040c06","role":"Primary page background, extensive dark surfaces, and text on light surfaces","group":"neutral","cssVariable":"--color-deep-forest"},{"name":"Warm Black","hex":"#271503","role":"Main text color on light parchment backgrounds, subheadings, and muted body text on dark backgrounds","group":"neutral","cssVariable":"--color-warm-black"},{"name":"Parchment","hex":"#eadfcf","role":"Accent backgrounds for cards and highlighted content sections. Also used for some body and heading text on dark backgrounds","group":"neutral","cssVariable":"--color-parchment"},{"name":"Stone Slate","hex":"#a49784","role":"Subtle background for navigation and secondary UI elements","group":"neutral","cssVariable":"--color-stone-slate"},{"name":"Light Steel","hex":"#e5e7eb","role":"Border colors for inputs, cards, and image outlines. Used widely for structural delineation","group":"neutral","cssVariable":"--color-light-steel"},{"name":"White Canvas","hex":"#fffefb","role":"Prominent surface accents and primary text color on dark backgrounds, offering high contrast","group":"neutral","cssVariable":"--color-white-canvas"},{"name":"Pale Gray","hex":"#c1bdba","role":"Subtle border color, distinct from Light Steel, for layered elements","group":"neutral","cssVariable":"--color-pale-gray"},{"name":"True Black","hex":"#000000","role":"Used for text over light backgrounds and occasional structural outlines","group":"neutral","cssVariable":"--color-true-black"}],"typography":[{"role":"Display and major headings — its elegant structure and light 300 weight command attention without shouting, providing sophistication.","sizes":"24px, 32px, 72px","family":"Tobias","weight":"300","lineHeight":"1.10, 1.30","substitute":"Playfair Display","letterSpacing":"-0.48, 0.48"},{"role":"Specialized text, code snippets, and certain list items — its monospaced nature anchors technical references and offers a distinct textural contrast.","sizes":"10px, 12px, 14px, 16px","family":"Atkinson Hyperlegible Mono","weight":"300","lineHeight":"1.57, 1.60, 1.63, 1.83","substitute":"IBM Plex Mono","letterSpacing":"-0.2, 0.5","fontFeatureSettings":""},{"role":"Navigation, body text, and button labels — a clean, legible workhorse that maintains consistency across interactive elements.","sizes":"12px, 16px","family":"Work Sans","weight":"400","lineHeight":"1.63, 1.83","substitute":"Inter","letterSpacing":"-0.2, -0.17","fontFeatureSettings":""},{"role":"Default system font for general UI elements, ensuring broad compatibility and accessibility for supplementary text.","sizes":"16px","family":"ui-sans-serif","weight":"400","lineHeight":"1.50","substitute":"system-ui","letterSpacing":"0","fontFeatureSettings":""}],"spacing":{"radius":{"cards":"8px","links":"8px","buttons":"9999px","navigation":"30px"},"elementGap":"8px","sectionGap":"64px","cardPadding":"24px"},"radius":{"cards":"8px","links":"8px","buttons":"9999px","navigation":"30px"},"shadows":{"surfaces":[{"hex":"#040c06","name":"Deep Forest Canvas","level":0,"purpose":"Primary page and main section backgrounds."},{"hex":"#a49784","name":"Stone Slate Base","level":1,"purpose":"Subtle background for persistent elements like navigation bars."},{"hex":"#eadfcf","name":"Parchment Highlight","level":2,"purpose":"Accent backgrounds for cards, embedded forms, or informational panels, providing visual pop against the primary dark background."}]},"guidelines":{"do":["Use Deep Forest (#040c06) as the default background for large page sections to maintain the system's dark theme.","Apply Ember Glow (#de4c00) exclusively for primary interactive elements, ensuring its impact as a functional accent.","Employ the Tobias font for all primary headlines, leveraging its elegant 300 weight at larger sizes (e.g., 72px display, 32px heading) for a distinctive brand voice.","Maintain comfortable element spacing with an 8px base unit using 8px elementGap for small separations and 64px for sectionGap between major content blocks.","Use 9999px border-radius for all primary buttons to achieve a consistent pill-shaped aesthetic.","Structure content with clear, subtle delineation using Light Steel (#e5e7eb) borders, especially around interactive and visual components.","Incorporate Parchment (#eadfcf) backgrounds for highlighted informational cards or secondary content blocks to introduce a warm neutral contrast."],"dont":["Avoid using Ember Glow (#de4c00) for purely decorative purposes; reserve it for actionable elements to prevent visual noise.","Do not deviate from the specified font families or their prescribed weights and letter spacing; unique type choices define the brand's readability and tone.","Refrain from introducing arbitrary background colors; stick to the approved color palette and surface hierarchy to maintain visual coherence.","Do not use hard, sharp angles for interactive elements; buttons and links should adhere to the established radii of 8px or 9999px.","Avoid using multiple chromatic colors in close proximity; the design relies on a single accent hue to guide user attention.","Do not assume default system font usage for body text; Work Sans should be preferred for readability in content areas.","Do not overcrowd sections; utilize the 64px sectionGap to provide ample breathing room between major content blocks."]}}