{"id":4175,"date":"2025-09-18T10:49:36","date_gmt":"2025-09-18T14:49:36","guid":{"rendered":"https:\/\/ubwp.buffalo.edu\/art320\/?page_id=4175"},"modified":"2025-09-18T10:50:27","modified_gmt":"2025-09-18T14:50:27","slug":"style-guides","status":"publish","type":"page","link":"https:\/\/ubwp.buffalo.edu\/art320\/projects\/p01-personal-website-part-1\/style-guides\/","title":{"rendered":"Style Guides"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Color Palettes<\/h2>\n\n\n\n<p><strong>1. 3\u20135 Main Colors<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1 primary brand color\u00a0(used most prominently)<\/li>\n\n\n\n<li>1\u20132 secondary colors\u00a0(for accents, highlights, or call-to-actions)<\/li>\n\n\n\n<li>1\u20132 neutral colors\u00a0(grays, off-whites, or backgrounds)<\/li>\n<\/ul>\n\n\n\n<p><strong>2. Use neutrals generously<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Most of the interface should rely on whites, light grays, or dark grays for readability and to avoid overwhelming users.<\/li>\n\n\n\n<li>Strong colors should be used sparingly for hierarchy and emphasis.<\/li>\n<\/ul>\n\n\n\n<p><strong>3. Establish hierarchy and consistency<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Assign specific roles to each color (e.g., buttons, links, alerts, backgrounds).<\/li>\n\n\n\n<li>Reuse them consistently rather than introducing new shades for every component.<\/li>\n<\/ul>\n\n\n\n<p><strong>4. Consider accessibility<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ensure enough\u00a0<strong>contrast<\/strong>\u00a0(WCAG AA or AAA if possible).<\/li>\n\n\n\n<li>Avoid relying on color alone to convey meaning\u2014use labels, icons, or patterns too.<\/li>\n<\/ul>\n\n\n\n<p><strong>5. Reserve special colors for feedback<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Universal conventions help:\n<ul class=\"wp-block-list\">\n<li>Green for success<\/li>\n\n\n\n<li>Red for error<\/li>\n\n\n\n<li>Yellow\/amber for warnings<\/li>\n\n\n\n<li>Blue for info<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Palette Generators<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/coolors.co\">https:\/\/coolors.co<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.figma.com\/color-palette-generator\/\">Figma Color Palette Generator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.figma.com\/color-wheel\/\">Figma Complimentary Color Wheel<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.figma.com\/color-palettes\/\">Figma Color Palette Library<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Fonts<\/h2>\n\n\n\n<p><strong>1. Limit the number of font families<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1\u20132 font families<\/strong>\u00a0is best for most interfaces.\n<ul class=\"wp-block-list\">\n<li>One for headings and another for body text (or use a single well-designed family for both).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Using more than two can make the interface feel cluttered and inconsistent.<\/li>\n<\/ul>\n\n\n\n<p><strong>2. Use font weights and styles for hierarchy<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Instead of adding new fonts, rely on\u00a0<strong>different weights (regular, medium, bold)<\/strong>\u00a0and\u00a0<strong>sizes<\/strong>\u00a0to create distinction.<\/li>\n\n\n\n<li>For example:\n<ul class=\"wp-block-list\">\n<li>Headings: Bold, larger size<\/li>\n\n\n\n<li>Body: Regular, smaller size<\/li>\n\n\n\n<li>Emphasis: Italic or medium weight<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>3. Maintain a clear hierarchy<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Define a\u00a0<strong>type scale<\/strong>\u00a0(e.g., H1, H2, H3, body, caption).<\/li>\n\n\n\n<li>Stick to consistent spacing and sizing rules so the interface feels organized.<\/li>\n<\/ul>\n\n\n\n<p><strong>4. Prioritize readability<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sans-serif fonts (like Inter, Roboto, Helvetica) are most common for UI because they\u2019re clean and readable at small sizes.<\/li>\n\n\n\n<li>Minimum body text size:\u00a0<strong>16px<\/strong>\u00a0(web standard).<\/li>\n\n\n\n<li>Line length: ~45\u201375 characters per line for comfort.<\/li>\n<\/ul>\n\n\n\n<p><strong>5. Accessibility<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ensure good contrast between text and background.<\/li>\n\n\n\n<li>Don\u2019t rely solely on font weight or color to show importance\u2014combine with size, spacing, or icons when needed.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Color Palettes 1. 3\u20135 Main Colors 2. Use neutrals generously 3. Establish hierarchy and consistency 4. Consider accessibility 5. Reserve special colors for feedback Palette Generators Fonts 1. Limit the [&hellip;]<\/p>\n","protected":false},"author":295,"featured_media":0,"parent":140,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"class_list":["post-4175","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/4175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/users\/295"}],"replies":[{"embeddable":true,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/comments?post=4175"}],"version-history":[{"count":3,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/4175\/revisions"}],"predecessor-version":[{"id":4178,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/4175\/revisions\/4178"}],"up":[{"embeddable":true,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/140"}],"wp:attachment":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/media?parent=4175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}