Payments UI

This is the styleguide for the payments UI.

Font size sets

What size should the fonts be? Where should different font families, weights and sizes be used

I’ve simplified the font sizes down to five sets:

  • Small: links (back, add credit card, etc.)
  • p text: for general text, as well as for .product name and “per month” text
  • h1: for .product .title
  • Large text: slightly bigger than h1, for product currency and cent values, as well as the close "×" button
  • Extra large text: for .product .price

We can reuse these five sets for the management interface:

font-family designation

  • Clear Sans
    • body (includes small text and p text)
    • button
    • input
  • Fira Sans
    • h1
    • larger text
    • extra large text

Colour palette

What are the precise colours things should be

I think you’ve followed FxA’s colour palette pretty well already, from border to text to background.

There are just three colours that we use, that aren’t present in FxA:

  • Red #D83812: for error messages and text
  • Light blue #E6F5FC: for the background of currently selected payment method, and “Try Again” button on receipt
  • Light grey #F4FFf6: for the background of “You will not be billed again` notification on receipt

Layout breakpoints

How should things change at varying widths

I have a responsive stylesheet for the pay interface that’s inspired by FxA’s. I think we should be able to reuse this for the management interface (although the management interface would be wider).

  • Wide: @media (mid-width:521px)
  • Medium: @media (min-width:320px)
    • Landscape – follow the styles used in Medium: @media (max-width 520px), (orientation:landscape) and (min-width:481px) and (max-height:480px)
  • Narrow: @media (max-width:319px)







CSS elements

  • .fxa-pay-modal
    • Used for: pay modal, management column
  • <main>
    • Used for: content inside pay modal
  • small text
    • Used for: back link, add credit card link
  • p text
    • Used for: .product name, .product per month
  • h1
    • Used for: .product .title
  • large text
    • Used for: .product currency & .product cent, close "×" button
  • extra large text
    • Used for: .product .price
  • input
  • button
  • vendor logo

CSS values

Should the padding around a button be proportional to the font-size or fixed?

As far as I know, FxA styleguide made button spacing fixed, but I’ve made it proportional in this table.


Element Wide Medium Narrow
modal width 420px 360px 100%
height 100%
min-height 420px 300px
border-radius 4px 2px 0px
box-shadow 0px 1px 5px rgba(0,0,0,0.5) same as wide
<main> padding 25px 40px 40px 8px 20px 20px 8px 0px 20px
margin 85px auto 0px (slide down elements to accommodate vendor logo, then center align it horizontally)


Element Wide Medium Narrow
small text font-size 14px same same
p text font-size 18px 14px same as medium
line-height 1.5 same same
h1 font-size 24px 20px same as medium
font-weight 200 same same
h1 .product .title padding-bottom .5em .45em same as medium
large text font-size 32px 24px same as medium
font-weight 200 same same
large text for .product currency and .product cent font-weight 400 same same
position relative same same
bottom .5em same same
margin 0 .2em 0 .1em same as medium
large text for close "×" button color #424F59 same same
font-size 32px same same
line-height 1 same same
padding 0 same same
position absolute same same
right 9px same same
extra large text font-size 78px 58px same as medium
font-weight 200 same same
extra large text for .product .price margin-bottom .25em same same

Form elements

Element Wide Medium Narrow
input border-radius 4px 2px same as medium
font-size 18px 16px same as medium
height 45px 40px same as medium
padding 0 20px 0 15px same as medium
margin 12.5px 0 same same
button font-size 24px 20px 18px
height 63px 44px 41px
line-height 1 same same
margin .83em 0 .75em 0 .55em 0


Element Wide Medium Narrow
vendor logo width & height 85px 55px same as medium
top -42.5px -27.5px 27.5px (move vendor logo down to be inside modal area)