Styleguide

Gap Australia base styles: typography, color, spacing, buttons, form fields, and rich text. Resize the viewport to compare desktop and mobile token values (breakpoint 1024px).

Typography — headings

h1 / 2xl

The quick brown fox

h2 / xl

The quick brown fox

h3 / lg

The quick brown fox

h4 / md

The quick brown fox

h5 / sm

The quick brown fox

h6 / 2xs

The quick brown fox

Typography — body

Body large

Body large — Gap Sans regular 400. Used for intro and lead paragraphs.

Body default

Body default — Gap Sans regular 400. Standard paragraph and UI copy.

Body small

Body small — supporting labels and secondary copy.

Body xs

Body extra small — captions and fine print.

Strong / bold

Regular weight only — strong text stays at 400 until additional weights are added.

Link

Inline link colour uses Gap Blue with black on hover (see RTE section).

Sales

Sale price and promotional text

Type scale tokens

Token CSS variable
2xl --font-size-2xl / --line-height-xl
xl --font-size-xl / --line-height-lg
lg --font-size-lg / --line-height-md
md --font-size-md / --line-height-sm
sm --font-size-sm / --line-height-xs
xs --font-size-xs / --line-height-2xs
2xs --font-size-2xs / --line-height-2xs

Color — primitives

Black #000000
Neutral 700 #595959
Neutral 600 #757575
Neutral 500 #CCCCCC
Neutral 400 #E9E9E9
Neutral 200 #F7F7F7
White #FFFFFF
Gap Blue #001EA0
Sales Red #E10000

Color — semantic

Text

text --color-text
text-inverse --color-text-inverse
text-secondary --color-text-secondary
link --color-link
link-hover --color-link-hover
text-sales --color-text-sale

Surface / Neutral

neutral-dark
action-hover-1
action-hover-2
action-light (6%)
focused
disabled
neutral-white

Border

border-default
border-hover

Spacing

size-4

size-8

size-10

size-12

size-16

size-24

size-30

size-40

size-60

size-90

size-120

Buttons

Choose one style modifier: button--primary, button--secondary, or button--outline. Optionally add button--sm for the small size. Use only one style modifier per button.

Primary

Primary Primary small

Secondary

Secondary Secondary small

Outline

Outline Outline small

Form fields

Floating labels use field__text-wrap, field__text with placeholder=" ", and field__text-label. Focus a field or enter a value to see the label scale up and move.

Text input

Textarea

Choices

Rich text (RTE)

Article heading

Paragraph with a link, strong, and emphasis. Lists and tables inherit body styles.

  • Unordered list item one
  • Unordered list item two
  1. Ordered list item one
  2. Ordered list item two

Subheading

Second paragraph for spacing rhythm.