Highnote

Highnote — design reference

Source: https://highnote.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.

Typography

• font-family: Helvetica Now Text,Helvetica,Arial,sans-serif — selector .APHero-module**_xqChqtextA,.APHero-module_xqChq**textB
• font-family: Helvetica Now Display,-apple-system,BlinkMacSystemFont,system-ui,sans-serif — selector .AcquiringCard-module**shMh7a**cardText
• font-family: var(--mint-font-family-sans), var(--font-sans) — selector .text-body-large-underline
• font-family: var(--mint-font-family-display), var(--font-display) — selector .text-heading-large
• font-family: var(--font-display) — selector .font-display
• font-family: var(--font-sans) — selector html,body
• font-family: var(--font-display)!important — selector blockquote p
• font-size: 14px — selector .APFlow-module**Smy9eW**tileTitle
• font-size: 12px — selector .AgenticAuthControl-module**HAWyPW**cardTitle,.AgenticAuthControl-module**HAWyPW**cardAmount
• font-size: 10px — selector .EFApiLifecycle-module**wt4FZq**cardLabel
• font-size: 13px — selector .EcommerceCheckout-module**ZmAS1G**payButton span
• font-size: 24px — selector .SaasBrandedCards-module**uuOSaW**cardNumber
• font-size: 15px — selector .MMHeroTransfers-module**LtC6Qa**method
• font-size: var(--text-xs,14px) — selector .btnTertiary
• font-size: var(--hn-timeline-text) — selector .hn-timeline**title
• font-weight: 500 — selector .APFlow-module**Smy9eW**tileTitle
• font-weight: var(--mint-font-weight-helvetica-now-text-3) — selector .text-body-large-underline
• font-weight: var(--mint-font-weight-helvetica-now-text-2) — selector .text-body-medium-emphasis
• font-weight: var(--mint-font-weight-helvetica-now-display-1) — selector .text-heading-large
• font-weight: var(--mint-font-weight-helvetica-now-display-0) — selector .text-heading-xl
• font-weight: var(--font-weight-medium) — selector .file:font-medium::file-selector-button
• font-weight: var(--font-weight-normal)!important — selector blockquote p strong
• line-height: 1.3 — selector .APFlow-module**Smy9eW**tileTitle
• line-height: 1 — selector .SaasBrandedCards-module**uuOSaW**cardNumber
• line-height: var(--tw-leading,var(--text-xs--line-height,18px)) — selector .btnTertiary
• line-height: 1.45 — selector .hn-timeline**title
• line-height: var(--mint-line-height-3) — selector .text-body-large-underline
• line-height: var(--mint-line-height-6) — selector .text-body-medium-underline
• line-height: var(--mint-line-height-9) — selector .text-body-small
• line-height: var(--mint-line-height-1) — selector .text-heading-large
• letter-spacing: normal — selector .MMHeroTransfers-module**LtC6Qa**method
• letter-spacing: 1.5px — selector .AcquiringCard-module**shMh7a**cardText
• letter-spacing: var(--mint-letter-spacing-3) — selector .text-body-large-underline
• letter-spacing: var(--mint-letter-spacing-1) — selector .text-heading-large
• letter-spacing: var(--mint-letter-spacing-2) — selector .text-heading-medium
• letter-spacing: var(--mint-letter-spacing-0) — selector .text-heading-xl

Colors and surfaces

