Title: Theory / Unimportant / CS / Descriptive / Material / Design / Color

Name: Color consistency
Definition: color should be applied throughout a UI consistently
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material
Definition2: color should be compatible with the brand it represents
Conjdef: all of
DefType: The fact that

Name: Color intentionality
Definition: Color should be applied purposefully as it can convey meaning in multiple ways
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material
Example: relationships between elements
Example2: degrees of hierarchy.

Name: Color distinctiveness
Definition: Color should create distinction between elements, with sufficient contrast between them.
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: Color principles
Answer: consistent
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material
Answer2: distinct
Answer3: intentional

Question: What is the color of top app bar?
Answer: primary color. Potentially dark/light variant to separate from the system content
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: What is the color of buttons near the top/bottom bar?
Answer: Secondary color
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: What to do if app bar and near button uses the same color
Answer: use shadow or alternate means to create enough distinction between them.
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: What to do if app bar and main content background have the same color
Answer: use shadow or alternate means to create enough distinction between them.
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: What is the effect of having same color for top bar and background?
Answer: They blend together, placing emphasis on an app’s content instead of its structure.
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: How to distinguish backrdrop?
Answer: To distinguish between these two layers, the baseline back layer color is your primary color and the baseline front layer is white.
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: The baseline color for sheets and surfaces, such as bottom sheets, navigation drawers, menus, dialogs, and cards is
Answer: white
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: Color choice for surfaces that appear on-screen temporarily, such as navigation drawers and bottom sheets
Answer: a constrating color, whether white, primary or secondary
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: Color choice for card
Answer: Generally white, but primary or secondary otherwise for brand consistency
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: What to do to add text on top of image
Answer: Add a colored surface in between image and text to ensure text can be read.
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: color for contained button
Answer: primary color
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: color for text button
Answer: primary color
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: color for outlined button
Answer: primary color
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: color for floating action button
Answer: secondary color
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: color for extended floating action button
Answer: secondary color
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: color for selection controls
Answer: secondary color
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: color for chips controls
Answer: primary or secondary color
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: color for alerts
Answer: Usually red, not a brand color so that it stands out
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: What are the goals of text's color
Answer: emphasize importance
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material
Answer2: Ensure it's legible when placed above imagery or backgrounds

Question: What color to use for tabs
Answer: Primary or secondary
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: What color to use for headlines
Answer: Primary or secondary
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Question: What color to use for text
Answer: avoid bright color
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material
Answer2: Usually dark,

Question: What color to use for icons
Answer: Ensure they contrast with background
Page: https://material.io/design/color/applying-color-to-ui.html#usage
Context: Material

Name: Color
Definition: an organized approach to applying color to a UI
Page: https://material.io/components/app-bars-bottom#behavior
Context: Material

Question: What to take into consideration to choose colors
Answer: Legibility
Page: https://material.io/design/layout/applying-density.html#usage
Context: Material navigation
Answer2: Expressive, in particular represents the brand
Answer3: Allow to show hierarchy of importance

Name: Baseline material color theme
Page: https://material.io/design/color/the-color-system.html#color-usage-and-palettes
Context: Material navigation

Name: A color variant
Definition: A color, with a different darkness
Page: https://material.io/design/color/the-color-system.html#color-usage-and-palettes
Context: Material navigation
Intuition: Allow two surfaces to be distinguishable while showing they have the same importance

Name: A primary color
Definition: the color displayed most frequently across your app's screens and components.
Page: https://material.io/design/color/the-color-system.html#color-usage-and-palettes
Context: Material navigation

Name: A secondary color
Definition: A color providing more ways to accend and distuinguish your product. Applied sparingly
Page: https://material.io/design/color/the-color-system.html#color-usage-and-palettes
Context: Material navigation
Example: floating action buttons
Example2: Selection controls, like sliders and switches
Example3: Progress bars
Example4: Selected text, links and headlines

Name: the surface color
Definition: Color affecting surfaces of components such as cards, sheets and menus
Page: https://material.io/design/color/the-color-system.html#color-usage-and-palettes
Context: Material navigation

Name: the background color
Definition: Color that appears behind scrollable content
Page: https://material.io/design/color/the-color-system.html#color-usage-and-palettes
Context: Material navigation

Name: the error color
Definition: Color that indicates errors in components,
Page: https://material.io/design/color/the-color-system.html#color-usage-and-palettes
Context: Material navigation
Example: such as invalid text in a text field

Name: A swatch
Definition: A sample of color choosen form a range of similar color
Page: https://material.io/design/color/the-color-system.html#color-usage-and-palettes
Context: Material navigation

Definition: Indicates that white text is legible behind this background
Page: https://material.io/design/color/the-color-system.html#color-usage-and-palettes
Context: Material navigation
Notation: white check mark

Definition: Indicates that black text is legible behind this background
Page: https://material.io/design/color/the-color-system.html#color-usage-and-palettes
Context: Material navigation
Notation: black check mark

Name: Alternative color
Definition: colors used as alternatives to your brand’s primary and secondary colors
Page: https://material.io/design/color/the-color-system.html#color-usage-and-palettes
Context: Material navigation
Example: Apps with light and dark themes
Example2: Apps with different themes in different sections
Example3: Apps that are part of a suite of products

Question: When can an arbitrary number of extra color can be used
Answer: If color and theme represents section of the app
Page: https://material.io/design/color/the-color-system.html#color-usage-and-palettes
Context: Material navigation
Answer2: Data visualizaito

Name: 2014 Material Design color palettes
Definition: ?
Page: https://material.io/design/color/the-color-system.html#color-usage-and-palettes
Context: Material navigation

Name: Color usage
Definition: ?
Page: Create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination
Context: Material navigation

Question: Color requirement for text and background?
Answer: 4.5:1 color contrast for normal size
Page: https://material.io/design/color/text-legibility.html#text-backgrounds
Context: Material navigation
Answer2: 3:1 contrast for large text

Question: How to create contrast in text color
Answer: Reduce opacity of text color, don't change the color
Page: https://material.io/design/color/text-legibility.html#text-backgrounds
Context: Material navigation

Name: Helper text
Definition: gives context about a field’s input, such as how the input will be used
Page: https://material.io/design/color/text-legibility.html#text-backgrounds
Context: Material navigation

Name: Dark theme
Definition: a low-light UI that displays mostly dark surfaces.
Page: https://material.io/design/color/dark-theme.html#text-types
Context: Material navigation

Question: Advantage of dark theme
Answer: help improve visual ergonomics by reducing eye strain
Page: https://material.io/design/color/dark-theme.html#text-types
Context: Material navigation
Answer2: adjusting brightness to current lighting conditions
Answer3: facilitating screen use in dark environments
Answer4: all while conserving battery power.

Question: Why does dark mode uses grey instead of black?
Answer: Allows more expressivity for depth
Page: https://material.io/design/color/dark-theme.html#text-types
Context: Material navigation
Answer2: allow variation for border of surfaces

Question: When should true black be used
Answer: For OLED screens
Page: https://material.io/design/color/dark-theme.html#text-types
Context: Material navigation

Name: Brand color
Definition: Color that represents a brand
Page: https://material.io/design/color/dark-theme.html#text-types
Context: Material navigation

Name: "On" color
Definition: Color primarily applied to text, iconography and strokes that are sometimes placed "on" top of key surfaces that use a primary, secondary, surface, background, or error color.
Page: https://material.io/design/color/dark-theme.html#text-types
Context: Material navigation