ZEPHYR
|Design System
Components
Universal
Components
Page Header
Desktop - Light
Desktop - Dark
Mobile - Light
Mobile - Dark
- Displays the page title (level 1 header) and features breadcrumbs for navigating backwards.
- May use background images.
- Mobile headers display only one level back in breadcrumbs.
Home Page
Components
Hero Section
Desktop
Light
Dark
Mobile
Light
Dark
- First thing user sees on entering website.
- May use background images and any number of relevant controls and links.
- May contain more than one slide with different content, with controls to navigate between them.
CTA Section
Desktop
Light
Dark
Mobile
Light
Dark
- Very similar to hero section.
- Usually focused on a single task.
- May contain any number of relevant controls, media, and links.
- Found sprinkled generously all over the page.
Secondary Page
Components
Forms
Light
Dark
- Forms facilitate user input.
- May contain various kinds of input controls.
- Appears the same on both desktop and mobile. May show multiple fields in one row on wider screens.
Modals
Light
Dark
- Helps send users a message or have them confirm a decision.
- May contain a title, body, and buttons representing various actions.
- Must be dismissible through a close button AND by clicking or tapping the background unless a response is critical.
Alerts
Desktop
Success
Information
Mobile
Danger
Warning
- Helps display a message to the user on any part of the webpage.
- Can use the displayed color schemes or black on white/white on black depending on the theme.
- May be dismissible. May also contain text-only buttons to perform simple actions like undo.
Style Guide
Typography
Header Fonts
Heading 1, Titillium Web, 64px
Heading 2, Titillium Web, 48px
Heading 3, Montserrat, 32px
Heading 4, Montserrat, 24px
Heading 5, Montserrat, 18px
Heading 6, Montserrat, 14px
Paragraph Font
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci asperiores atque autem cum ipsa nostrum possimus sed voluptatibus. Dolore dolorem doloribus eum impedit laborum maiores mollitia nihil omnis, quaerat quos!
- Both base and accent fonts are sans serif to give the website a modern feel.
- Line height is generally 1 and word/letter spacing is usually normal.
- Titles may have bold and thin variations with more letter spacing (0.06em).
Colors
Text and Background
Basic - Dark
#666
#333
#000
Basic - Light
#fff
#ccc
#999
Accent
Primary
#b90
#970
#750
Secondary
#b9f
#209
#106
Other
Danger, Warning, Success, & Info
#666
#333
#000
#000
- Shades of black, white, blue, and gold.
- Show dark text on light backgrounds by default, and light text on dark backgrounds in dark variants.