SENA Web/Shogun Style Guide

Last updated: September 21, 2022

 

Shogun

To start making use of Targus's new template, simply create a New Page and select a "SENA-Standard-Template” from the list of templates. Your custom templates will be front and center, ready for you to use. You can even choose to make your template a landing page.

Please don’t update the template itself. The only way to use it is explained below.


How to use the “SENA-Standard-Template”?


  • Go to Shogun Dashboard
  • Go to “+ Add page"
  • Go to the “Your Templates” tab
  • Choose “SENA-Standard-Template”
  • It gives you pop up window for  “page details” to enter the Page Name and URL
  • Choose "Create a standard page"
  • Go to the pages and see the page you created with the Targus standard template. All you need after that update the photos, text, or hide section that you don't need it.

Targus Snippets


You will have SENA Standard sections (Snippets) to choose from it besides the template.
  • On your Shogun new page
  • Go to the "Snippets" tab in the right section
  • You will find a list of SENA-Snippets.
  • Just drag on the page the section you like.

SENA/Shogun Typography


  • Targus/Shogun standard font is "Gilroy-Medium"
  • Font size: 18px

 

SENA/Shogun Heading


 Heading H1


  • Use H1 only once on the page within the main HeaderUse only UPPERCASE for the H1 for the first letter from each word
  • Use Font Size: 40px for Desktop/Small device
  • Use the standard Font: Gilroy-Light
  • Text color: FFFFFF

    Shogun Heading H2


    Any section's title after the main header should be H2

    • Use Font Size: 32px for Desktop/Small device
    • Use only UPPERCASE for the H1 for the first letter from each word
    • Use the standard Font: Gilroy-Light

    SENA/Shogun Standard Padding


    Use for every section Padding Top and Bottom: 64px for desktop

    For small screen: Use for every section Padding Top and Bottom: 46 px. 

    SENA/Shogun Standard buttons


    For any Add to Cart button
    • Text color: FFFFFF
    • Background: Solid
    • Color: 54565A
    • Size: 14px
    • Hover Color: 642340
    • Hover Text Color: FFFFFF
    • Border Radius: 2px
    For Shop Now, Shop Collection, Learn more...etc
      • Text color: FFFFFF
      • Size: 16px
      • Background: Solid
      • Color: 642340
      • Border Color: 642340
      • Border Thickness: 2px
      • Border Radius: 2px
      • Hover Color: FFFFFF
      • Hover Border Color: 642340
      • Hover Text Color: 642340