Styleguide
COLOR PALETTE
Primary
|
#0a233f
blue |
#a7a8a9
gray |
Secondary
|
#e9e9ea
lightgray |
#00b2e2
cyan |
#cde7f3
lightcyan |
|
Note: 香港六合彩开奖结果2023 Aqua Blue (cyan) text is not to be used on white backgrounds in digital designs (web or social media) as it is not ADA compliant. |
||
Additional Colors
|
#efefef
grayLight
Main 香港六合彩开奖结果2023 Navigation
|
#D02433
red
Notifications
|
#236595
lapis
Links
|
||
Fonts
The website uses Google Fonts .
Headline and Text
Style Changes (Effective December 16, 2024):
- Heading One: Now in all uppercase and centered (non-background version).
- Heading Three and Four: Reduced size with a smaller gap between the heading and paragraph.
- Heading Five: Smaller gap between the heading and paragraph.
HEADING ONE
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.
Heading Two
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.
Heading Three
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.
Heading Four
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.
Heading Five
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.
h2.headingGray
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.
h3.headingGray
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.
h4.headingGray
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.
h5.headingGray
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.
h2.cyan
For cyan h2 over blue backgrounds.
h2.reverse-blue
h2.reverse-gray
h2.reverse-cyan
For reverse bar colored h2 headings.
This is a notification.
Accents
normal horizontal rule
hr.blue
hr.cyan
hr.gray
Quotes
Style Changes (Effective December 16, 2024):
- Block Quotes: All block quotes will be displayed in Open Sans Italic font.
- White Background Quotes: The design of quotes with a white background has been updated to enhance readability and visual appeal.
This is a blockquote. This is a blockquote. This is a blockquote. This is a blockquote. This is a blockquote.
This is a quote in a blue box
Intro Paragraph
Style Addition (Effective December 16, 2024):
This new format should only be used on the first introduction paragraph on a page.
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.
Highlights
Floats
Uses the classes .floatLeft and .floatRight. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ligula odio, imperdiet nec volutpat et, commodo eu massa. Nulla nec nunc ac eros lobortis tristique pretium vitae mi. Donec vitae purus justo. Ut id neque a neque lacinia volutpat nec ut urna. Sed turpis massa, dignissim eu pulvinar id, mattis et nibh. 
Mauris malesuada ligula quis neque pharetra aliquet sagittis quam suscipit. Donec est sem, porttitor consequat malesuada luctus, porttitor tempor sem. Sed eu nisi a ligula pulvinar consequat. Donec cursus dui nec sem sagittis vestibulum. Nullam non nulla magna, consequat convallis velit. Nullam fermentum porta enim sit amet tristique. Aliquam fermentum nibh at ligula lacinia laoreet interdum urna sagittis. Vivamus dui ligula, vestibulum vel interdum consequat, pretium non lectus. Mauris nisi ipsum, varius vitae dapibus sit amet, pretium eu lacus. Maecenas lorem nulla, blandit mollis commodo ac, ultricies sed magna. Nunc auctor suscipit justo, in pulvinar felis rhoncus sit amet. Donec adipiscing convallis purus id cursus. Quisque consectetur accumsan elit ac venenatis. Sed at sapien vel tortor molestie dictum. Mauris vitae risus vel nibh feugiat porta eget eu lectus. Nulla tristique, diam ac imperdiet rhoncus, risus ligula laoreet sem, vel consectetur odio elit ut odio. Maecenas lorem metus, laoreet at venenatis in, dictum non odio.
Color Blocks
Blue Block
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.
Gray Block
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.
Cyan Block
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.
| Type | Summer 2021 | Fall 2021 | Spring 2021 |
|---|---|---|---|
| GPA | 3.0 - 3.4 | 3.5 - 4.4 | 3.0 - 3.4 |
| SAT | 1050 - 1170 | 1180 - 1300 | 1050 - 1170 |
| ACT | 20 - 23 | 24 - 27 | 20 - 23 |
| Type | Summer 2021 | Fall 2021 | Spring 2021 |
|---|---|---|---|
| GPA | 3.0 - 3.4 | 3.5 - 4.4 | 3.0 - 3.4 |
| SAT | 1050 - 1170 | 1180 - 1300 | 1050 - 1170 |
| ACT | 20 - 23 | 24 - 27 | 20 - 23 |
| Type | Summer 2021 | Fall 2021 | Spring 2021 |
|---|---|---|---|
| GPA | 3.0 - 3.4 | 3.5 - 4.4 | 3.0 - 3.4 |
| SAT | 1050 - 1170 | 1180 - 1300 | 1050 - 1170 |
| ACT | 20 - 23 | 24 - 27 | 20 - 23 |
| Type | Summer 2021 | Fall 2021 | Spring 2021 |
|---|---|---|---|
| GPA | 3.0 - 3.4 | 3.5 - 4.4 | 3.0 - 3.4 |
| SAT | 1050 - 1170 | 1180 - 1300 | 1050 - 1170 |
| ACT | 20 - 23 | 24 - 27 | 20 - 23 |