Preview image. Unlock full-res
organized workshop on creamy paper
Boords presents a light and airy design that feels like an organized workshop, balancing clear information with subtle visual cues. The primary canvas of crisp Alabaster (#fafaf5) is contrasted by accents of playful Butterscotch (#e8aa42) and rich Charcoal (#121212) that anchor calls to action and create visual hierarchy. The consistent use of a custom "Matter" typeface provides a modern yet approachable voice, while distinct border radii like the 9999px pill shape for buttons introduce softness into an otherwise structured layout.
Use Alabaster (#fafaf5) for primary page backgrounds, creating a creamy white canvas.
Apply Charcoal (#121212) for all main headings and prominent text to establish clear hierarchy.
Accent interactive button borders and key links with Butterscotch (#e8aa42) to draw attention.
Form pill-shaped buttons with a 9999px border radius for all primary calls to action.
Utilize the Matter typeface with appropriate weights for all textual content, reserving ui-monospace for code displays only.
Maintain a compact element spacing of 8px (elementGap) for items within components, like icons and text.
Employ the Burnished Bronze Gradient for distinct dark sections to build contrast and visual interest.
Avoid using raw black (#000000) for general body text; reserve it for structural borders or very high contrast needs.
Do not introduce new primary action colors; Butterscotch (#e8aa42) outlines or Charcoal (#121212) fills are the established interactives.
Refrain from adding arbitrary shadows; only use the specified light rgba(108, 188, 244, 0.5) 0px 0px 0px 1px for cards and the soft rgba(255, 255, 255, 0.03) 0px 0px 24px 0px for floating elements.
Do not vary header or body font families outside of Matter and ui-monospace to maintain typographic consistency.
Avoid deviating from the established border radii; adhere to 6px for general elements, 9999px for pills, and 12px for cards.
Do not use gradients for backgrounds outside of the predefined Burnished Bronze and Warm Umber gradients.
Introduce new chromatic colors; stick to the current palette to avoid visual noise and ensure brand recognition.
