Created
October 28, 2019 22:24
-
-
Save gnomeontherun/39528964774cc9d18e6c1fb5d46112ed to your computer and use it in GitHub Desktop.
New Clarity typography demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .clr-h-display { | |
| color: #29373d; | |
| font-size: 40px; | |
| line-height: 48px; | |
| font-family: "Metropolis"; | |
| font-weight: 500; | |
| letter-spacing: -0.5px; | |
| } | |
| .clr-h-heading { | |
| color: #29373d; | |
| font-size: 32px; | |
| line-height: 40px; | |
| font-family: "Metropolis"; | |
| font-weight: 500; | |
| letter-spacing: -0.4px; | |
| } | |
| .clr-h-title { | |
| color: #29373d; | |
| font-size: 24px; | |
| line-height: 32px; | |
| font-family: "Metropolis"; | |
| font-weight: 500; | |
| letter-spacing: -0.2px; | |
| } | |
| .clr-h-section { | |
| color: #29373d; | |
| font-size: 20px; | |
| line-height: 24px; | |
| font-family: "Metropolis"; | |
| font-weight: 500; | |
| letter-spacing: -0.2px; | |
| } | |
| .clr-h-subsection { | |
| color: #29373d; | |
| font-size: 16px; | |
| line-height: 20px; | |
| font-family: "Metropolis"; | |
| font-weight: 500; | |
| letter-spacing: -0.2px; | |
| } | |
| .clr-p-message { | |
| color: #525c60; | |
| font-size: 16px; | |
| line-height: 20px; | |
| font-family: "Metropolis"; | |
| font-weight: 400; | |
| letter-spacing: -0.2px; | |
| } | |
| .clr-p-regular { | |
| color: #525c60; | |
| font-size: 14px; | |
| line-height: 20px; | |
| font-family: "Metropolis"; | |
| font-weight: 400; | |
| letter-spacing: -0.1px; | |
| } | |
| .clr-p-secondary { | |
| color: #29373d; | |
| font-size: 13px; | |
| line-height: 16px; | |
| font-family: "Metropolis"; | |
| font-weight: 400; | |
| letter-spacing: -0.1px; | |
| } | |
| .clr-button { | |
| color: #028eca; | |
| font-size: 13px; | |
| line-height: 16px; | |
| font-family: "Metropolis"; | |
| font-weight: 600; | |
| letter-spacing: -0.2px; | |
| } | |
| .clr-c-regular { | |
| color: #29373d; | |
| font-size: 11px; | |
| line-height: 16px; | |
| font-family: "Metropolis"; | |
| font-weight: 400; | |
| letter-spacing: 0.2px; | |
| } | |
| .clr-c-medium { | |
| color: #29373d; | |
| font-size: 10px; | |
| line-height: 12px; | |
| font-family: "Metropolis"; | |
| font-weight: 500; | |
| letter-spacing: 0.5px; | |
| } | |
| .clr-padding-top-1 { | |
| padding-top: 1px; | |
| } | |
| .clr-unpadding-top-1 { | |
| padding-top: -1px; | |
| } | |
| .clr-margin-top-1 { | |
| margin-top: 1px; | |
| } | |
| .clr-unmargin-top-1 { | |
| margin-top: -1px; | |
| } | |
| .clr-padding-bottom-1 { | |
| padding-bottom: 1px; | |
| } | |
| .clr-unpadding-bottom-1 { | |
| padding-bottom: -1px; | |
| } | |
| .clr-margin-bottom-1 { | |
| margin-bottom: 1px; | |
| } | |
| .clr-unmargin-bottom-1 { | |
| margin-bottom: -1px; | |
| } | |
| .clr-padding-right-1 { | |
| padding-right: 1px; | |
| } | |
| .clr-unpadding-right-1 { | |
| padding-right: -1px; | |
| } | |
| .clr-margin-right-1 { | |
| margin-right: 1px; | |
| } | |
| .clr-unmargin-right-1 { | |
| margin-right: -1px; | |
| } | |
| .clr-padding-left-1 { | |
| padding-left: 1px; | |
| } | |
| .clr-unpadding-left-1 { | |
| padding-left: -1px; | |
| } | |
| .clr-margin-left-1 { | |
| margin-left: 1px; | |
| } | |
| .clr-unmargin-left-1 { | |
| margin-left: -1px; | |
| } | |
| .clr-padding-top-2 { | |
| padding-top: 2px; | |
| } | |
| .clr-unpadding-top-2 { | |
| padding-top: -2px; | |
| } | |
| .clr-margin-top-2 { | |
| margin-top: 2px; | |
| } | |
| .clr-unmargin-top-2 { | |
| margin-top: -2px; | |
| } | |
| .clr-padding-bottom-2 { | |
| padding-bottom: 2px; | |
| } | |
| .clr-unpadding-bottom-2 { | |
| padding-bottom: -2px; | |
| } | |
| .clr-margin-bottom-2 { | |
| margin-bottom: 2px; | |
| } | |
| .clr-unmargin-bottom-2 { | |
| margin-bottom: -2px; | |
| } | |
| .clr-padding-right-2 { | |
| padding-right: 2px; | |
| } | |
| .clr-unpadding-right-2 { | |
| padding-right: -2px; | |
| } | |
| .clr-margin-right-2 { | |
| margin-right: 2px; | |
| } | |
| .clr-unmargin-right-2 { | |
| margin-right: -2px; | |
| } | |
| .clr-padding-left-2 { | |
| padding-left: 2px; | |
| } | |
| .clr-unpadding-left-2 { | |
| padding-left: -2px; | |
| } | |
| .clr-margin-left-2 { | |
| margin-left: 2px; | |
| } | |
| .clr-unmargin-left-2 { | |
| margin-left: -2px; | |
| } | |
| .clr-padding-top-4 { | |
| padding-top: 4px; | |
| } | |
| .clr-unpadding-top-4 { | |
| padding-top: -4px; | |
| } | |
| .clr-margin-top-4 { | |
| margin-top: 4px; | |
| } | |
| .clr-unmargin-top-4 { | |
| margin-top: -4px; | |
| } | |
| .clr-padding-bottom-4 { | |
| padding-bottom: 4px; | |
| } | |
| .clr-unpadding-bottom-4 { | |
| padding-bottom: -4px; | |
| } | |
| .clr-margin-bottom-4 { | |
| margin-bottom: 4px; | |
| } | |
| .clr-unmargin-bottom-4 { | |
| margin-bottom: -4px; | |
| } | |
| .clr-padding-right-4 { | |
| padding-right: 4px; | |
| } | |
| .clr-unpadding-right-4 { | |
| padding-right: -4px; | |
| } | |
| .clr-margin-right-4 { | |
| margin-right: 4px; | |
| } | |
| .clr-unmargin-right-4 { | |
| margin-right: -4px; | |
| } | |
| .clr-padding-left-4 { | |
| padding-left: 4px; | |
| } | |
| .clr-unpadding-left-4 { | |
| padding-left: -4px; | |
| } | |
| .clr-margin-left-4 { | |
| margin-left: 4px; | |
| } | |
| .clr-unmargin-left-4 { | |
| margin-left: -4px; | |
| } | |
| .clr-padding-top-8 { | |
| padding-top: 8px; | |
| } | |
| .clr-unpadding-top-8 { | |
| padding-top: -8px; | |
| } | |
| .clr-margin-top-8 { | |
| margin-top: 8px; | |
| } | |
| .clr-unmargin-top-8 { | |
| margin-top: -8px; | |
| } | |
| .clr-padding-bottom-8 { | |
| padding-bottom: 8px; | |
| } | |
| .clr-unpadding-bottom-8 { | |
| padding-bottom: -8px; | |
| } | |
| .clr-margin-bottom-8 { | |
| margin-bottom: 8px; | |
| } | |
| .clr-unmargin-bottom-8 { | |
| margin-bottom: -8px; | |
| } | |
| .clr-padding-right-8 { | |
| padding-right: 8px; | |
| } | |
| .clr-unpadding-right-8 { | |
| padding-right: -8px; | |
| } | |
| .clr-margin-right-8 { | |
| margin-right: 8px; | |
| } | |
| .clr-unmargin-right-8 { | |
| margin-right: -8px; | |
| } | |
| .clr-padding-left-8 { | |
| padding-left: 8px; | |
| } | |
| .clr-unpadding-left-8 { | |
| padding-left: -8px; | |
| } | |
| .clr-margin-left-8 { | |
| margin-left: 8px; | |
| } | |
| .clr-unmargin-left-8 { | |
| margin-left: -8px; | |
| } | |
| .clr-padding-top-16 { | |
| padding-top: 16px; | |
| } | |
| .clr-unpadding-top-16 { | |
| padding-top: -16px; | |
| } | |
| .clr-margin-top-16 { | |
| margin-top: 16px; | |
| } | |
| .clr-unmargin-top-16 { | |
| margin-top: -16px; | |
| } | |
| .clr-padding-bottom-16 { | |
| padding-bottom: 16px; | |
| } | |
| .clr-unpadding-bottom-16 { | |
| padding-bottom: -16px; | |
| } | |
| .clr-margin-bottom-16 { | |
| margin-bottom: 16px; | |
| } | |
| .clr-unmargin-bottom-16 { | |
| margin-bottom: -16px; | |
| } | |
| .clr-padding-right-16 { | |
| padding-right: 16px; | |
| } | |
| .clr-unpadding-right-16 { | |
| padding-right: -16px; | |
| } | |
| .clr-margin-right-16 { | |
| margin-right: 16px; | |
| } | |
| .clr-unmargin-right-16 { | |
| margin-right: -16px; | |
| } | |
| .clr-padding-left-16 { | |
| padding-left: 16px; | |
| } | |
| .clr-unpadding-left-16 { | |
| padding-left: -16px; | |
| } | |
| .clr-margin-left-16 { | |
| margin-left: 16px; | |
| } | |
| .clr-unmargin-left-16 { | |
| margin-left: -16px; | |
| } | |
| .clr-padding-top-24 { | |
| padding-top: 24px; | |
| } | |
| .clr-unpadding-top-24 { | |
| padding-top: -24px; | |
| } | |
| .clr-margin-top-24 { | |
| margin-top: 24px; | |
| } | |
| .clr-unmargin-top-24 { | |
| margin-top: -24px; | |
| } | |
| .clr-padding-bottom-24 { | |
| padding-bottom: 24px; | |
| } | |
| .clr-unpadding-bottom-24 { | |
| padding-bottom: -24px; | |
| } | |
| .clr-margin-bottom-24 { | |
| margin-bottom: 24px; | |
| } | |
| .clr-unmargin-bottom-24 { | |
| margin-bottom: -24px; | |
| } | |
| .clr-padding-right-24 { | |
| padding-right: 24px; | |
| } | |
| .clr-unpadding-right-24 { | |
| padding-right: -24px; | |
| } | |
| .clr-margin-right-24 { | |
| margin-right: 24px; | |
| } | |
| .clr-unmargin-right-24 { | |
| margin-right: -24px; | |
| } | |
| .clr-padding-left-24 { | |
| padding-left: 24px; | |
| } | |
| .clr-unpadding-left-24 { | |
| padding-left: -24px; | |
| } | |
| .clr-margin-left-24 { | |
| margin-left: 24px; | |
| } | |
| .clr-unmargin-left-24 { | |
| margin-left: -24px; | |
| } | |
| .clr-padding-top-32 { | |
| padding-top: 32px; | |
| } | |
| .clr-unpadding-top-32 { | |
| padding-top: -32px; | |
| } | |
| .clr-margin-top-32 { | |
| margin-top: 32px; | |
| } | |
| .clr-unmargin-top-32 { | |
| margin-top: -32px; | |
| } | |
| .clr-padding-bottom-32 { | |
| padding-bottom: 32px; | |
| } | |
| .clr-unpadding-bottom-32 { | |
| padding-bottom: -32px; | |
| } | |
| .clr-margin-bottom-32 { | |
| margin-bottom: 32px; | |
| } | |
| .clr-unmargin-bottom-32 { | |
| margin-bottom: -32px; | |
| } | |
| .clr-padding-right-32 { | |
| padding-right: 32px; | |
| } | |
| .clr-unpadding-right-32 { | |
| padding-right: -32px; | |
| } | |
| .clr-margin-right-32 { | |
| margin-right: 32px; | |
| } | |
| .clr-unmargin-right-32 { | |
| margin-right: -32px; | |
| } | |
| .clr-padding-left-32 { | |
| padding-left: 32px; | |
| } | |
| .clr-unpadding-left-32 { | |
| padding-left: -32px; | |
| } | |
| .clr-margin-left-32 { | |
| margin-left: 32px; | |
| } | |
| .clr-unmargin-left-32 { | |
| margin-left: -32px; | |
| } | |
| .clr-padding-top-48 { | |
| padding-top: 48px; | |
| } | |
| .clr-unpadding-top-48 { | |
| padding-top: -48px; | |
| } | |
| .clr-margin-top-48 { | |
| margin-top: 48px; | |
| } | |
| .clr-unmargin-top-48 { | |
| margin-top: -48px; | |
| } | |
| .clr-padding-bottom-48 { | |
| padding-bottom: 48px; | |
| } | |
| .clr-unpadding-bottom-48 { | |
| padding-bottom: -48px; | |
| } | |
| .clr-margin-bottom-48 { | |
| margin-bottom: 48px; | |
| } | |
| .clr-unmargin-bottom-48 { | |
| margin-bottom: -48px; | |
| } | |
| .clr-padding-right-48 { | |
| padding-right: 48px; | |
| } | |
| .clr-unpadding-right-48 { | |
| padding-right: -48px; | |
| } | |
| .clr-margin-right-48 { | |
| margin-right: 48px; | |
| } | |
| .clr-unmargin-right-48 { | |
| margin-right: -48px; | |
| } | |
| .clr-padding-left-48 { | |
| padding-left: 48px; | |
| } | |
| .clr-unpadding-left-48 { | |
| padding-left: -48px; | |
| } | |
| .clr-margin-left-48 { | |
| margin-left: 48px; | |
| } | |
| .clr-unmargin-left-48 { | |
| margin-left: -48px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $heading-color: hsl(198, 20%, 20%); | |
| .clr-h-display { | |
| color: $heading-color; | |
| font-size: 40px; | |
| line-height: 48px; | |
| font-family: "Metropolis"; | |
| font-weight: 500; | |
| letter-spacing: -0.5px; | |
| } | |
| .clr-h-heading { | |
| color: $heading-color; | |
| font-size: 32px; | |
| line-height: 40px; | |
| font-family: "Metropolis"; | |
| font-weight: 500; | |
| letter-spacing: -0.4px; | |
| } | |
| .clr-h-title { | |
| color: $heading-color; | |
| font-size: 24px; | |
| line-height: 32px; | |
| font-family: "Metropolis"; | |
| font-weight: 500; | |
| letter-spacing: -0.2px; | |
| } | |
| .clr-h-section { | |
| color: $heading-color; | |
| font-size: 20px; | |
| line-height: 24px; | |
| font-family: "Metropolis"; | |
| font-weight: 500; | |
| letter-spacing: -0.2px; | |
| } | |
| .clr-h-subsection { | |
| color: $heading-color; | |
| font-size: 16px; | |
| line-height: 20px; | |
| font-family: "Metropolis"; | |
| font-weight: 500; | |
| letter-spacing: -0.2px; | |
| } | |
| .clr-p-message { | |
| color: hsl(198, 8%, 35%); | |
| font-size: 16px; | |
| line-height: 20px; | |
| font-family: "Metropolis"; | |
| font-weight: 400; | |
| letter-spacing: -0.2px; | |
| } | |
| .clr-p-regular { | |
| color: hsl(198, 8%, 35%); | |
| font-size: 14px; | |
| line-height: 20px; | |
| font-family: "Metropolis"; | |
| font-weight: 400; | |
| letter-spacing: -0.1px; | |
| } | |
| .clr-p-secondary { | |
| color: $heading-color; | |
| font-size: 13px; | |
| line-height: 16px; | |
| font-family: "Metropolis"; | |
| font-weight: 400; | |
| letter-spacing: -0.1px; | |
| } | |
| .clr-button { | |
| color: hsl(198, 98%, 40%); | |
| font-size: 13px; | |
| line-height: 16px; | |
| font-family: "Metropolis"; | |
| font-weight: 600; | |
| letter-spacing: -0.2px; | |
| } | |
| .clr-c-regular { | |
| color: $heading-color; | |
| font-size: 11px; | |
| line-height: 16px; | |
| font-family: "Metropolis"; | |
| font-weight: 400; | |
| letter-spacing: 0.2px; | |
| } | |
| .clr-c-medium { | |
| color: $heading-color; | |
| font-size: 10px; | |
| line-height: 12px; | |
| font-family: "Metropolis"; | |
| font-weight: 500; | |
| letter-spacing: 0.5px; | |
| } | |
| $sizes: 1, 2, 4, 8, 16, 24, 32, 48; | |
| $directions: top, bottom, right, left; | |
| @each $size in $sizes { | |
| @each $direction in $directions { | |
| .clr-padding-#{$direction}-#{$size} { | |
| padding-#{$direction}: #{$size}px; | |
| } | |
| .clr-unpadding-#{$direction}-#{$size} { | |
| padding-#{$direction}: -#{$size}px; | |
| } | |
| .clr-margin-#{$direction}-#{$size} { | |
| margin-#{$direction}: #{$size}px; | |
| } | |
| .clr-unmargin-#{$direction}-#{$size} { | |
| margin-#{$direction}: -#{$size}px; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment