Styleguide
- LEGEND - CLICK TO FOLLOW
- COLORS
- NEUE HAAS GROTESK DISPLAY PRO FONT RECKLESS FONT BUTTONS
- INPUT FIEDL
- ICON
- CHIPS COLLECTION
COLORS
Fizik white
Hex: #FFFFFF
.
tw-[object]-white
Fizik lightgrey
Hex: #F5F5F5
.
tw-[object]-lightgrey
Fizik lightgrey100
Hex: #E7E7E7
.
tw-[object]-lightgrey100
Fizik lightgrey200
Hex: #D9D9D9
.
tw-[object]-lightgrey200
Fizik darkgrey
Hex: #979797
.
tw-[object]-darkgrey
Fizik darkgrey100
Hex: #696969
.
tw-[object]-darkgrey100
Fizik darkgrey200
Hex: #3C3C3C
.
tw-[object]-darkgrey200
Fizik black
Hex: #222222
.
tw-[object]-black
Fizik orange
Hex: #F5793B
.
tw-[object]-orange
Fizik pink
Hex: #DF72B0
.
tw-[object]-pink
Fizik violet
Hex: #8C2AF6
.
tw-[object]-violet
Fizik yellow
Hex: #E3F100
.
tw-[object]-yellow
Fizik green
Hex: #32BC01
.
tw-[object]-green
Fizik blue
Hex: #0052B4
.
tw-[object]-blue
Fizik red ERROR
Hex: #D80027
.
tw-[object]-red
FONT EFFRA
FONT WEIGHT:
- LIGHT: 300 REGULAR: 400
- MEDIUM: 500
xxl-medium
Rem Size: 6.4rem
Example...
tw-fiz-xxl-medium
xxl-regular
Rem Size: 6.4rem
Example...
tw-fiz-xxl-regular
xxl-light
Rem Size: 6.4rem
Example...
tw-fiz-xxl-light
xl-regular
Rem Size: 5.2rem
Example...
tw-fiz-xl-regular
xl-light
Rem Size: 5.2rem
Example...
tw-fiz-xl-light
l-regular
Rem Size: 3.6rem
Example...
tw-fiz-l-regular
m-regular
Rem Size: 2.8rem
Example...
tw-fiz-m-regular
s-regular
Rem Size: 2.2rem
Example...
tw-fiz-s-regular
s-medium
Rem Size: 2.2rem
Example...
tw-fiz-s-medium
xs-regular
Rem Size: 1.6rem
Line-height: 2rem
Example...
tw-fiz-xs-regular
xs-regular1
Rem Size: 1.6rem
Line-height: 2.2rem
Example...
tw-fiz-xs-regular1
xs-medium
Rem Size: 1.6rem
Example...
tw-fiz-xs-medium
xs-medium1
Rem Size: 1.6rem
Example...
tw-fiz-xs-medium1
xxs-regular
Rem Size: 1.4rem
Example...
tw-fiz-xxs-regular
xxxs-light
Rem Size: 1.2rem
Example...
tw-fiz-xxxs-light
xxxs-regular
Rem Size: 1.2rem
Example...
tw-fiz-xxxs-regular
FONT GT MONO
FONT WEIGHT:
- LIGHT: 300 REGULAR: 400
- MEDIUM: 500
xl-mono-light
Rem Size: 1.6rem
Example...
tw-fiz-xl-mono-light
xl-mono-regular
Rem Size: 1.6rem
Example...
tw-fiz-xl-mono-regular
l-mono-light
Rem Size: 1.4rem
Example...
tw-fiz-l-mono-light
l-mono-regular
Rem Size: 1.4rem
Example...
tw-fiz-l-mono-regular
m-mono-light
Rem Size: 1.2rem
Example...
tw-fiz-m-mono-light
m-mono-regular
Rem Size: 1.2rem
Example...
tw-fiz-m-mono-regular
m-mono-medium
Rem Size: 1.2rem
Example...
tw-fiz-m-mono-medium
s-mono-light
Rem Size: 1rem
Example...
tw-fiz-s-mono-light
s-mono-regular
Rem Size: 1rem
Example...
tw-fiz-s-mono-regular
BUTTONS
tw-add-to-bag-btn
tw-filters-btn
tw-continue-btn
tw-shop-now-btn
Shop NowLiquid error (sections/main-page-styleguide line 545): Could not find asset snippets/fiz-icon-dots.liquid
Shop Now (Active)Liquid error (sections/main-page-styleguide line 549): Could not find asset snippets/fiz-icon-dots.liquid
Shop Now (Disabled)Liquid error (sections/main-page-styleguide line 553): Could not find asset snippets/fiz-icon-dots.liquid
tw-nobg-btn
tw-dark-btn
tw-btn-unstyled
tw-square-btn
tw-square-btn-nobg
general icon button :before
USE before:tw-content-(ICON-NAME)
USE tw- (general-roundicon-btn o general-squareicon-btn)
general icon button :after
USE after:tw-content-(ICON-NAME)
USE tw- (general-roundicon-btn o general-squareicon-btn)
tw-account-btn
INPUT FIELD
tw-inputfield normal input
use passwordToggle.js
tw-input-password password input
CHECKBOX
CHIPS COLLECTION
tw-chips-collection
ICONS
- tw-content-filters
- tw-content-i_filters
- tw-content-logo
- tw-content-logo-white
- tw-content-eyepsw
- tw-content-eye
- tw-content-i_eye
- tw-content-cross
- tw-content-arrowslide
- tw-content-arrow-select
- tw-content-search-icon
- tw-content-account-icon
- tw-content-global-icon
- tw-content-locker-icon
- tw-content-wishlist
- tw-content-i_wishlist
- tw-content-refresh
- tw-content-dark_wishlist
- tw-content-dark_i_wishlist
- tw-content-cross
- tw-content-square
- tw-content-checkbox-default
- tw-content-checkbox-checked