Color Theory
With a vibrant color palette, Phyn’s color hierarchy holds a delicate balance throughout all of our products. We want to maintain a light and airy feel across all platforms, using Phyn Blue as our primary color on primary pages and actions. All designs must be conscious of contrast, knowing when too much blue is overwhelming, and when too little loses contact with brand.
Primary
For instance, in the Phyn App we use Slate for nearly all typography color, however, this shade can blend or fade too much, making text slightly difficult to read. To counter this, we want to adapt our typography colors to either white or black. Do your best to keep Phyn Blue out of our font library, as it can be illegible or overpowering in most typographic use cases.
Secondary
Our theme across platforms incorporates secondary accent colors into non-ui components such as visual assets. Note that in the Phyn app, we use these colors sparingly, as the same comes into web, with an even more subtle take on accent colors.
Shades of Grey
Our color theory also uses a few percentages of Black. If one of the shades below does not work, feel free to lighten or darken as needed, but be sure to test on several different displays. No text should ever be given a percentage of black less than 32% unless otherwise specified. Dropshadows throughout the site and separation lines may exceed this threshold for design aesthetics to remain “soft”.
Typography
Phyn’s GT Walsheim website font styles are sought to have dynamic ranges according to screen size, type of grid, level of emphasis or hierarchy, and interaction. In order to simplify the system, we have separated fonts into three categories, Page Header, Content and Actions.
Page Image Header Titles
Page header titles with full frame background images typically have larger display font sizes, creating a “typographic” introduction to the content, or overall objective of the page. Sometimes spanning the entire width of the header container, or carefully positioned into place, the text size should be based off of the length of the sentence or word used.
If the title is very short, go big! If the title is long, begins to break on certain widths, try going smaller to 70. If the transitions become too difficult to account for, we may need to consider vw rather than em. Take note that header titles are always white, GT Walsheim Bold.
Page Image Header Titles
Primary font styles are integrated across all of our website’s pages located in nearly every section located below the header.
Headlines - AKA H1
Our Primary Headline font style is GT Walsheim Light at a size of 40 pixels and line height of 52 pixels for tablet and desktop designs. When scaling down to mobile, we will apply the same style with a size of 34 pixels, and a line height of 48.
Paragraphs - AKA P1
Our Primary Paragraph font style is GT Walsheim Regular at a size of 16 pixels, and a line height of 24 pixels for all design breakpoints. This font size should be reflected across all body copy, paragraph texts, with an exception to smaller sizes when specified, or logically breaks in small spaces.
Page Image Header Titles
Content pieces become complex very quickly, so we have some scales set in place that have been consolidated to fit the majority of content scenarios.
On primary pages, depending on the grid, titles capture the headline of the content piece. Similar to our page header “dynamic font system”, Titles will adjust for smaller screens. Keep a close eye on the grid patterns and font sizes, as you will see the difference in sizes shift when the layout of the content breaks down.
Body copy paragraph text is closely paired with titles, also adapting to grid columns, margins, and grid setups. Notice the paragraph sizes are split into Large, Medium, and Small. all of which adapt to grid patterns, column widths, gutter widths, and outer margins.
Some content may need to be adjusted, or font sizes may need to be slightly altered. Take caution when applying new styles. If a font style is not specified here, it may be a special scenario where a more custom style needs to be applied.
Actions
Action based typography pertains to interaction based buttons. These styles are based off of the associated content hierarchy, or direct action the content leads up to.
Primary Buttons are the most common styles sitewide, accompanied by a right arrow. GT Walsheim Medium size 24 for mobile, 22 for Desktop and Tablet.
Rounded Buttons font styles are in all caps, less common, but do map to the app and other digital marketing assets. Used sparingly, we saved this style for actions based on importance relating back to brand and product.
Action Labels are always paired with an icon, sometimes styled in all caps.
Form Button styles are standalone use cases which look similar to action labels. This font style is bold, placing a large emphasis on a page or section action. Only use this style with text fields.
Iconography
Our icon styles align closely with Phyn’s art deco inspired line work often seen in our visuals, patterns, outlined fonts, and even our packaging. We use icons in many ways, functional cues to information, direct actions, product features, identifying water fixtures, and navigation.
While this list continues to grow it is important to keep the our compositions in the simplest form while maintaining visual correlation. Icons that have a narrative trait must be simple, so try not to create a narrative or technical illustration. Be aware of legibility. If a line icon style is not working at a small scale, try to thicken up lines appropriate to scale, or try creating a filled (silouhette) composition. When used sparingly, this style does not conflict with the line art style.
Actions
Site Page Buttons
Product Features: Phyn Plus
Help/FAQ Categories
Product Narrative
Grid Systems
Phyn’s entire website is built using grid system patterns that can fit various types of content. Each page has an introductory header followed by section templates. Depending on how the content flows, we want to structure each individual page properly. We want to place focus on small consumable amounts of information in a staggered format. The flexibility of this grid system allows us to approach the content strategy with multiple layouts, but also maintain a uniformity amongst the whole page, and tie into other page designs. With little effort, we can easily build new pages, edit, remove, or rearrange sections.
Grid Overview
Some instances require custom templates. As seen above, grid number 9 had to be created as a custom template because of the required space need by the illustration, so that we could actually see the details. This type of custom template is only for 1280, where the 768 and 500 versions take on a more common structure.
In order to sustain clean readability and an overall visually structured composition, we want to maintain design principles with proper margin systems that we have put into play sitewide. Primarily, we want a consistent white space, or halo around every piece of content and elements. The common rules set in place should be followed closely. For Desktop there should always be intervals of 200, 100, 50, and 20 pixels of empty space. Most page margins left and right, are always 100 pixels width.
For Tablet, a similar rule applies, where we have a consistent left/right margin of 50 and 20 pixels spacing in between, with an additonal 100 for verticals.
When scaling down to 500, we want to maintain 20 from the sides, and 60 for verticals. As you will see in the diagram above, content should be centered on a vertical axis within sections. Text boxes should be contracting and expanding based on the column widths of browser window.
Grid 1: Large Title and Image :: 1 column
Primary header. Large bold titles, medium text, full screen image, 100, 50, 20 margins apply.
Grid 2: Large Title, Copy and Full Screen Image :: 2 columns
Secondary header. Large bold titles, medium text, body copy, full screen image, 100, 50, 20 margins apply.
Grid 3: Title and Copy :: 1 column
One column includes single headline and defaulted paragraph text, potentially images, but alway keep images within the bounds of the paragraph dimensional widths.
Grid 4: Medium Title, Copy, Half Image :: 2 columns
Primary Content. 50% width images, Large titles, body copy, and primary links. 100, 50, 20 margins apply. Image sizes can fluctuate to offset content blocks patterns. Assets are scaled to 1024 width for tablet and desktop breakpoints.
Grid 5: Med-Small Title, Copy :: 2 columns
Medium to large titles, body copy. Groups also dual card systems. 100, 50, 20 margins apply.
Grid 6: Small Title, Copy, Image :: 3 columns
Small image or icon, Medium titles, body copy. Groups also dual card systems. 100, 50, and 30 margins apply.
Note when designing with 3-column grids be sure to export assets from mobile widths for clean results on desktop and tablet. Only one asset is truly needed.
Grid 7: Medium-Large Title, Icon, Small Title, Copy :: 2 columns
Medum-Large Title, Icon only, Small titles, Small body copy. 100, 50, and 20 margins apply. Note icons will be scaled up to a larger size when on mobile. Font sizes will also increase using VW. Adjusted centering on vertical axis depending on the length of paragraphs. Using small body copy, the paragraphs should fit snug into desktop container sizes, adjust overall height of container in tablet to fit with proper margins. Mobile will always be significantly taller once elements stack.
Grid 8: Medium Title, Icon, Small Title, Copy :: 4 columns
Large title, medium to small icon, medium to small title, small body copy. 100, 50, and 20 margins apply. Be sure to place a proper amount of spacing between stacks of content. Maintain space consistency accross all breakpoints. Icons or illustrations can be used, be cautious of scaling versus sizing, keep visuals consistent.
Grid 9: Image, Medium Title, Copy :: 1 column
A custom grid template should only be used on images that require either full width, or in between sizes to visually convey complex detail such as a diagram.
Note this style is only custom on desktop. Designer must create a responsive image to account for this.
UI Components
Our web components are designed with clarity which play a very important role in the overall goal of the website; to inspire the world to conserve, protect, and save. We want to direct every individual on a clear defined path, to relate to others, and have the ability to easily perform funcitons, and navigate through our ecommerce and knowledge based design.
Badges
Used only in the page navigation header, this particular badge pertains to the total number of items inside of the shopping cart. The cart badge behaviour appears when one has a product in their shopping cart. We are using shopify plugins, so the cart icon may appear on the right hand side of the browser window.
Banners
Pencil Banners:
This type of banner is rarely used, however, when placed into web, the banner should take very little space, maintaining position at the top of the browser window. As you scroll, banner should disappear until you scroll to top of page.
Cookies Banner:
Set to web standards, cookie banner should only appear on the first visit to the website. Applicable to all countries, we provide an option to accept or decline, with an additional link to our privacy policy.
Buttons