1.1 Colors
Color Scheme Reference
-
10%#1A1A1A
-
20%#333333
-
30%#4D4D4D
-
40%#666666
-
50%#888888
-
60%#999999
-
70%#B3B3B3
-
80%#CCCCCC
-
87%#DEDEDE
-
90%#E5E5E5
-
95%#F2F2F2
-
-#0F538A
-
Alt#47A1EB
-
Accent#0D4573
-
Hover#E8305E
-
-#709DC2
-
Alt#DBE7F0
-
Accent#C9DAE8
-
-#DEDEDE
-
Alt#B3B3B3
-
Info#31708f
-
Danger#a94442
-
Warning#8a6d3b
-
Success#3c763d
-
Info#d9edf7
-
Danger#f2dede
-
Warning#fcf8e3
-
Success#dff0d8
-
Primary#146EBB - #47A1EB
-
Secondary#C9DAE8 - #DBE7F0
-
Gray#E5E5E5 - #FFFFFF
-
Accent#B5C4D1 - #C9DAE8
-
Primary#47A1EB - #146EBB
-
Secondary#DBE7F0 - #C9DAE8
-
Gray#FFFFFF - #E5E5E5
-
Accent#C9DAE8 - #B5C4D1
1.2 Fonts
Font Reference
-
Aa
REGULAR
-
Aa
MEDIUM
-
Aa
SEMIBOLD
-
Aa
BOLD
-
Aa
REGULAR
-
Aa
MEDIUM
-
Aa
SEMIBOLD
-
Aa
BOLD
-
Aa
REGULAR
-
Aa
MEDIUM
-
Aa
SEMIBOLD
-
Aa
BOLD
1.3 Type
Common Typography
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
789 Main Ave, Suite 707
San Francisco, CA 12345
P: (123) 456-7890 Full Name
first.last@example.com
HTML is the standard markup language used to create web pages.
You can use the mark tag to highlighttext.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
rendered as bold text
rendered as italicized text
1.4 Lists
Common styles for list elements
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
- Lorem ipsum dolor sit amet.
- Dicta optio cumque dolore hic ea facilis
- Minus, possimus, veniam, incidunt eligendi
- Quidem laborum cum harum ullam iure sit eum
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
1.5 Forms
Common styles for form elements
<form class="form" role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="form-note">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="button">Submit</button> </form>
<form class="form-inline" role="form"> <div class="form-group"> <div class="form-control-group"> <div class="form-control-group-addon"><i class="fa fa-at"></i></div> <input class="form-control" type="email" placeholder="Enter email"> </div> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="button">Sign in</button> </form>
<form class="form" action=""> <div class="checkbox form-highlight"> <label> <input type="checkbox"> <em>A far more important option</em> <span class="form-note">It will surely do something magical.</span> </label> </div> <div class="radio"> <label> <input type="radio"> Available for hire <span class="form-note">This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!</span> </label> </div> </form>
<form class="form" action=""> <div class="form-control-group"> <input class="form-control" type="text" placeholder="Username"> <span class="form-control-group-button"> <button class="button"> <i class="fa fa-search"></i> <span class="sr-only">GO</span> </button> </span> </div> </form>
1.6 Tables
Common styles for table elements
Table
# | First Name | Last Name | Username |
---|---|---|---|
1 | John | Smith | @jSmith |
2 | George | Washington | @gWash |
3 | Larry | Bird | @Condor |
:hover
# | First Name | Last Name | Username |
---|---|---|---|
1 | John | Smith | @jSmith |
2 | George | Washington | @gWash |
3 | Larry | Bird | @Condor |
Table
# | First Name | Last Name | Username |
---|---|---|---|
1 | John | Smith | @jSmith |
2 | George | Washington | @gWash |
3 | Larry | Bird | @Condor |
:hover
# | First Name | Last Name | Username |
---|---|---|---|
1 | John | Smith | @jSmith |
2 | George | Washington | @gWash |
3 | Larry | Bird | @Condor |
Table
# | First Name | Last Name | Username |
---|---|---|---|
1 | John | Smith | @jSmith |
2 | George | Washington | @gWash |
3 | Larry | Bird | @Condor |
:hover
# | First Name | Last Name | Username |
---|---|---|---|
1 | John | Smith | @jSmith |
2 | George | Washington | @gWash |
3 | Larry | Bird | @Condor |
Table
# | First Name | Last Name | Username |
---|---|---|---|
1 | John | Smith | @jSmith |
2 | George | Washington | @gWash |
3 | Larry | Bird | @Condor |
:hover
# | First Name | Last Name | Username |
---|---|---|---|
1 | John | Smith | @jSmith |
2 | George | Washington | @gWash |
3 | Larry | Bird | @Condor |
Table
# | First Name | Last Name | Username |
---|---|---|---|
1 | John | Smith | @jSmith |
2 | George | Washington | @gWash |
3 | Larry | Bird | @Condor |
:hover
# | First Name | Last Name | Username |
---|---|---|---|
1 | John | Smith | @jSmith |
2 | George | Washington | @gWash |
3 | Larry | Bird | @Condor |
1.7 Code
Common styles for code elements
<section>
should be wrapped as inline.
<p>Sample text here...</p>
2.1 Icons
Icon Reference
-
NEW
-
LOCK
-
FORWARD
-
REPLY
-
CARET
-
TOOLS
-
REGISTER
-
HOME
-
FAQ
-
NOTIFICATION
-
PM
-
LOGIN / LOGOUT
-
SEARCH
-
ADV SEARCH
-
PAGE JUMP
-
JUMP TO
-
PROFILE
-
UCP
-
MCP
-
ADMIN
-
DISPLAY & SORT
-
MOD TOOLS
-
MARK
-
SUBSCRIBE
-
UNSUBSCRIBE
-
BUMP
-
BOOKMARK
-
SEND EMAIL
-
PRINT
-
DOWNLOAD
-
POST MENU
-
EDIT
-
DELETE
-
INFO
-
REPORT
-
REPORTED
-
APPROVED
-
UNAPPROVED
-
WARN
-
QUOTE
-
RTL QUOTE
-
MEMBERS
-
TEAM
-
DELETE COOKIES
-
DOWN
-
UP
-
LEFT
-
RIGHT
-
BOLD
-
ITALIC
-
UNDERLINE
-
QUOTE
-
CODE
-
LIST
-
LIST=
-
LIST ITEM
-
IMAGE
-
URL
-
FONT SIZE
-
COLOR
-
STRIKE
-
GIST
-
SMILES
-
ALERT CLOSE
-
TOP
-
EXPAND
-
COLLAPSE
-
PAGES
-
ATTACH
-
TOPIC DELETED
-
LATEST / NEWEST
-
SUBFORUM
-
POLL
-
FORUM
-
HAS SUBFORUMS
-
LOCKED
-
LINKED
-
TOPIC
-
HOT
-
STICKY
-
ANNOUNCEMENT
-
MOVED
-
CONTACT
-
PM
-
EMAIL
-
WWW
-
JABBER
-
SKYPE
-
FEED
-
FACEBOOK
-
TWITTER
-
GOOGLE
-
YAHOO
-
YOUTUBE
-
AIM
-
ICQ
<i class="fa fa-twitter"></i>