Specter Logo

    Specter Brand Guidelines

    The official reference for working with the Specter brand — color palette, typography, principles, and usage.

    These guidelines keep the Specter brand consistent across the website, the Specter DIY hardware wallet interface, marketing materials and documentation. Contributors, partners and press should follow them whenever the brand is represented publicly.

    Color Palette

    Specter DIY Hardware Wallet Colors

    These colors are used exclusively within the Specter DIY Hardware Wallet interface and should not be used on the website or marketing materials.

    Typography

    Website & All Other Uses

    Sans-Serif

    Clean, readable typeface for the website, marketing materials, documentation, and all other brand applications. Ensures consistency everywhere.

    Specter DIY Hardware Wallet

    Montserrat

    Used throughout the Specter DIY Hardware Wallet interface. Bold, modern typeface that ensures clarity on device displays.

    Design Principles

    High Contrast

    Dark backgrounds paired with bright text ensure excellent readability. Users can quickly scan content and locate important buttons and information without eye strain.

    Clear Hierarchy

    Color creates visual hierarchy across the site. Blue draws attention to primary actions, while secondary text recedes. This guides users naturally through page content.

    Accessibility

    All color combinations meet WCAG AA contrast standards. Text remains legible for users with different vision abilities, ensuring an inclusive web experience.

    Consistency

    The same colors apply across all website pages and sections. This creates a unified brand experience and helps users understand interface patterns.

    Button Styles

    Two button styles help users distinguish between primary and alternative actions:

    Usage Guidelines

    • specter-primaryUse for main call-to-action buttons like 'Submit', 'Continue', or 'Learn More'. This color draws focus to the most important action on the page.
    • specter-coralUse for alternative actions like 'Cancel', 'Skip', or 'Back'. Use sparingly to avoid overwhelming the page.
    • specter-primary (Headers & Titles)Use for page titles and section headings. This makes key topics stand out and helps users navigate the site structure.
    • specter-darkUse for the main page background. Apply this to all full-width page areas.
    • specter-dark-secondaryUse for content cards, information boxes, and component backgrounds. This creates visual separation from the page background.
    • specter-dark-accentUse only for the logo container area. Keep this space clean and separate from other content.
    • specter-lightUse for main body text, headings, and important information. This ensures maximum readability.
    • specter-light-secondaryUse for helper text, labels, dates, and supporting information that isn't the main focus.
    • specter-logoUse only for the Specter logo. Do not use this color for buttons, text, or other UI elements.

    Specter Brand Guidelines · Last updated January 2025

    For questions about brand usage, reach out via the contact page.