Design System
A living reference for every component — powered by UIkit 3.
Colors
Configurable in Design Settings.
--dino-primary
--dino-secondary
--dino-success
--dino-danger
--dino-warning
Typography
Headings
Heading Level 1
The quick brown fox jumps over the lazy dog. This paragraph demonstrates the vertical rhythm and spacing between a level-one heading and body text. Typography is the craft of endowing human language with a durable visual form.
Heading Level 2
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Heading Level 3
Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.
Heading Level 4
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper.
Heading Level 5
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo.
Heading Level 6
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient.
Display Headings
Heading 2XLarge
Heading XLarge
Heading Large
Heading Medium
Heading Small
Lead Paragraph
This is a lead paragraph. It stands out from regular body text. Use it for introductions or summaries that need extra visual weight.
Inline Semantics
This sentence contains bold text, italicized text,
highlighted text, deleted text, inserted text,
small text, inline code, a text link,
CSS, subscript, and superscript.
Text Utilities
.uk-text-left
.uk-text-center
.uk-text-right
.uk-text-lowercase
.uk-text-uppercase
.uk-text-capitalize
Font Weights
.uk-text-light — The quick brown fox jumps over the lazy dog
.uk-text-normal — The quick brown fox jumps over the lazy dog
.uk-text-bold — The quick brown fox jumps over the lazy dog
.uk-text-bolder — The quick brown fox jumps over the lazy dog
Links
States
Default link · Muted link · Text link · Heading link · Reset link
Link in body text
This paragraph contains an inline link that flows naturally with surrounding text. Links should be clearly distinguishable from body text through color and underlines. Another link follows shortly after to show density.
Blockquote
Design is not just what it looks like and feels like. Design is how it works.
Good design is as little design as possible. Less, but better — because it concentrates on the essential aspects, and the products are not burdened with non-essentials.
Styles come and go. Good design is a language, not a style.
Lists
Unordered
- First item in the list
- Second item with more text to demonstrate how lists handle longer content wrapping across multiple lines
- Nested item one
- Nested item two
- Third item
- Fourth item that demonstrates spacing behavior
Ordered
- Prepare workspace and gather materials
- Review project requirements and specifications
- Implement core functionality
- Write unit tests first
- Implement feature
- Refactor and optimize
- Deploy and monitor
Unstyled
- This is an unstyled list item
- No bullets, no extra padding
- Useful for navigation and menus
Inline
Code
Inline
Use the uk-button class for all button elements. The uk-button-primary modifier adds the primary color.
Block
<button class="uk-button uk-button-primary">
Click Me
</button>
<a href="#" class="uk-button uk-button-default">
Learn More
</a>Forms
Text Input
Input States
Email & Password
Select
Textarea
Checkbox & Radio
Grid System
UIkit's flexbox grid with responsive breakpoints.
Equal Width
Responsive Columns
Spacing Utilities
UIkit's margin and padding utilities.
Padding
.uk-padding-remove.uk-padding-small.uk-padding.uk-padding-largeMargin
.uk-margin-remove.uk-margin-small.uk-margin.uk-margin-medium.uk-margin-large