Design language

Vendale uses a dark canvas for navigation, warm paper surfaces for focused work, and a single gold accent for primary actions. This guide records the visual rules used across the public website. Desktop styling is updated on its own release track.

1. Foundations

• Ink is the deep background and navigation surface, using #04120E and #0B1210.
• Paper is the warm work surface, using #FAF9F6 and #F1EFE9.
• Gold is the primary accent, using #F4C430 with #FFD44D for hover and #7A5C10 for text on paper.

Use luminance, typography, spacing, and thin borders to establish hierarchy. Reserve green and red for labeled success and danger states. Do not use status colors as decoration.

2. Color tokens

3. Typography

• Instrument Serif is reserved for large page and section headlines. Use weight 400 and -0.01em tracking through .font-serif-display.
• Inter is used for interface text, labels, buttons, and headings. Use 700 or less, with semibold for module and card titles.
• JetBrains Mono is used for numbers, identifiers, timestamps, and compact specifications such as order references and version strings.
• Keep body text in sentence case. Small labels may use uppercase mono at 10 to 11px with 0.12em tracking.

4. Layout and components

• Keep page content within a fluid maximum width of 1400px. Give long-form reading a narrower measure.
• Build hierarchy with spacing, type size, surface contrast, and 1px borders. Avoid decorative gradients, blur, glow, and tinted shadows.
• Use gold for the primary action. Secondary actions use a quiet surface or a thin border.
• Use compact radii from 6px to 12px. Reserve pill shapes for tags and small indicators.
• Keep interfaces responsive. At narrow widths, preserve readable line length and allow dense tables to scroll horizontally.

5. Motion and accessibility

• Use motion to explain state, orientation, or cause and effect. Avoid movement that competes with the task.
• Respect reduced-motion preferences by removing nonessential movement and replacing spatial transitions with immediate state changes.
• Keep keyboard focus visible, provide a skip link to main content, and pair status color with a readable label or symbol.
• Verify text and control contrast against the surface where each element appears.

6. Content integrity

• Describe capabilities that are available in the current release. Label work in progress and roadmap items clearly.
• Do not invent customer logos, testimonials, metrics, or product behavior.
• Keep category comparisons sourced and balanced. Describe product scope without naming or disparaging another company.

7. Contrast verification

The recorded palette check covered 13 text and surface pairs. Nine met AAA contrast and four met AA, with no failures. The weakest passing pair was success text on paper at 5.06:1. Status is communicated through both color and a label or symbol.