Bos Klein is a collaborative agency that brings together experts in the fields of media, design, communications and technology. We are committed to the integrity of our creative process, which provides clients with the tools to effectively establish cultural codes—disseminating brands, stories and strategies; arming our collaborators with a powerful and precise voice within the market and culture.
2. 02
2020
BOSKLEIN
camaro exterior designNascar / Starcom
NASCAR / STARCOM RACING
Starcom Nascar Camaro design for Bank of AmericaStarcom Nascar Camaro design for Bank of America
Roval 400 NAscar race on NBC in Charlotte, NC.Roval 400 NAscar race on NBC in Charlotte, NC.
5. 05
2020
BOSKLEIN
FELLOW
Comprehensive re-brand of North Carolina-based healthcare deviceComprehensive re-brand of North Carolina-based healthcare device
technology company. Project is currently under construction.technology company. Project is currently under construction.
fellow.carefellow.care
Fellow
8. BOSKLEIN
08
2020comprehensive brandingFellow
Primary
Secondary
Fellow UI Style Guide 2019
Color 03
Primary color
(Use except in other cases)
Small orange text/line on white
(e.g. orange outline button)
Orange text/line on
dark gray (for dark mode)
#E03100
#222222 #444444 #777777 #999999 #DDDDDD #F8F8F8 #FFFFFF
#FF4817 #FF724D
Body/heading text
Night mode nav bar
Gray outline buttons
Secondary text
- unselected nav items
- data vis numbers
Night mode
background
Nav icons Desktop backgroundCard border
Navigation border
Data vis lines
Donut chart empty space
Backgrounds
#274CCC
Tertiary
(Accesssiblity Mode Only)
The tertiary color should be used only in instances
where accessibility dictates that there be multiple
colors, and never for aesthetic or brand purposes.
Accessibility problems should be solved first with
wording or iconography, as even a tertiary color is
inaccessible for those with monochromacy or
complete color blindness.
#274CCC
Fellow UI Style Guide 2019
LoIinScreens 10
Sign In
Create Account
Email AddressEmail Address
Password
Sign In
Forgot Password?
Only the login section of the app will use a
full orange background. In this case, the
"colored" button uses a white background
and orange type, while the outline button
uses white outline and white type.
Loading screen uses ‘F logomark’
Loading Screen Login Screen Sign In Screen
Medications
Lipitor
Levothyroxine
Vicodin
Azithromycin
Current Archived
Medications
Lipitor
Levothyroxine
Vicodin
Azithromycin
Current Archived
Medications
Lipitor
Levothyroxine
Vicodin
Azithromycin
Current Archived
This screen shows appropriate Material
theming for tabs and lists.
In-app dialogs should have no drop shadow
and no rounded corners. A transparent black
overlay sits behind the dialog box.
A cancel button always uses the gray outline
button style, while an action should use the
colored button style.
If the app has an optional night mode,
these colors may be used. A lighter, less
saturated version of the orange is used for
text and hairlines for legibility.
#121212 background color
#2C2C2C navbar color
Fellow UI Style Guide 2019
Mobile Screen Design 09
Interior Page Overlay Usage Night Mode
Messages Medications Menu Messages Medications Menu Messages Medications Menu
Alert dialog prompt
ActionCancel
Overlay:40%ppacity,#ffffffcolor
Home
Patients
Messages
Settings
Jane Doe
Home
Compliance Over Time
100%
0%
50%
Dec Jan
2019
Feb Mar Apr Jun Jul Aug Sep Oct
Compliance Rate
82Compliant
%
Wholecare
Pharmacy
Fellow UI Style Guide 2019
Desktop Dashboard Design 12
Navigation
The desktop app uses a navigational
sidebar with Fellow branding at the top.
Secondary/account related pages should
be anchored at the bottom of the sidebar.
Active pages in the sidebar have bold
type, an orange icon, and an orange
marker on the right side.
Cards
In the content area of the dashboard, a 12-
column grid may be used to divide content
into cards and rows. Cards should have
1px borders, no rounded corners, and no
drop shadow.
Cards should not be forced to take up the
maximum available screen width. Many
charts, like paragraphs, are more readable
at around 400-600px wide.
Period 0 days
100%50%0%
Atorvastatin
Chlorthalidone
Acebutolol
Warfarin
Amoxicillin
Compliance by Medication
Cards
Material Design Reference
Fellow UI Style Guide 2019
Data Visualization 1
Using Color
Color in data vis should always be used in
a meaningful way. Multiple colors should
only be used to display additional
secondary variables in the data. The
following colors may be used to
differentiate secondary variables:
100%50%0%
Atorvastatin
Chlorthalidone
Acebutolol
Warfarin
Amoxicillin
Pill Liquid
Horizontal Bar Chart with Multiple Variables
Liquid Inhaler
Male
Donut Chart with Two Categories
Female
62%
38%
100%
0%
50%
Jan
2019
Feb Mar Apr Jun Jul Aug Oct
Line Chart with Multiple Variables
Pill LiquidLiquid Inhaler
100%50%0%
Atorvastatin
Chlorthalidone
Acebutolol
Warfarin
Amoxicillin
Pill Liquid
Horizontal Bar Chart with Multiple Variables
Liquid Inhaler
Male
Donut Chart with Two Categories
Female
62%
38%
100%
0%
50%
Jan
2019
Feb Mar Apr Jun Jul Aug Oct
Line Chart with Multiple Variables
Pill LiquidLiquid Inhaler Nasal Spray
Accessibility Mode Accessibility Mode Accessibility ModeAccessibility Mode
The blues should be used for
accessibility mode and where there are
more variables than can be displayed
with oranges and grays.
#FF4817
#FF4817
#FFABB7
#999999
#444444
#4DCEF6
#274CCC
Input text
Label
Label
Label
Label
Input text
Not a valid email adress
Label
Complete all the required fields
Label
Checkmark Text Fields
Radio button
Switch
Selection controls (checkmarks, radio
buttons, and switches) use orange in their
active state. There are no rounded corners
(on checkmarks) and no drop shadows.
Text fields have no rounded corners. When
active, the label moves up to the top
border. If the input text is invalid, the label,
explainer, and border become orange, and
an error icon appears on the right side.
An error label consists of an orange label
and an error icon. This should be shown
independently of any invalid text inputs at
the top and bottom of the form.
Fellow UI Style Guide 2019
ForO Inputs 07
Text Fields
Selection Controls
Material Design Links
Default state
Hover state
Active state, no text
Active state, text
Error state
Disabled state
DisabledActive Hover Focus
Focus state
Error Label
12. BOSKLEIN
012
2020Year of the Arts
YEAR OF THE ARTS
Commissioned by Utah State University to brand the 2017-18 school year as the Year ofCommissioned by Utah State University to brand the 2017-18 school year as the Year of
the Arts. AKG created an integrated branding campaign designed to increase state-widethe Arts. AKG created an integrated branding campaign designed to increase state-wide
awareness for the quality of the arts at USU, and draw attention to specific targetedawareness for the quality of the arts at USU, and draw attention to specific targeted
events to be held on campus throughout the year. Project also included a calendar/events to be held on campus throughout the year. Project also included a calendar/
events function on website that allowed mulitple agencies to a single source toevents function on website that allowed mulitple agencies to a single source to
populate calendar.populate calendar. yearofthearts.usu.eduyearofthearts.usu.edu
AIGA Award of Excellence,AIGA Award of Excellence, UCDA Silver AwardUCDA Silver Award
21. BOSKLEIN
021
2020Beynd
BEYND
Redesign of website interface for Beynd, a project managementRedesign of website interface for Beynd, a project management
and onboarding application. Project included website re-deign,and onboarding application. Project included website re-deign,
illustration, web content and overall communication strategyillustration, web content and overall communication strategy
content development.content development. www.beynd.comwww.beynd.com
26. BOSKLEIN
026
2020
SYNERGY SUMMIT
Synergy Summit
Comprehensive brand strategy/design for Synergy Summit, anComprehensive brand strategy/design for Synergy Summit, an
exclusive, executive retreat for leaders in the healthcareexclusive, executive retreat for leaders in the healthcare
industry. Project included a new identity system, eventindustry. Project included a new identity system, event
material, wayfinding, and environmental design for the 2019material, wayfinding, and environmental design for the 2019
summit in Newport Beach, CA.summit in Newport Beach, CA. synergysummit.comsynergysummit.com
32. 032
2020
BOSKLEIN
Sinclair Public Affairs
SINCLAIR PUBLIC AFFAIRS
Brand identity and website design for SinclairBrand identity and website design for Sinclair
Public Affairs in Charlotte, North Carolina.Public Affairs in Charlotte, North Carolina.
sinclairpublicaffairs.comsinclairpublicaffairs.com
36. BOSKLEIN
036
2020SRX
SRX
Comprehensive brand strategy/design for SRX, a New York City-Comprehensive brand strategy/design for SRX, a New York City-
based healthcare technology software company. Project includesbased healthcare technology software company. Project includes
brand idenity, web, environmental, trade show booth design,brand idenity, web, environmental, trade show booth design,
communications, advertising and digital marketing.communications, advertising and digital marketing.
srx-tech.comsrx-tech.com
38. BOSKLEIN
038
2020
SRX provides the
most comprehensice
solution for managing
pharmacy spend.
ABOUT SRX
RESULTS
Process We understand that each facility is unique and has different processes,
pharmacy relationships, patient care prtotocols, existing software and
technology, electronic health record systems.
SRX is the only solution that
both automated and integrates
ALL the aspects of your
pharmacy spend through a
single online portal.
This provies you with the tools
and information needed to
realize the lowest net cost
solution for your pharmacy
spend.
contact@srx-tech.com
support@srx-tech.com
833 633 6833
20 E Sunrise Highway, Ste 300
Vally Stream, NY 11581
ADDRESSCONTACT US STAY IN TOUCH
Email Address OK
SRX comprehensive re-brand
42. BOSKLEIN
042
2020
HOLLYWOOD COVERED MAG
Branding and first issue design for Hollywood Covered, aBranding and first issue design for Hollywood Covered, a
celebrity and lifestyle magazine for the hollywood community.celebrity and lifestyle magazine for the hollywood community.
Hollywood Covered Magazine
46. BOSKLEIN
046
2020
ELEVATE MAGAZINE
Branding and design for Elevate Magazine, a quarterlyBranding and design for Elevate Magazine, a quarterly
publication for the Caine College of the Arts.publication for the Caine College of the Arts.
AIGA Award of ExcellenceAIGA Award of Excellence
Elevate MagazineCaine College of the Arts
49. BOSKLEIN
049
2020Vera
VERA
Comprehensive branding for a ‘smart village’ network of 50Comprehensive branding for a ‘smart village’ network of 50
hospitals in India. Project currently under construction.hospitals in India. Project currently under construction.
52. BOSKLEIN
052
2020wayfindingEmma Eccles Jones Building
USU EDUCATION BUILDING
Commissioned by Utah State University to design and implement an innovative wayfindingCommissioned by Utah State University to design and implement an innovative wayfinding
system that would brand the remodel of it’s Emma Eccles Jones education building.system that would brand the remodel of it’s Emma Eccles Jones education building.
Project was in collaboration with Brooks Design Associates (interior design).Project was in collaboration with Brooks Design Associates (interior design).
AIGA Award of ExcellenceAIGA Award of Excellence