Preview image. Unlock full-res
Crisp White Canvas; an expansive, information-first interface on a stark white background with minimal ornamentation.
The design prioritizes content delivery with a near-monochromatic palette and a spacious layout. A pure white background (
#ffffff) serves as a digital canvas, allowing black text (#0f0f0f) and a singular vivid blue (#065fd4) for interactive elements to carry all visual weight. Rounded corners (10px, 18px) provide subtle softness against an otherwise austere, functional aesthetic. The lack of decorative elements directs full attention to the video and community content.
Use Canvas White (#ffffff) as the default background for all page sections and elevated components.
Apply Ink Black (#0f0f0f) for all main headings, body text, and primary icons to ensure high contrast.
Employ Accent Blue (#065fd4) exclusively for active states, clickable links, and primary calls to action.
Maintain a clear visual hierarchy by utilizing Medium Gray (#606060) for secondary information and Light Gray (#909090) for tertiary details.
Ensure all interactive buttons use a border-radius of 18px for a consistent soft, approachable shape.
Adhere to Roboto weight 400 for standard body text and weight 600 for YouTube Sans for section headings.
Use 16px horizontal padding within interactive buttons or elements like the 'Update setting' button.
Avoid using multiple accent colors; confine brand emphasis strictly to Accent Blue (#065fd4) and YouTube Red (#ff0033) for branding only.
Do not introduce complex shadows or gradients; prioritize a flat, clean aesthetic over dimensional effects.
Refrain from using heavily saturated images or illustrations that compete with UI elements; opt for functional imagery.
Do not deviate from the established type scale and font families; maintain consistency in text presentation.
Avoid tight spacing; maintain elementGap of 8px and larger gaps for sections to ensure content breathability.
Do not use dark backgrounds for main content areas; reserve them for specific, isolated components if necessary.
Do not apply rounded corners indiscriminately; reserve radii like 18px for buttons and 10px for cards/dialogues.
