Skip to content

PUBLIC REFERENCE

Aboard

Warm earth against dark steel

2026-04-30 Source style Original site
Aboard captured reference
DESIGN.md tokens.json Tailwind v4 detail JSON

Colors

Ember Glow #de4c00

Primary action backgrounds, link accents, functional icons — a vivid, warm orange that cuts through the dark palette

Peach Fuzz #efa680

Orange outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color

Deep Forest #040c06

Primary page background, extensive dark surfaces, and text on light surfaces

Warm Black #271503

Main text color on light parchment backgrounds, subheadings, and muted body text on dark backgrounds

Parchment #eadfcf

Accent backgrounds for cards and highlighted content sections. Also used for some body and heading text on dark backgrounds

Stone Slate #a49784

Subtle background for navigation and secondary UI elements

Light Steel #e5e7eb

Border colors for inputs, cards, and image outlines. Used widely for structural delineation

White Canvas #fffefb

Prominent surface accents and primary text color on dark backgrounds, offering high contrast

Pale Gray #c1bdba

Subtle border color, distinct from Light Steel, for layered elements

True Black #000000

Used for text over light backgrounds and occasional structural outlines

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.

Don't

  • 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.