StyleGuideQuickReference: Difference between revisions

From Droid Reference Library
Jump to navigation Jump to search
Browse history interactively
Drl-admin (talk | contribs)
Bureaucrats, Administrators
692 edits
Created page with "==Style Guide Quick Reference== This page provides a condensed reference for the most commonly needed brand standards. Follow the links to each section for full specifications. ===Color Quick Reference=== {| class="wikitable" style="width:100%" ! style="background-color:#003468; color:#FFFFFF;" | Color Name ! style="background-color:#003468; color:#FFFFFF;" | Swatch ! style="background-color:#003468; color:#FFFFFF;" | HEX ! style="background-color:#003468; color:#F..."
 
mNo edit summary
 
Line 1: Line 1:
==Style Guide Quick Reference==
==Quick Reference==
 
This page provides a condensed reference for the most commonly needed brand
===Mission, Vision and Tagline===
standards. Follow the links to each section for full specifications.
 
{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Item
! style="background-color:#003468; color:#FFFFFF;" | Text
|-
| '''Mission'''
| To inspire the next generation in science, technology, engineering, and math through the art of building droids.
|-
| '''Vision'''
| A world where every young person sees themselves as a builder, a maker, and an engineer.
|-
| '''Tagline'''
| Building droids. Inspiring futures.
|-
| '''One-liner'''
| A 501(c)(3) nonprofit that inspires STEM learning by bringing full-scale, hand-built replica droids to schools, children's hospitals, and community events.
|}
 
===Color Quick Reference===
===Color Quick Reference===
 
{| class="wikitable" style="width:100%"
{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Color Name
! style="background-color:#003468; color:#FFFFFF;" |  
! style="background-color:#003468; color:#FFFFFF;" | Swatch
! style="background-color:#003468; color:#FFFFFF;" | Name
! style="background-color:#003468; color:#FFFFFF;" | HEX
! style="background-color:#003468; color:#FFFFFF;" | HEX
! style="background-color:#003468; color:#FFFFFF;" | Primary Use
! style="background-color:#003468; color:#FFFFFF;" | Use
|-
|-
| '''Deep Navy''' (Primary)
| style="background:#003468; width:32px;" |  
| style="background-color:#003468; width:60px;" |  
| Deep Navy
| <code>#003468</code>
| <code>#003468</code>
| Primary brand color; print headers
| Primary brand color; print, headers
|-
|-
| '''Brand Blue'''
| style="background:#005BA8; width:32px;" | &nbsp;
| style="background-color:#005BA8; width:60px;" | &nbsp;
| Brand Blue
| <code>#005BA8</code>
| <code>#005BA8</code>
| Secondary identity; supporting elements
| Secondary identity color
|-
|-
| '''Gold'''
| style="background:#FFC20E; width:32px;" | &nbsp;
| style="background-color:#FFC20E; width:60px;" | &nbsp;
| Gold
| <code>#FFC20E</code>
| <code>#FFC20E</code>
| CTAs, accents, highlights
| Accents, CTAs, highlights
|-
|-
| '''White'''
| style="background:#FFFFFF; border:1px solid #ccc; width:32px;" | &nbsp;
| style="background-color:#FFFFFF; border:1px solid #CCCCCC; width:60px;" | &nbsp;
| White
| <code>#FFFFFF</code>
| <code>#FFFFFF</code>
| Text on dark backgrounds; light backgrounds
| Text on dark; light backgrounds
|-
|-
| '''Cool Gray'''
| style="background:#BABCBE; width:32px;" | &nbsp;
| style="background-color:#BABCBE; width:60px;" | &nbsp;
| Cool Gray
| <code>#BABCBE</code>
| <code>#BABCBE</code>
| Secondary text, dividers
| Secondary text, dividers
|-
|-
| '''Deep Space'''
| style="background:#060D1A; width:32px;" | &nbsp;
| style="background-color:#060D1A; width:60px;" | &nbsp;
| Deep Space
| <code>#060D1A</code>
| <code>#060D1A</code>
| Web page background (outermost)
| Web page background
|-
|-
| '''Dark Surface'''
| style="background:#0A1628; width:32px;" | &nbsp;
| style="background-color:#0A1628; width:60px;" | &nbsp;
| Dark Surface
| <code>#0A1628</code>
| <code>#0A1628</code>
| Web content background
| Web content background
|-
|-
| '''Card Surface'''
| style="background:#0F2040; width:32px;" | &nbsp;
| style="background-color:#0F2040; width:60px;" | &nbsp;
| Card Surface
| <code>#0F2040</code>
| <code>#0F2040</code>
| Web content cards and panels
| Web content cards
|-
|-
| '''Sky Blue'''
| style="background:#3BADFF; width:32px;" | &nbsp;
| style="background-color:#3BADFF; width:60px;" | &nbsp;
| Sky Blue
| <code>#3BADFF</code>
| <code>#3BADFF</code>
| Web links, interactive elements
| Web links, interactive elements
|}
|}
 
===Typography Quick Reference===
===Typography Quick Reference===
 
