Rotala UI Style Guide
Customization focused UI System
Color Palette
Black & White
Gray
Red
Orange
Yellow
Green
Teal
Blue
Indigo
Purple
Pink
Font
Family
system-ui
-apple-system
BlinkMacSystemFont
"Segoe UI"
Roboto
"Helvetica Neue"
Arial
"Noto Sans"
sans-serif
"Apple Color Emoji"
"Segoe UI Emoji"
"Segoe UI Symbol"
"Noto Color Emoji"
Style
weight
italic
Typography
Headings
h1. Heading 40px
h2. Heading 32px
h3. Heading 28px
h4. Heading 24px
h5. Heading 20px
h6. Heading 16px
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Address
Rotala, Inc.Semantic Elements
abbr
strongb
cite
Hello World!code
del
em
i
ins
kbd
mark
ruby
s
samp
sub
sup
time
u
var
Code
<!-- code snippets -->
F12
<p>This is an example</p>
<a>This is an example</a>
<span>This is an example</span>
<b>This is an example</b>
List
- Item 1
- Item 2
- Sub-Item 1
- Sub-Item 2
- Item 3
Unordered List
- Item 1
- Item 2
- Sub-Item 1
- Sub-Item 1
- Item 3
Ordered List
Description List
- Item 1
- Description for Item 1
- Item 2
- Description for Item 2
- Item 3
- Description for Item 3
Components
Accordion
checkbox accordion
radio accordion
Avatar
avatar initial
avatar image
avatar initial rounded
avatar image rounded
Badge
status badge
text badge
Breadcrumb
default
disabled
Button
default
disabled
Checkbox
default
disabled
Drawer
left
right
top
bottom
Divider
default
Input
input default
input disabled
textarea default
textarea disabled
Link
default
linkdisabled
linkMenu
default
disabled
Modal
default
Default Modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Notification
This is a notificaton. This is a notification. This is a notification
This is a notificaton. This is a notification. This is a notification
This is a notificaton. This is a notification. This is a notification
This is a notificaton. This is a notification. This is a notification
This is a notificaton. This is a notification. This is a notification
This is a notificaton. This is a notification. This is a notification
Pagination
Popover
Popover
This is the content of the Popover.
Popover
This is the content of the Popover.
Popover
This is the content of the Popover.
Popover
This is the content of the Popover.
Popover
This is the content of the Popover.
Popover
This is the content of the Popover.
Popover
This is the content of the Popover.
Popover
This is the content of the Popover.
Radio
default
disabled
Select
single
single disabled
multiple
multiple disabled
Tab
Table Group
default
| Name | Manufacturer | Price |
|---|---|---|
| Gift Box | Alpha Inc. | $1.5 |
| Table Sheet | Beta Manufacture | $9 |
| Notebook | Cheer co. | $3 |