Typography | BriteLab Design System | 51BODY TEXT FONT:Roboto Use Roboto with generous leading of 140% em for body text. Roboto should also be used for captions and descriptors.FRIENDLY, MODERN AND LEGIBLE This font is optimized for legibility in long form text, especially on screen.Type is a visual representation of speech.The typographic voice of Roboto is open, inclusive and inviting.ABCDEFGHIJKLMNOPQRSTUVWXYZ abcedefghijklmnopqrstuvwxyz 0123456789Britelab empowers new product innovation for complex The client team leverages their unmatched wisdom andhardware like never before. cumulative expertise as former entrepreneurs and OEMs to protect clients from the multitude of pitfalls that canOur clients co-locate in our local Silicon Valley facility threaten their success.with a devoted team of our experts spanning alldisciplines of product development, working in close BriteLab’s entire operation is optimized to be nimble,collaboration toward common goals. agile, and flexible, allowing teams to respond swiftly to changes in project dynamics while maintaining theBriteLab’s world-class strategists, designers, engineers, highest quality outcomes.machinists and manufacturing specialists work face toface with clients in our state of the art facility to guide Working with BriteLab is more than an agreement. We’re in itthem through the complicated maze of hardware with you to make amazing things happen. Aspiring together.product development.
52 | BriteLab Design System | PhotographyPhotographyReal People at WorkReportage-style photography will capture candidmoments in time, conveying the creativity, problem-solving, and high-touch experience that can only be hadin a collaborative work environment like BriteLab .This collection will feature real people; BriteLab expertsand clients, working together in harmony to developsuccessful new products.The high design and creativity of the work environmentat BriteLab will be showcased.Photos will be shot with slight over exposure to dramatizelight and create a romantic feel. Shallow depth of fieldwill place emphasis on the subject and create an artisticaura in the frames.Photos are to be converted to grayscale and a slightnoise filter will be applied to create an authentic, naturalfilm-grain feel.
Photography | BriteLab Design System | 53
54 | BriteLab Deesign System | PhotographyPhotographyProduct ShotsUse color in product shots to help them stand out fromthe environmental shots.As we add new images to the growing collection,emphasize people interacting with the products toreinforce the human attribute of the brand.
Photography | BriteLab Design System | 55
56 | BriteLab Design System | The ArrowThe ArrowThe arrow can be used creatively as a graphic device.As with all other elements in the design system, usegood judgement when applying the arrow. Be carefulnot to overdo it.
The Arrow | BriteLab Design System | 57 The arrows can be arranged in overlapping combinations at different sizes as an interesting design mechanism, symbolizing the movement, dynamism, and kinetic nature of the BriteLab working environment. On a second read, the arrows pointing in different ways contrast with their orderly composition in the logomark, metaphorically representing convergence and divergence as a healthy aspect of creative collaboration between team members.Overlapping arrows in outlines with interesting crop applied. TITLE GOES HEREUsing the arrow shape creatively as a container for title blocks on key Overlapping arrows with gradient fills and blend modes applied to createlayouts is one interesting way to incorporate this graphic device into a feeling of rich depth and brightness.functional designs.
58 | BriteLab Design System | PatternsPatternsThe logomark and the plus symbol derived from the figure groundin the logomark can be used in interesting pattern designs andapplied as background textures in layouts where appropriate.The plus symbol arranged into a “swarm” pattern as another way to express the movement, dynamism and kinetic nautre of BriteLab’s creative,collaborative, team-based working environment.
Patterns | BriteLab Design System | 59The logomark arranged into an orderly, subtle pattern design. One of the logomark symbols can be filled with a pure color from the BriteLab palette.The location of the colored symbol should fall roughly within the golden section of the layout.
60 | BriteLab Design System | IconsIconsThis initial set of icons was created DESIGN ENGINEERING PROTOTYPING M A N U FA C T U R I N Gto represent the main service linesthat make up the BriteLab offering,and some key benefits that clientscan expect to receive.This set established a minimalistdirection for the icon style. DESIGN ENGINEERING PROTOTYPING M A N U FA C T U R I N G TIME TO REVENUE QUALITY IP SECURITY LOWER TOTAL COST TIME TO REVENUE QUALITY IP SECURITY LOWER TOTAL COST
Icons | BriteLab Design System | 61SEMICONDUCTOR MEDICAL DEVICES TELECOM AUTOMOTIVE This set of icons was created to represent the industries that BriteLabENERGY COMPLEX AEROSPACE speciallizes in. CONSUMER Heavier line weight was applied to this set for extra contrast. All of these icons were custom drawn by hand. As more icons are added to the library, careful consideration should be given to maintaining this system and gracefully evolving it over time. The best way to do that is to have a professional illustrator create icons as needed, rather than borrowing from existing libraries found on the Internet, which will create a disjointed look over time.
62 | BriteLab Design System | Charts and InfographicsCharts and InfographicsCharts will likely be utlized in PowerPoint presentations Select the style options from the menu that have theso the chart styles will be governed mostly by what least decoration. The examples below show a clusteredPowerPoint makes easy for users to select from the column chart and a donut chart with a flat applicaton ofstyles set up within the BriteLab theme. the BriteLab brand colors.
Charts and Infographics | BriteLab Design System | 63When creating information graphics, strive for clarity andminimize decoration.
64 | Section | Subsection
Subsection | Section | 65EXAMPLES IN CONTEXT
66 | Examples in Context | StationeryStationery
Stationery | Examples in Context | 67Robert de Neve 6341 San Ignacio AvenuePresident & CEO San Jose, CA 95119 650.961.0671 office 408.691.2381 mobile [email protected] britelab.com
68 | Examples in Context | Business TemplatesWord Doc TemplateTo use the BriteLab Word Doc template, you need to havethe Roboto font installed on your computer. The marginsare set up in the document. The text styles depictedbelow are available through the Styles menu. 2” 3” 2” 2” 1”The logo and contact info only appear on the optional cover page. Interior pages use generous margins with an offset text area.
Business Templates | Examples in Context | 69PowerPoint TemplateTo use the BriteLab PowerPoint Template, you need tohave the Roboto font family installed. The template is setup with the BriteLab theme, standardizing fonts, colorsand master slides.COVER TITLE AND TEXT SEPARATOR SEPARATOR TITLE AND TEXT T IT LE ON LY DARK LIGHT 2 COLUMNS LEFTT IT L E ONLY TITLE AND TABLE TITLE, TEXT BLANK BLOCK TITLE BLOCK TITLECENTERED AND CHART TEAL ORANGEBLOCK TITLE BLOCK TITLE BLOCK TITLE BLOCK TITLE END SLIDE END SLIDE RED GREEN BLUE CHARCOAL LIGHT DARK
70 | Examples in Context | WebsiteWebsiteThe initial website depicted here was created to helplaunch the brand and provide a top-down overview ofBriteLab and its offering.Intro section uses brand imagery, an aspirational headline and clear description of what BriteLab does.
Main navigation Website | Examples in Context | 71minimizes on scrollIntro section, framing Leadership teamthe problem that overviewBriteLab solves. Overview of industries and clientsA concise overview Contact sectionof BriteLab’s solutionoffering and the mainservice lines.Portfolio sectionProcess overview
72 | Examples in Context | AdvertisingAdvertising
Advertising | Examples in Context | 73
74 | Examples in Context | T-ShirtsT-Shirts
Temporary Tattoos | Examples in Context | 75Temporary Tattoos
76 | Voice and MessagingVOICE AND MESSAGING
Subsection | Section | 77
78 | Voice and Messaging | OverviewThe BriteLab VoiceThe BriteLab brand voice is intelligent,articulate, confident, yet open, humbleconversational, and genuine.Part of what makes BriteLab special is the high-touch,human aspect of the brand experience. That qualityneeds to come through in the way we express the brandthrough our words, thoughts and actions.
Elevator Language | Voice and Messaging | 79MessagingElevator LanguageMy name is ____________ and I am a (the) <title/role> at Continuing the discussion…BriteLab. Experts across all disciplines collaborate with our clientsBriteLab offers full-spectrum product development, face-to-face in a highly creative environment.locally in Silicon Valley. We are optimized for low unit volumes, shorter leadWe specialize in new product innovation for complex times, and agile development cycles.electro-mechanical hardware. And by keeping everything local with peer-level expertsWe offer a total solution for new product innovators that that know from experience the challenges that OEMsincludes design, engineering, prototyping, and advanced face doing business with globally outsourced suppliers,manufacturing, all under one roof. you can rest assured that your IP is safe. The result: you get your new products to market faster with the highest quality results while keeping your IP safe and reducing the total cost of development.
80 | Voice and Messaging | Messaging MatrixMessaging MatrixAudience Entrepreneur—Seed Stage Entrepreneur—Series A StageMission Statement Empowering New Product Innovation for Complex HardwareKey Message We’ll guide you through the complicated We’ll get your product iterationsNotes on Tone maze of hardware product development to market faster, with the highest and get you to the next stage of funding quality results. We’ll provide full product support so you can focus on developing the next feature set. Optimistic, young, cool, reassuring— Driven, enthusiastic, with the times we will take care of you. but mature and dependable, confident.Overall Sentiment “We got you—and you’re “Get ready—it’s about to going to make it.” get REAL.”
Messaging Matrix | Voice and Messaging | 81Burgeoning Leader Intrapreneur OEM - General Manager Empowering New Product Innovation for Complex HardwareWe extend your capacity by adding Your trusted partner of seasoned Peer-level OEM experts, acting as youryour own team of high-level experts, experts, working as an extension of trusted total solution partner right inso you can accelerate your product your team to rapidly solve problems your backyard, lowering your total costdev cycles with the highest quality together, overcome barriers, and do of production, increasing efficienciesresults while keeping your IP safe whatever it takes to reach success. and eliminating the fatigue of doing business with global suppliers.Business savvy, tech savvy, mature, Passionate about technology and Empathetic, peer-level expertise,experienced, confident, enthusiastic. the possibilities it promises for utter confidence, calm, practical, the future, adventurous, fearless, reassuring, level-headed, friendly, experienced, confident, mature respectful. with youthful ambition.“We’ll help you accelerate “Let’s go to the moon!” “We’ll help you get thingsyour success.” moving like they should.” (cure the indigestion)
RESOURCES: For more informationand to request accessto digital brand assets, please contact yourBriteLab representative or call 650.961.0671
Search