Force 5 Development

Explanation of Terms

Element: Each individual color entry in your palette is referred to as an Element. Think of each Element as a distinct item or component within your design or project that requires a specific color. This helps keep your colors organized by their purpose or role in the project.

State: The State refers to the condition or status of an Element at a given moment. This is especially helpful if your project includes interactive components or elements that change based on user actions. For example, if the Element represents a button, its State could be “Enabled,” “Disabled,” “Hovered,” or “Pressed,” reflecting the button’s appearance in different conditions.

Group: The Group is used to categorize where or how an Element is used within the broader context of your project. Grouping Elements by location or function can make it easier to organize your palette, especially for larger projects. In a game, Groups might include “Main Menu,” “HUD,” or “Pause Screen.” In a web design, Groups could include “Header,” “Background,” “Buttons,” etc.

Sample States and Groups

Below are example States and Groups for easy reference.

Sample States

• Enabled
• Disabled
• Hovered
• Pressed
• Selected
• Inactive
• Highlighted

Sample Groups

• Main Menu
• HUD (Heads-Up Display)
• Pause Screen
• Background
• Header
• Button
• Footer
• Title
• Accent Elements

Sample Elements

Below is a list of sample Elements with associated States, Groups, and Notes. This set of entries includes varied note lengths to help test display sizing and text wrapping.

• Button
  • State: Enabled
  • Group: Main Menu
  • Note: Default button color for primary actions in the main menu, such as starting the game or accessing settings.
• Button
  • State: Disabled
  • Group: Main Menu
  • Note: Disabled button color, appearing when an option is unavailable or locked until certain conditions are met.
• Button
  • State: Hovered
  • Group: HUD
  • Note: Changes color when hovered to indicate interactivity, giving feedback that the button is ready to be clicked.
• Button
  • State: Pressed
  • Group: HUD
  • Note: Visual feedback for button press action, dimmed slightly to indicate an action has been initiated.
• Background
  • State: Default
  • Group: Main Menu
  • Note: Main background color for initial load screen, setting the tone for the entire game with a neutral color that enhances readability.
• Background
  • State: Dimmed
  • Group: Pause Screen
  • Note: Dimmed background color for when the game is paused, helping to focus attention on the pause menu options while dimming other game visuals.
• Icon
  • State: Active
  • Group: HUD
  • Note: Used to indicate active status of an ability, such as “Shield On” or “Power Boost,” making it clear which abilities are available to the player.
• Icon
  • State: Inactive
  • Group: HUD
  • Note: Color for icons that indicate inactive or cooling-down abilities, letting the player know when abilities will be ready again.
• Text
  • State: Header
  • Group: Main Menu
  • Note: Primary title font color displayed at the top of the main menu screen to make the game title stand out.
• Text
  • State: Subheader
  • Group: Main Menu
  • Note: Subheader font color, appearing just below the main header to organize and label different menu sections, like “Options” or “High Scores.”
• Text
  • State: Default
  • Group: HUD
  • Note: Standard text color for descriptive labels in the HUD, used for indicators like health, armor, or time remaining in a level.
• Text
  • State: Highlighted
  • Group: HUD
  • Note: Highlighted text color used for critical alerts such as “Low Health” or “Objective Completed.” Draws attention to important information during gameplay.
• Border
  • State: Default
  • Group: Button
  • Note: Border color for enabled buttons, helping them visually stand out from other elements on the interface.
• Border
  • State: Focused
  • Group: Button
  • Note: Border color for buttons in focus, giving a clear visual indication for keyboard or controller navigation.
• Header Background
  • State: Default
  • Group: Header
  • Note: Background color for headers, designed to contrast with text for clear visibility and readability.
• Accent Line
  • State: Highlighted
  • Group: Footer
  • Note: Accent color for lines separating sections within the footer, adding a subtle yet consistent touch to UI navigation.
• Slider Track
  • State: Filled
  • Group: Settings Menu
  • Note: Color representing the filled portion of a slider in the settings menu, giving a clear visual of current settings (e.g., volume or brightness).
• Slider Track
  • State: Unfilled
  • Group: Settings Menu
  • Note: Unfilled portion of the slider track, serving as a contrast to indicate the range left in a setting like sound or screen brightness.