{"id":"7b083729-e694-4b66-82a3-befb08451722","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","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":"Aboard","summary":"Warm earth against dark steel","description":"Aboard projects a grounded, sophisticated competence with a dark canvas, warm earthy accents, and a distinctive serif typeface for headlines. Monochrome textures and subtle borders create visual depth and structure, ensuring content feels substantial without being heavy. The design balances a serious, technical impression with approachable elements, using bold orange as a precise highlight for interactive elements and brand accents.","industry":"ai","colorScheme":"dark","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"},{"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"},{"name":"Deep Forest","hex":"#040c06","role":"Primary page background, extensive dark surfaces, and text on light surfaces","group":"neutral"},{"name":"Warm Black","hex":"#271503","role":"Main text color on light parchment backgrounds, subheadings, and muted body text on dark backgrounds","group":"neutral"},{"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"},{"name":"Stone Slate","hex":"#a49784","role":"Subtle background for navigation and secondary UI elements","group":"neutral"},{"name":"Light Steel","hex":"#e5e7eb","role":"Border colors for inputs, cards, and image outlines. Used widely for structural delineation","group":"neutral"},{"name":"White Canvas","hex":"#fffefb","role":"Prominent surface accents and primary text color on dark backgrounds, offering high contrast","group":"neutral"},{"name":"Pale Gray","hex":"#c1bdba","role":"Subtle border color, distinct from Light Steel, for layered elements","group":"neutral"},{"name":"True Black","hex":"#000000","role":"Used for text over light backgrounds and occasional structural outlines","group":"neutral"}],"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":""}],"typeScale":[{"role":"caption","size":10,"lineHeight":1.57,"letterSpacing":0.5},{"role":"body","size":16,"lineHeight":1.83,"letterSpacing":0},{"role":"heading-sm","size":24,"lineHeight":1.3,"letterSpacing":0.48},{"role":"heading","size":32,"lineHeight":1.1,"letterSpacing":-0.48},{"role":"display","size":72,"lineHeight":1.1,"letterSpacing":-0.48}],"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."]},"components":[{"name":"Primary Action Button","role":"Calls to action that drive core user flow."},{"name":"Parchment Card Button","role":"Secondary action or informational button within content areas."},{"name":"Navigation Link","role":"Top-level navigation items."},{"name":"Image Card","role":"Container for imagery, often with textual overlay."},{"name":"Hero Headline","role":"Prominent, attention-grabbing titles for key sections."}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\ntext: #fffefb\nbackground: #040c06\nborder: #e5e7eb\naccent: #de4c00\nprimary action: #de4c00 (filled action)\n\nExample Component Prompts:\n1. Create a Hero Section: Deep Forest (#040c06) background with a full-bleed, desaturated photograph. Overlay a 72px Tobias font (weight 300, #fffefb, letter-spacing -0.48px) headline. Below it, add a primary action button (Ember Glow #de4c00 background, White Canvas #fffefb text, 9999px radius, 10px vertical 16px horizontal padding).\n2. Design a Testimonial Card: Parchment (#eadfcf) background with 8px radius. Use Warm Black (#271503) for body text in Work Sans, weight 400. Include a subtle 1px Light Steel (#e5e7eb) border at its base.\n3. Create a Primary Action Button: #de4c00 background, #fffefb text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.\n4. Craft a Feature Block: Deep Forest (#040c06) background. Apply a heading with Tobias font, 32px, weight 300, and White Canvas (#fffefb) text. Content features Atkinson Hyperlegible Mono for emphasized points and Work Sans for body text, both in White Canvas (#fffefb)."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777510407125-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777510407125-thumb.jpg"},"similarStyleIds":["62e8e59e-17a5-4eba-a6c6-1c7f67ded518","4d4772a3-e1da-415f-a6d7-658dcefdcecd","1bd3b2ba-9ad9-44ed-9130-03f9d94de821","461da0f0-fde6-46bc-8137-7eca006260a8","c81d2be0-05b7-4755-8046-f2d19fbc448c","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","9cc537fc-97d8-4632-8703-f9aa296c2206","34baa524-5d5b-4165-bbab-d01f05e6d6b9","75fdb89f-ca64-41b3-af36-7a78bd09448e","e0ad1a25-5609-45e6-a355-9bdeec86c5ae","62b22816-2d98-4e98-9c17-bf600ddb2fc8","a7530405-e523-4268-bba5-ef13549fd61c","1ae4bcfe-c613-42fc-aab7-f9583381e7cc","7f6799d9-0733-4523-9a94-036b9ad3bf28","3389358b-68b2-4fca-82a8-52c07b3a3475","408a149c-702f-4442-99df-bea49d9c0d9b","c3ceca5c-d329-4559-b947-016172941ba2","733e6475-892a-4138-8835-bf40344df317","9fecf7d6-b717-49ca-8edc-b10d6110b21c","a76ec6ba-20b3-495c-9d89-1e58281e79e7"],"exports":{"designMdUrl":"/references/refero/7b083729-e694-4b66-82a3-befb08451722/design.md","tokensJsonUrl":"/references/refero/7b083729-e694-4b66-82a3-befb08451722/tokens.json","tailwindV4Url":"/references/refero/7b083729-e694-4b66-82a3-befb08451722/tailwind-v4.css","cssVariablesUrl":"/references/refero/7b083729-e694-4b66-82a3-befb08451722/tailwind-v4.css"}}