• color: #0a0a0a — selector .APFlow-module**Smy9eW**tileTitle
• color: #fff — selector .EcommerceCheckout-module**ZmAS1G**payButton
• color: #179a57 — selector .MMHeroTransfers-module**LtC6Qa**statusCompleted
• color: #eb9212 — selector .MMHeroTransfers-module**LtC6Qa**statusInitiated
• color: #000 — selector .GiftCardSpendRules-module**9eAFPG**iconWrap
• color: #00000073 — selector .GiftCardSpendRules-module**9eAFPG**headerLabel
• color: var(--color-black,#000) — selector .button-transparent
• color: var(--color-white,#fff) — selector .button-black
• background-color: #0000 — selector .button-transparent
• background-color: var(--color-green,#55f5a3) — selector .button-transparent:hover
• background-color: var(--color-black,#000) — selector .button-black
• background-color: var(--color-white,#fff) — selector .btnTertiary
• background-color: var(--color-bone,#f5f3eb) — selector .btnTertiaryActive:hover
• background-color: var(--color-button-primary) — selector .bg-button-primary
• background-color: var(--color-button-primary-active) — selector .bg-button-primary-active
• background-color: var(--color-button-primary-disabled) — selector .bg-button-primary-disabled

Components and layout

• border-radius: 10px — selector .AgenticAuthControl-module**HAWyPW**card
• border-radius: 12px — selector .EcommerceCheckout-module**ZmAS1G**card
• border-radius: 8px — selector .EcommerceCheckout-module**ZmAS1G**payButton
• border-radius: .75rem — selector .UseCaseCard-module**_f2voacard
• border-radius: 16px — selector .MMHeroTransfers-moduleLtC6Qacard
• border-radius: 3.40282e38px — selector .button
• border-radius: 0 0 20px 20px — selector .AcquiringCard-moduleshMh7acontainer
• border-radius: 11px — selector .AcquiringCard-moduleshMh7acheckoutWrap
• box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) — selector .button:focus
• box-shadow: 0 4px 24px #00000014 — selector .AcquiringCard-moduleshMh7acheckoutWrap
• max-width: 360px — selector .APHero-module_xqChq**root
• max-width: 300px — selector .AgenticAuthControl-module**HAWyPW**container
• max-width: 320px — selector .BrandedCreditControls-module**2HUiva**container
• max-width: 280px — selector .EFCredit-module**VSePja**container
• max-width: 600px — selector .MMHeroTransfers-module**LtC6Qa**outer
• max-width: 340px — selector .EFEmbeddedPayments-module**MDug7q**container
• max-width: 1280px — selector .UnifiedConnector-module**qsEF4q**container
• max-width: 24rem — selector .UnifiedConnectorMobile-module**E7ZMVG**container
• padding: 18px 22px — selector .AgenticAuthControl-module**HAWyPW**cardHeader
• padding: 0 16px — selector .BrandedCreditControls-module**2HUiva**txnCard
• padding: 14px 18px — selector .EFApiLifecycle-module**wt4FZq**cardHeader
• padding: 18px 20px 14px — selector .EcommerceCheckout-module**ZmAS1G**card
• padding: 20px — selector .SaasBrandedCards-module**uuOSaW**card
• padding: 10px 16px — selector .SaasBrandedCards-module**uuOSaW**row
• padding: 14px 16px — selector .EFCredit-module**VSePja**cardHeader
• padding: 13px 16px — selector .EcommerceFunding-module**9yW04W**settleCard
• gap: 3rem — selector .LogosMarquee-module**xzOgaG**container
• gap: 1.25rem — selector .LogosMarquee-module**xzOgaG**container
• gap: .625rem — selector .LogosMarquee-module**xzOgaG**container
• gap: 12px — selector .BrandedCreditControls-module**2HUiva**container
• gap: 6px — selector .EcommerceCheckout-module**ZmAS1G**payButton span
• gap: 2px — selector .SaasBrandedCards-module**uuOSaW**cardTop
• gap: 4px — selector .SaasBrandedCards-module**uuOSaW**cardNumber
• gap: 5px — selector .EFCredit-module**VSePja**cardHeader
• transition: transform .4s cubic-bezier(.25,.46,.45,.94) — selector .UseCaseCard-module\_**f2voa**card img
• transition: transform .5s cubic-bezier(.34,1.25,.64,1) — selector .MMHeroTransfers-module**LtC6Qa**card
• transition: none!important — selector .MMHeroTransfers-module**LtC6Qa**instant .MMHeroTransfers-module**LtC6Qa**card
• transition: color .4s — selector .MMHeroTransfers-module**LtC6Qa**status
• transition: opacity .5s — selector .SpendHero-module**jDunCG**stage
• transition: opacity .5s,transform .5s — selector .SpendHero-module**jDunCG**row,.SpendHero-module**jDunCG**connector
• transition: fill .35s — selector .SpendHero-module**jDunCG**chip
• transition: stroke-dashoffset .4s .15s — selector .SpendHero-module**jDunCG**check

Responsive rules

(min-width:1024px)
(max-width:1023px)
(prefers-reduced-motion:reduce)
(max-width:1000px)
(max-width:640px)
(min-width:640px)
(hover:hover) and (pointer:fine)
(max-width:900px)
(forced-colors:active)
(hover:hover)
(min-width:48rem)
(min-width:40rem)
(min-width:64rem)
(min-width:80rem)
(min-width:96rem)
(prefers-reduced-motion:no-preference)
not all and (min-width:40rem)
(prefers-color-scheme:dark)
print
(any-pointer:coarse)
(any-pointer:coarse)]:opacity-100