1197911 - Sanity Check Tracking Protection UI Tour Design

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Ben (:bensternthal)]

Attachment: Tp Onboarding Spec Final.png

Lee:

(note i am handling this project while cory is on paternity).

In our review today of the tracking protection ui tour, it was mentioned that the creative team should review the colors and font choices. Hope you do not mind you were nominated!

While this is previewable on a demo site with some settings changes the easiest way to review is via the attached PNG.

Please note the following:
- fonts will be default users system font
- green, any specific green we should use

Those were the only specific items I pulled out from the meeting. In general the goal here is to make sure this is consistent with Mozilla branding, so if you notice anything please mention here.

Thanks again.

Comment 1

[Lee Tom]

Hi Ben, I'm happy to take a look at this. 

I see that the green color value is #6fbe4a, which is good - it's consistent with a green in the palette that both Sean and Stephen Horlander set up. 

Will "Firefox Tracking Protection" in the green footer change depending on the system font variable? In the spec, it looks like it's currently in Fira Sans Light Italic, while "Private Browsing" in the purple header takes on whatever system font styling as the rest of the content.  

I'm thinking it would be ideal to style both the header and footer the same, if possible.

Comment 2

[Alex Gibson [:agibson]]

(In reply to Lee Tom from comment #1)
> Will "Firefox Tracking Protection" in the green footer change depending on
> the system font variable? In the spec, it looks like it's currently in Fira
> Sans Light Italic, while "Private Browsing" in the purple header takes on
> whatever system font styling as the rest of the content.  

I was initially confused by this also. As far as I have been told, all fonts should be using the default system font (unless anyone here can clarify that "Firefox Tracking Protection" in the green footer is, in fact, an exception here).

Comment 3

[Holly Habstritt Gaal [:Habber]]

Perhaps Aislinn or MattN can give some insight into the system font decision. See comments above.

Comment 4

[Ash Grigas]

(In reply to Alex Gibson [:agibson] from comment #2)
> (In reply to Lee Tom from comment #1)
> > Will "Firefox Tracking Protection" in the green footer change depending on
> > the system font variable? In the spec, it looks like it's currently in Fira
> > Sans Light Italic, while "Private Browsing" in the purple header takes on
> > whatever system font styling as the rest of the content.  
> 
> I was initially confused by this also. As far as I have been told, all fonts
> should be using the default system font (unless anyone here can clarify that
> "Firefox Tracking Protection" in the green footer is, in fact, an exception
> here).

All screens will have the system font - if Fira is implemented that is incorrect.

Comment 5

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

(In reply to agrigas from comment #4)
> (In reply to Alex Gibson [:agibson] from comment #2)
> > (In reply to Lee Tom from comment #1)
> > > Will "Firefox Tracking Protection" in the green footer change depending on
> > > the system font variable? In the spec, it looks like it's currently in Fira
> > > Sans Light Italic, while "Private Browsing" in the purple header takes on
> > > whatever system font styling as the rest of the content.  
> > 
> > I was initially confused by this also. As far as I have been told, all fonts
> > should be using the default system font (unless anyone here can clarify that
> > "Firefox Tracking Protection" in the green footer is, in fact, an exception
> > here).
> 
> All screens will have the system font - if Fira is implemented that is
> incorrect.

Hey Lee,

Does this answer your question?

Comment 6

[Lee Tom]

It does. Sounds like Fira Sans will be used for both. 


(In reply to Cory Price [:ckprice] from comment #5)
> (In reply to agrigas from comment #4)
> > (In reply to Alex Gibson [:agibson] from comment #2)
> > > (In reply to Lee Tom from comment #1)
> > > > Will "Firefox Tracking Protection" in the green footer change depending on
> > > > the system font variable? In the spec, it looks like it's currently in Fira
> > > > Sans Light Italic, while "Private Browsing" in the purple header takes on
> > > > whatever system font styling as the rest of the content.  
> > > 
> > > I was initially confused by this also. As far as I have been told, all fonts
> > > should be using the default system font (unless anyone here can clarify that
> > > "Firefox Tracking Protection" in the green footer is, in fact, an exception
> > > here).
> > 
> > All screens will have the system font - if Fira is implemented that is
> > incorrect.
> 
> Hey Lee,
> 
> Does this answer your question?

Comment 7

[Ash Grigas]

(In reply to Lee Tom from comment #6)
> It does. Sounds like Fira Sans will be used for both. 
> 
> 
> (In reply to Cory Price [:ckprice] from comment #5)
> > (In reply to agrigas from comment #4)
> > > (In reply to Alex Gibson [:agibson] from comment #2)
> > > > (In reply to Lee Tom from comment #1)
> > > > > Will "Firefox Tracking Protection" in the green footer change depending on
> > > > > the system font variable? In the spec, it looks like it's currently in Fira
> > > > > Sans Light Italic, while "Private Browsing" in the purple header takes on
> > > > > whatever system font styling as the rest of the content.  
> > > > 
> > > > I was initially confused by this also. As far as I have been told, all fonts
> > > > should be using the default system font (unless anyone here can clarify that
> > > > "Firefox Tracking Protection" in the green footer is, in fact, an exception
> > > > here).
> > > 
> > > All screens will have the system font - if Fira is implemented that is
> > > incorrect.
> > 
> > Hey Lee,
> > 
> > Does this answer your question?

Fira Sans is not being used at all - the header and footer are both system fonts so that they are not jarring when the user links off of our built in private browsing page to start the tour.

Comment 8

[Lee Tom]

Apologies - I read comment #4 wrong.  But um, my question is still answered...!  Onward? 

> > > Hey Lee,
> > > 
> > > Does this answer your question?
> 
> Fira Sans is not being used at all - the header and footer are both system
> fonts so that they are not jarring when the user links off of our built in
> private browsing page to start the tour.