sandwichUI
from the team at 
Last updated: 24 May 2017
sandwichUI
from the team at
Last updated: 24 May 2017
The logo ALWAYS has at least 15px of padding on all sides of it. This clearspace doesn't have to come from padding on the image itself, it could come from the padding or margins of a containing element on one or more sides, but there MUST be 15px of clearspace on all four sides of the logo anytime it is used.
Typography is at the heart of the entire SandwichUI design system. The Simppler applications are very data heavy, most of it text, so having a solid typographic foundation is what holds the whole system together. It also gives us a unique image in a landscape full of FlatUI clones. We have taken information that traditionally has existed in forms and on paper and made it interactive without adding unnecessary layers of decoration on top. The system makes all of Simppler's data beautiful, legible, and easy to consume so our users can get back to the other work that is part of their day.
The typographic system is built on a 6px baseline grid. The baseline grid is the foundation of a beautiful, typography-centered UI.
There is a Sass variable, $baseline-grid-size, that allows you to easily specify line-height, top and bottom padding, and top and bottom margins in baseline grid units. All vertical measurements should be made in baseline grid units to make sure elements are on the grid.
The base Paragraph style is copy set at 16px/24px, with a bottom-margin of 18px (three baseline grid units) and no padding. Paragraphs are initially limited to a max-width of 635px, regardless of layout, to provide a more comfortable line length. This limit applies to longer-form copy in the system, but this max-width will need to be adjusted if the type size changes to accommodate a comfortable to read line length.
These are the primary type styles and their roles in the application.
Page headings |
||
Page title |
40px/48px |
Francois One |
Subtitle / section header |
24px/30px |
Open Sans Light |
Subsection header |
14px/18px |
Open Sans Semibold |
Prospect card styles |
||
Card title |
26px/30px |
Francois One |
Card subtitle |
14px/18px |
Open Sans Regular |
Card location |
12px/12px |
Open Sans Regular |
Card list primary |
18px/24px |
Open Sans light |
Card list secondary |
18px/24px |
Open Sans bold |
Body copy styles |
||
|
Body text |
16px/24px |
Open Sans Regular |
|
Bold body text |
16px/24px |
Open Sans Semibold |
|
Form labels |
16px/24px |
Open Sans Light |
|
Captions |
13px/18px |
Open Sans Light |
Hyperlinks are rare in the Simppler applications. Most actions are initiated with a button or other ore complex control. When links do occur they are styled to standout from their surrounding text and call attention to themselves. This means overuse can lead to a very cluttered, frantic feeling page.
Butcher semiotics selfies kale chips. Offal ramps mustache art party helvetica unicorn. Flannel hoodie fap sartorial offal, blog microdosing seitan tattooed hammock truffaut PBR&B small batch. Offal pork belly pug, occupy vape vinyl venmo microdosing austin poke. 3 wolf moon knausgaard beard listicle enamel pin. This is a hyperlink in it's natural environment, yo. Lo-fi sriracha crucifix, gentrify activated charcoal put a bird on it celiac cardigan organic forage single-origin coffee man bun offal wayfarers pok pok. Stumptown waistcoat pickled humblebrag, poutine live-edge try-hard raclette cray. Thanks hipster ipsum!
The primary color scheme for SandwichUI is a monochromatic pallet based around a bright blue that we call Simppler Blue. Every color in SandwichUI is a tint or shade of blue, an accent, or white. In almost all cases backgrounds are white. Reversed text on a dark background is only used in very specific cases to show a component is active, has focus, or needs to draw attention to itself. Reversed text is NEVER used for large sections of copy.
Colors from the primary palette should be used most frequently, with a focus on legibility and a good rhythm. Tints and shades of the primary colors are acceptable as long as they are used occasionally and their use supports the structure of the overall composition. The colors in the accent palette should be used very occasionally, to highlight important information or otherwise make an element standout from the rest of it's surroundings. The primary use for them in the system is to highlight danger and success.
The dot-screen textures should be used infrequently, as an accent to break up layouts that would otherwise be monotonous, highlight important sections of information, or differentiate sections from each other. Any given layout or component should only ever contain one dot-screen.
These are the icons that are currently in the system. Icons are used only when the action they are representing is either secondary in the component, part of a toolbar, or they are a link out to a well known communication channel or social network.
Follow job
Archive job
Edit job
Repost job
Hot job
Referral bonus
Share job
Search field icon
Single down arrow
Double up arrow
Double down arrow
Recruiter to talent message
Phone number
About.me
Angel List
Dribbble
Foursquare
Github
Google Plus
Medium
Quora
Stack Overflow
Tumblr
Wordpress
Yahoo
Youtube
Copy in the application should be friendly, approachable, and professional. Simppler is a tool for professionals, so an overly familiar voice is not appropriate, but overly formal one is boring and generic. Ideas are always expressed as complete sentences, not fragments. A session with Simppler should feel like a conversation with a cool, friendly co-worker.
All copy is displayed in sentence case. (e.g. "Welcome to the best employee referrals application you've ever used.") All sentences should end in appropriate punctuation unless they are a list item, unless the sentence is a question. Exclamation points should be limited in their use. Simppler's voice is a friendly co-worker, not an overly excited one.
All interactive text should be an action the user can take or a place she can go. (e.g. "Send a message", "Recommendations") Button labels should be active in voice, and may omit subjects and objects if they are strongly implied by the context of the button (e.g. "Send message" instead of "Send Sally Candidate a message")