![]() ![]() Duet uses “unitless” values to define line-heights, which ensures that the line-height is always relative to the used font-size. Line-height property defines the amount of space above and below inline elements. $z-index-dropdown var(-z-index-dropdown)ĭefault z-index for modal and popup overlays.ĭefault z-index for spinners, stacking on top of overlay.ĭefault z-index for modals that stacks on top of overlays and other elements, but still allows popups to be visible.ĭefault z-index for popups that stacks on top of all other elements. $z-index-mask-buttons var(-z-index-mask-buttons)ĭefault z-index for sticky interface elements.ĭefault z-index for dropdowns which makes sure the dropdown stacks above toasts and sticky elements. ![]() The default z-index for components and elements inside components.ĭefault z-index for masked interface elements.ĭefault z-index for masking interface elements.ĭefault z-index for buttons that should overlap masking interface elements. Exampleĭeep z-index is used to stack something behind everything else. That’s why Duet includes a predefined system to make handling of z-indexes easier. Managing vertical stacking order across large websites and applications can be a painful experience. Use the below defined tokens to set radiuses consistently. $font-size-xxxx-large var(-font-size-xxxx-large)īorder-radius is used to give any element rounded corners. ![]() XXXX-large font size is for marketing purposes and banners. $font-size-xxx-large var(-font-size-xxx-large) XXX-large font size is used for the main heading on desktop. $font-size-xx-large var(-font-size-xx-large) XX-large font size is used for the main heading on tablet size. $font-size-x-large var(-font-size-x-large) X-large font size is used for large sub-headings. Large font size is used for small sub-headings. Medium font size is used for the body text. Small font size should be used sparingly for annotations, descriptions, and similar content. $font-size-x-small var(-font-size-x-small) #Palette sans height androidX-Small font size that is only used in native iOS and Android applications. These tokens should be used for all font sizes throughout the interface to create a predictable and harmonious typographic style. $font-weight-extra-bold var(-font-weight-extra-bold)ĭuet’s typographic scale is designed to work in sync with its spacing scale. $font-weight-bold var(-font-weight-bold)Įxtra bold font weight is used for headings only together with “Heading” font family. $font-weight-semi-bold var(-font-weight-semi-bold)īold font weight is used for headings only together with “Heading” font family. Semi bold font weight is used for buttons and sub headings together with “Text” font family. $font-weight-normal var(-font-weight-normal) Normal font weight is used for body text and form inputs together with “Text” font family. $letter-spacing-heading var(-letter-spacing-heading) Gives tiny amount of negative letter spacing for the page main heading. $font-family-text-turva var(-font-family-text-turva) $font-family-heading-turva var(-font-family-heading-turva) 'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' Should be used for body text and form controls. Text font family uses a font stack that gracefully degrades to default system fonts on different platforms. $font-family-heading var(-font-family-heading) Heading font family uses a font stack that gracefully degrades to default system fonts on different platforms. ![]() 'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' Use the below tokens to set font-families, font-weights and letter-spacing consistently. Text is interface, which is why we’ve spent a great amount of time fine-tuning our typographic choices. Please note that this color should not be used for any other purpose. Exampleĭata visualization color that is accessible with white. Keep in mind that green, red and orange are only used in special cases like form validation and messaging. Colorįor consistency, we use the below defined color palette throughout our interface. We use tokens instead of hard coded values to ensure a better UI consistency across different platforms. What’s new Get help Sign in Color blind mode Low vision modeĭesign tokens are a tech-agnostic way to store variables. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |