DigitalStandards: 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 "==Digital Standards== ===Website (droidbuilders.info)=== The primary DroidBuilders website uses a '''dark theme''' as the established visual standard. All page design decisions align with the Dark Theme Palette and Typography system. ====Layout Principles==== * Maximum content width: 1200px (boxed layout) * The Coruscant cityscape side background is an intentional design element -- do not remove or replace * Whitespace is a design feature..."
 
mNo edit summary
 
Line 1: Line 1:
==Digital Standards==
==Digital Standards==
 
===Website (droidbuilders.info)===
===Website (droidbuilders.info)===
 
The primary DroidBuilders website uses a '''dark theme''' as the established visual standard. All page design decisions align with the
The primary DroidBuilders website uses a '''dark theme''' as the established visual standard. All page design should align with the Dark Theme Palette (see [[ColorSystem|Color System]]) and the [[Typography]] system.
[[DarkThemePalette|Dark Theme Palette]] and [[Typography]] system.
 
====Layout Principles====
====Layout Principles====
 
* Maximum content width: 1200px (boxed layout)
* Maximum content width: 1200px (boxed layout)
* The Coruscant cityscape side background is an intentional design element -- do not remove or replace
* The Coruscant cityscape side background is an intentional element of the established aesthetic -- do not remove or replace
* Whitespace is a design feature -- avoid dense or cluttered layouts
* Whitespace is a design element -- avoid dense or cluttered layouts
* Each page should follow this visual flow: hero > key message > supporting content > call to action
* Each page should have a clear hierarchy: hero, key message, supporting content, call to action
 
====Component Standards====
====Component Standards====
 
{| class="wikitable" style="width:100%"
{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Component
! style="background-color:#003468; color:#FFFFFF;" | Component
Line 22: Line 21:
| Page background
| Page background
| Deep Space <code>#060D1A</code>
| Deep Space <code>#060D1A</code>
| Outermost layer only
| Outermost layer
|-
|-
| Content background
| Content background
Line 28: Line 27:
| Primary content area
| Primary content area
|-
|-
| Cards and panels
| Cards / panels
| Card Surface <code>#0F2040</code>
| Card Surface <code>#0F2040</code>
| Individual content blocks
| Individual content blocks
|-
|-
| Primary CTA button
| Primary CTA button
| Gold <code>#FFC20E</code> with Deep Navy text
| Gold <code>#FFC20E</code> / Deep Navy text
| Main action on any page
| Main action on any page
|-
|-
Line 40: Line 39:
| Supporting actions
| Supporting actions
|-
|-
| Links (inline)
| Links
| Sky Blue <code>#3BADFF</code>
| Sky Blue <code>#3BADFF</code>
| Hover state: Gold
| Inline hyperlinks; hover to Gold
|-
|-
| Dividers
| Dividers
| Border <code>#003468</code>
| Border <code>#003468</code>
| Section separators
| Section separators
|-
| Navigation text
| White, uppercase
| Exo 2 SemiBold; active state: Gold underline or text
|}
|}
 
====Minimum Touch Targets====
====Navigation====
 
All interactive elements must have a minimum touch target of 44x44 pixels
* Primary navigation: Exo 2 SemiBold, White, uppercase
on mobile. See [[AccessibilityStandards]] for full requirements.
* Active state: Gold <code>#FFC20E</code> underline or text
* Mobile hamburger menu: always include; touch target minimum 44x44px
 
===Donation Page===
===Donation Page===
 
The donation page is one of the highest-impact pages on the site.
The donation page is one of the highest-impact pages on the site.
 
* Lead with mission impact before donation mechanics
* Lead with mission impact -- a STEM story or specific event outcome -- not with donation mechanics
* Four-tier payment structure is the approved system:
* Frame giving around the STEM education mission (see [[MessagingBoilerplate|Messaging and Boilerplate]] and [[VoiceTone|Voice and Tone]])
** Community -- $1/month
* Four-tier payment structure is the approved system: Community ($1/month), Mission ($55/year), Champion ($75/year), One-Time (any amount)
** Mission -- $55/year
* Tier names and amounts may only be changed by Board approval
** Champion -- $75/year
* CTA buttons use Gold (<code>#FFC20E</code>) with Deep Navy text
** One-Time -- any amount
 
* Tier names and amounts may only be changed by board approval
* CTA buttons must use Gold (<code>#FFC20E</code>) with Deep Navy text
* All copy must conform to fundraising language rules in [[VoiceTone]]
===Social Media===
===Social Media===
 
====Platform Image Specifications====
====Platform Standards====
 
{| class="wikitable" style="width:100%"
{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Platform
! style="background-color:#003468; color:#FFFFFF;" | Platform
Line 90: Line 82:
| Circular Logo, 400x400px
| Circular Logo, 400x400px
| N/A
| N/A
| 1080x1080px square; 1080x1350px portrait
| 1080x1080px (square), 1080x1350px (portrait)
|-
|-
| X (Twitter)
| X (Twitter)
Line 102: Line 94:
| Thumbnail: 1280x720px
| Thumbnail: 1280x720px
|}
|}
 
====Social Media Voice====
====Social Media Voice====
 
* Use the voice principles from [[VoiceTone]] -- warm, precise, joyful
* Use the voice principles from [[VoiceTone|Voice and Tone]] -- warm, precise, joyful
* Primary hashtag: #DroidBuilders -- add event-specific or sector tags as secondary
* Hashtags: use <code>#DroidBuilders</code> consistently; add event or sector tags as secondary
* Only post on behalf of the organization with board or designated social media lead authorization
* Never post on behalf of the organization without Board or designated social media lead authorization
* Refer to droids as "droids" -- not "robots" or "costumes"
* Droids are "droids," not "robots" or "costumes"
* Tag partner organizations when sharing event content, with their permission
* Tag partner organizations (hospitals, schools, conventions) when sharing event content, with their permission
 
====Sector Social Media Accounts====
====Sector Social Media Accounts====
 
Sector accounts must:
Sector accounts must:
* Use the sector/zone logo (not the primary standalone logo) as the profile image
* Use the sector/zone logo (not the primary standalone logo) as the profile image
* Include "DroidBuilders -- [Sector Name]" in the account display name
* Include "DroidBuilders -- [Sector Name]" in the account display name
* Follow all national voice, tone, and content standards
* Follow all national voice, tone, and content standards
* Not post organizational policy statements or announcements -- those originate from the board only
* Not post organizational policy statements or announcements -- those originate from the Board
 
===Email Communications===
===Email Communications===
 
{| class="wikitable" style="width:100%"
* '''Header:''' Full-width dark background with the Primary Logo (white version), centered
! style="background-color:#003468; color:#FFFFFF;" | Element
* '''Body background:''' Dark Surface <code>#0A1628</code>, or White for light-theme emails
! style="background-color:#003468; color:#FFFFFF;" | Specification
* '''Typography:''' Source Sans 3 for body; Exo 2 for headlines (web-safe fallbacks apply)
|-
* '''CTA buttons:''' Gold with Deep Navy text; minimum 44px tall; full-width on mobile
| Header
* '''Footer:''' Include unsubscribe link, mailing address, nonprofit designation, and EIN
| Full-width dark background; Primary Logo (white version), centered
* '''Subject lines:''' Lead with action or impact; avoid spam-trigger phrases
|-
| Body background
| Dark Surface <code>#0A1628</code> preferred; white for light-theme emails
|-
| Typography
| Source Sans 3 for body; Exo 2 for headlines (web-safe fallbacks apply)
|-
| CTA buttons
| Gold <code>#FFC20E</code> with Deep Navy text; minimum 44px tall;
full-width on mobile
|-
| Footer
| Unsubscribe link, mailing address, and 501(c)(3) designation required
|-
| Subject lines
| Lead with action or impact; avoid spam-trigger phrases
|}
[[Category:Branding]]

Latest revision as of 19:13, 16 June 2026

Digital Standards

Website (droidbuilders.info)

The primary DroidBuilders website uses a dark theme as the established visual standard. All page design should align with the Dark Theme Palette (see Color System) and the Typography system.

Layout Principles

  • Maximum content width: 1200px (boxed layout)
  • The Coruscant cityscape side background is an intentional element of the established aesthetic -- do not remove or replace
  • Whitespace is a design element -- avoid dense or cluttered layouts
  • Each page should have a clear hierarchy: hero, key message, supporting content, call to action

Component Standards

Component Color Notes
Page background Deep Space #060D1A Outermost layer
Content background Dark Surface #0A1628 Primary content area
Cards / panels Card Surface #0F2040 Individual content blocks
Primary CTA button Gold #FFC20E / Deep Navy text Main action on any page
Secondary button Transparent with Gold border Supporting actions
Links Sky Blue #3BADFF Inline hyperlinks; hover to Gold
Dividers Border #003468 Section separators
  • Primary navigation: Exo 2 SemiBold, White, uppercase
  • Active state: Gold #FFC20E underline or text
  • Mobile hamburger menu: always include; touch target minimum 44x44px

Donation Page

The donation page is one of the highest-impact pages on the site.

  • Lead with mission impact -- a STEM story or specific event outcome -- not with donation mechanics
  • Frame giving around the STEM education mission (see Messaging and Boilerplate and Voice and Tone)
  • Four-tier payment structure is the approved system: Community ($1/month), Mission ($55/year), Champion ($75/year), One-Time (any amount)
  • Tier names and amounts may only be changed by Board approval
  • CTA buttons use Gold (#FFC20E) with Deep Navy text

Social Media

Platform Standards

Platform Profile Image Cover / Banner Post Image Size
Facebook Circular Logo, 400x400px 1640x924px 1200x630px
Instagram Circular Logo, 400x400px N/A 1080x1080px (square), 1080x1350px (portrait)
X (Twitter) Circular Logo, 400x400px 1500x500px 1200x675px
YouTube Circular Logo, 800x800px 2560x1440px Thumbnail: 1280x720px

Social Media Voice

  • Use the voice principles from Voice and Tone -- warm, precise, joyful
  • Hashtags: use #DroidBuilders consistently; add event or sector tags as secondary
  • Never post on behalf of the organization without Board or designated social media lead authorization
  • Droids are "droids," not "robots" or "costumes"
  • Tag partner organizations (hospitals, schools, conventions) when sharing event content, with their permission

Sector Social Media Accounts

Sector accounts must:

  • Use the sector/zone logo (not the primary standalone logo) as the profile image
  • Include "DroidBuilders -- [Sector Name]" in the account display name
  • Follow all national voice, tone, and content standards
  • Not post organizational policy statements or announcements -- those originate from the Board

Email Communications

  • Header: Full-width dark background with the Primary Logo (white version), centered
  • Body background: Dark Surface #0A1628, or White for light-theme emails
  • Typography: Source Sans 3 for body; Exo 2 for headlines (web-safe fallbacks apply)
  • CTA buttons: Gold with Deep Navy text; minimum 44px tall; full-width on mobile
  • Footer: Include unsubscribe link, mailing address, nonprofit designation, and EIN
  • Subject lines: Lead with action or impact; avoid spam-trigger phrases
Retrieved from "https://drl.droidbuilders.net/index.php?title=DigitalStandards&oldid=5541"