User:THE OWL/Sandbox: Difference between revisions
Jump to navigation
Jump to search
m (Redirected page to User:THE OWL/Sandbox/UI Kit/Monolith) Tag: New redirect |
m (Removed redirect to User:THE OWL/Sandbox/UI Kit/Monolith) Tag: Removed redirect |
||
| Line 1: | Line 1: | ||
{{DISPLAYTITLE:User Interface Kit – Monolith}}__NOTOC__ | |||
<center> <p>'''Preview'''</p> </center> | |||
<div style="display:flex; justify-content:center; gap:.5em"><!-- | |||
--> {{link|button|/Main Page|Main Page}} <span style="opacity:.5">·</span> <span> {{link|button|/User page|User page}}</span> <span style="opacity:.5">·</span> {{link|button|/Entity page|Entity page}}</span> <span style="opacity:.5">·</span> {{link|button|/Maps list|List of Maps}}</span> | |||
</div> | |||
{{clr}} | |||
== Colors == | |||
<div style="display:flex; flex-wrap:wrap; gap:1em"> | |||
<div style="display:inherit; gap:.4em"> | |||
<div style="background-color:rgb(41 41 41); outline:1px solid rgb(255 255 255 / 50%); border-radius:50%; padding:.5em .75em"></div> | |||
<div> Island <span style="opacity:.5"> (41 41 41) </span> </div> | |||
</div> | |||
<div style="display:inherit; gap:.4em"> | |||
<div style="background-color:rgb(116 185 224); outline:1px solid rgb(255 255 255 / 50%); border-radius:50%; padding:.5em .75em"></div> | |||
<div> Simple link <span style="opacity:.5"> (116 185 225) </span> </div> | |||
</div> | |||
<div style="display:inherit; gap:.4em"> | |||
<div style="background-color:rgb(150 165 145); outline:1px solid rgb(255 255 255 / 50%); border-radius:50%; padding:.5em .75em"></div> | |||
<div> Code <span style="opacity:.5"> (150 165 145) </span> </div> | |||
</div> | |||
</div> | |||
== Typography == | |||
=== Typeface === | |||
sans-serif <span style="opacity:.5">(general)</span>, monospace <span style="opacity:.5">(for code)</span> | |||
<div style="display:flex; gap:1em; margin-bottom:.5em"> | |||
<div style="background-color:rgb(0 0 0 / 50%); border-radius:6px; padding:1em 3em 2em 1em"> | |||
<div style="font-size:1.5em; font-weight:400; color:rgb(255 255 255 / 85%)"> Aa </div> | |||
<div style=""> Regular <span style="opacity:.5">(400)</span> </div> | |||
</div> | |||
<div style="background-color:rgb(0 0 0 / 50%); border-radius:6px; padding:1em 3em 2em 1em"> | |||
<div style="font-size:1.5em; font-weight:700; color:rgb(255 255 255 / 85%)"> Aa </div> | |||
<div style=""> Bold <span style="opacity:.5">(700)</span> </div> | |||
</div> | |||
<div style="background-color:rgb(0 0 0 / 50%); border-radius:6px; padding:1em 3em 2em 1em"> | |||
<div style="font-size:1.5em; font-weight:900; color:rgb(255 255 255 / 85%)"> Aa </div> | |||
<div style=""> Black <span style="opacity:.5">(900)</span> </div> | |||
</div> | |||
<div style="background-color:rgb(0 0 0 / 50%); border-radius:6px; padding:1em 3em 2em 1em"> | |||
<div style="font-family:monospace; font-size:2.2em; font-weight:400; color:rgb(255 255 255 / 85%)"> Aa </div> | |||
<div style=""> Regular <span style="opacity:.5">(400)</span> </div> | |||
</div> | |||
</div> | |||
== Iconography == | |||
=== Navigation === | |||
It's empty here for now. | |||
== Buttons == | |||
It's empty here for now. | |||
== Selectors & Elements == | |||
=== Checkbox === | |||
It's empty here for now. | |||
=== Toggle button === | |||
It's empty here for now. | |||
=== Tabs === | |||
It's empty here for now. | |||
Revision as of 14:56, 27 May 2024
Preview
Colors
Island (41 41 41)
Simple link (116 185 225)
Code (150 165 145)
Typography
Typeface
sans-serif (general), monospace (for code)
Aa
Regular (400)
Aa
Bold (700)
Aa
Black (900)
Aa
Regular (400)
Iconography
It's empty here for now.
Buttons
It's empty here for now.
Selectors & Elements
Checkbox
It's empty here for now.
Toggle button
It's empty here for now.
Tabs
It's empty here for now.