Brand Theme Generator

Theme controls

1200px
#123d32
Quick palettes (colors + fonts)
Live preview — backdrop fills gutters beyond the white page; Arches tokens update with controls

Annual meeting headline

Nav / accent font on subheads and UI chrome

Body copy uses the UI / copy font stack with system fallbacks. Try a sample link tinted from primary. Inline code-style uses accent-derived --code-color.

Brand
Primary
Secondary
Accent
Shade

Price cards (Arches utilities + theme tokens)

  • primary

    $900/5 year
    purchase plan

    or

    $300/1 year
    purchase plan

    Annual ABIM MOC fee*

  • secondary

    $900/5 year
    purchase plan

    or

    $300/1 year
    purchase plan

    Annual ABIM MOC fee*

  • accent

    $900/5 year
    purchase plan

    or

    $300/1 year
    purchase plan

    Annual ABIM MOC fee*
Gradient card uses --start-color → --end-color derived from Brand hue/sat/lightness (--acc-*).

Generated :root snippet

While you adjust controls, this page applies the same tokens on :root (via <html> inline properties) so Arches utilities pick them up. The snippet begins with static Google Fonts <link> tags (preconnect + one stylesheet per chosen family) suitable for pasting into a CMS or <head> include, then your :root <style>. --shade is derived from Primary (5% mix with 50% grey). System state colors (success, warning, alert, info) match the current defaults in _includes/annual/root.html.