{| class="wikitable" style="width:100%"
{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Role
! style="background-color:#003468; color:#FFFFFF;" | Role
! style="background-color:#003468; color:#FFFFFF;" | Typeface
! style="background-color:#003468; color:#FFFFFF;" | Typeface
! style="background-color:#003468; color:#FFFFFF;" | Weight
! style="background-color:#003468; color:#FFFFFF;" | Weight
! style="background-color:#003468; color:#FFFFFF;" | Notes
|-
|-
| Hero / Major Headlines
| Hero / Major Headlines
| Exo 2
| Exo 2
| ExtraBold 800
| ExtraBold 800
| Event banners, homepage hero
|-
|-
| Section Headers (H2)
| Section Headers
| Exo 2
| Exo 2
| Bold 700
| Bold 700
| Page section titles
|-
|-
| Subheadings (H3/H4)
| Subheadings
| Exo 2
| Exo 2
| SemiBold 600
| SemiBold 600
| Subsections, callouts
|-
|-
| Body Copy
| Body Copy
| Source Sans 3
| Source Sans 3
| Regular 400
| Regular 400
| All paragraph text
|-
|-
| Emphasis / UI Labels
| Emphasis / UI
| Source Sans 3
| Source Sans 3
| SemiBold 600
| SemiBold 600
| Buttons, inline emphasis
|-
|-
| Badges / Technical Labels
| Labels / Badges
| Rajdhani
| Rajdhani
| SemiBold 600
| SemiBold 600
| Tags, event codes, navigation
|}
|}
 
===Logo Quick Reference===
===Logo Quick Reference===
 
{| class="wikitable" style="width:100%"
{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Situation
! style="background-color:#003468; color:#FFFFFF;" | Situation
Line 109: Line 118:
| Circular
| Circular
|-
|-
| Sector or local events
| Sector / local events
| Sector logo
| Sector logo
|-
|-
Line 115: Line 124:
| Circular
| Circular
|-
|-
| Merchandise (embroidery, screen printing)
| Favicon / app icon
| Circular
|-
| Merchandise (embroidery, screen print)
| Circular or Medallion
| Circular or Medallion
|-
|-
| Dark background
| Dark background
| White / reversed version
| White / reversed version
|-
| Single-color applications (engraving, embroidery)
| Single-color black version
|}
|}
 
===Fundraising Language Quick Reference===
===Fundraising Language Quick Reference===
 
{| class="wikitable" style="width:100%"
'''Always focus on:''' the STEM education mission, community outreach, volunteer service, organizational infrastructure
! style="background-color:#003468; color:#FFFFFF; width:50%;" | Always Focus On
 
! style="background-color:#6B0000; color:#FFFFFF; width:50%;" | Never Reference
'''Never reference:''' droid builds, individual builder projects, personal equipment
|-
| Mission impact and community outreach
| Droid builds or individual build projects
|-
| Volunteer service and appearances
| Personal equipment or builder subsidies
|-
| Operational costs that enable outreach
| Funding for specific builds or parts
|-
| Community infrastructure (website, wiki)
| Any implication of personal benefit to builders
|}
===Section Links===
* [[BrandFoundation|Brand Foundation]] -- Mission, values, personality
* [[LogoPrinciples|Logo Standards]] -- Usage, clear space, do's and don'ts
* [[ColorSystem|Color System]] -- Full palette documentation
* [[Typography|Typography]] -- Typeface system and hierarchy
* [[VoiceTone|Voice and Tone]] -- Writing principles and fundraising rules
* [[ImageryStandards|Imagery Standards]] -- Photography guidelines
* [[DigitalStandards|Digital Standards]] -- Web, social, email
* [[PrintEventStandards|Print and Event Standards]] -- Signage and merchandise
* [[AccessibilityStandards|Accessibility Standards]] -- Contrast, alt text, interactive elements
[[Category:Branding]]

Latest revision as of 19:16, 16 June 2026

Quick Reference

Mission, Vision and Tagline

Item Text
Mission To inspire the next generation in science, technology, engineering, and math through the art of building droids.
Vision A world where every young person sees themselves as a builder, a maker, and an engineer.
Tagline Building droids. Inspiring futures.
One-liner A 501(c)(3) nonprofit that inspires STEM learning by bringing full-scale, hand-built replica droids to schools, children's hospitals, and community events.

Color Quick Reference

Name HEX Use
  Deep Navy #003468 Primary brand color; print, headers
  Brand Blue #005BA8 Secondary identity color
  Gold #FFC20E Accents, CTAs, highlights
  White #FFFFFF Text on dark; light backgrounds
  Cool Gray #BABCBE Secondary text, dividers
  Deep Space #060D1A Web page background
  Dark Surface #0A1628 Web content background
  Card Surface #0F2040 Web content cards
  Sky Blue #3BADFF Web links, interactive elements

Typography Quick Reference

Role Typeface Weight
Hero / Major Headlines Exo 2 ExtraBold 800
Section Headers Exo 2 Bold 700
Subheadings Exo 2 SemiBold 600
Body Copy Source Sans 3 Regular 400
Emphasis / UI Source Sans 3 SemiBold 600
Labels / Badges Rajdhani SemiBold 600

Logo Quick Reference

Situation Logo to Use
National or corporate materials Primary (Standalone)
Alongside partner organization logos Circular
Sector / local events Sector logo
Social media profile image Circular
Favicon / app icon Circular
Merchandise (embroidery, screen print) Circular or Medallion
Dark background White / reversed version

Fundraising Language Quick Reference

Always focus on: the STEM education mission, community outreach, volunteer service, organizational infrastructure

Never reference: droid builds, individual builder projects, personal equipment

Retrieved from "https://drl.droidbuilders.net/index.php?title=StyleGuideQuickReference&oldid=5544"