{
    "componentChunkName": "component---src-components-left-nav-layout-js",
    "path": "/brand/photography",
    "result": {"data":{"allMdx":{"edges":[{"node":{"frontmatter":{"path":"/foundations","title":"Foundations","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/foundations/colors","title":"Colors","group":"Foundations","status":null,"blurb":"Overview of semantic colors and the full color palette","isPrivate":null}}},{"node":{"frontmatter":{"path":"/foundations/layout","title":"Layout","group":"Foundations","status":null,"blurb":"Spacing between elements on the page are organized in units of 4px.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/foundations/accessibility","title":"Accessibility","group":"Foundations","status":null,"blurb":"We aim to make our website and software accessible to the widest audience possible","isPrivate":null}}},{"node":{"frontmatter":{"path":"/foundations/motion","title":"Motion","group":"Foundations","status":null,"blurb":"I like the way you move","isPrivate":null}}},{"node":{"frontmatter":{"path":"/foundations/shadows","title":"Shadows","group":"Foundations","status":null,"blurb":"Shadow is the visual way to communicate the elevation and hierarchy of components.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/foundations/radii","title":"Radii","group":"Foundations","status":null,"blurb":"Corner radii are generally organized in units of 2px","isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/color","title":"Color","group":"Brand","status":null,"blurb":"Our color system develops on our unique aesthetic and offers flexibility to harmonize the visual consistency across every touchpoint.","isPrivate":true}}},{"node":{"frontmatter":{"path":"/foundations/typography","title":"Typography","group":"Foundations","status":null,"blurb":"Houzz typography system can be used with other components to present content and product clearly and effectively to users.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/glyphs","title":"Glyphs","group":"Brand","status":null,"blurb":"The Houzz glyphs are single-color icons portraying a subject as is, serving as a visual cue throughout the web and mobile products and marketing materials.","isPrivate":true}}},{"node":{"frontmatter":{"path":"/brand","title":"Brand","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/illustration","title":"Illustrations","group":"Brand","status":null,"blurb":"As a visual communication tool, Houzz's illustration supports the effective and efficient delivery of messages and story-telling.","isPrivate":true}}},{"node":{"frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/logo/architecture","title":"Brand Architecture","group":"Brand","status":null,"blurb":"Our brand architecture system organizes our sub-brands, products and partnerships to help users relate to Houzz.","isPrivate":null}}},{"node":{"frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/logo","title":"The Logo","group":"Brand","status":null,"blurb":"The Houzz logos are one of our most valuable assets. It sets us apart from our competitors and represents everything we are: our experience, our values and our offerings.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/product-illustrations","title":"Product Illustrations","group":"Brand","status":null,"blurb":"Our product illustrations reference Houzz physical products in a simple manner to create educational moments as opposed to relying on a metaphorical narrative.","isPrivate":true}}},{"node":{"frontmatter":{"path":"/brand/photography","title":"Photography","group":"Brand","status":null,"blurb":"Another visual communication tool, selecting the right photography is critical as it relates to our brand.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/brand/secondary-graphics","title":"Secondary Graphics","group":"Brand","status":null,"blurb":"Secondary graphics are the visual elements we use to visualize our brand personality and to tell the story of our positioning statement and messaging.","isPrivate":true}}},{"node":{"frontmatter":{"path":"/writing","title":"Content","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/writing/language-grammar","title":"Language & Grammar","group":"Content","status":null,"blurb":null,"isPrivate":true}}},{"node":{"frontmatter":{"path":"/writing/messaging-guidelines","title":"Messaging Guidelines","group":"Content","status":null,"blurb":null,"isPrivate":true}}},{"node":{"frontmatter":{"path":"/brand/typography","title":"Typography","group":"Brand","status":null,"blurb":"Typography is our system of fonts. Our font Proxima Nova assists our homeowners and home renovation professionals through each stage of their journey.","isPrivate":true}}},{"node":{"frontmatter":{"path":"/writing/vocabulary","title":"Vocabulary","group":"Content","status":null,"blurb":null,"isPrivate":true}}},{"node":{"frontmatter":{"path":"/writing/writing-style","title":"Writing Style","group":"Content","status":null,"blurb":null,"isPrivate":true}}},{"node":{"frontmatter":{"path":"/writing/voice-tone","title":"Voice & Tone","group":"Content","status":null,"blurb":null,"isPrivate":true}}},{"node":{"frontmatter":{"path":"/marketing","title":"Marketing","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/avatar/avatar-group","title":"Avatar Group","group":"Components","status":"Healthy","blurb":"Displays a list of avatars as a stack, allowing to limit the maximum number of avatars visible. ","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/collapsible/accordion","title":"Accordion","group":"Components","status":"Healthy","blurb":"Use an accordion simple to reduce page length or scrolling by the user when a single content block would require too much space.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/badge","title":"Badge","group":"Components","status":"Healthy","blurb":"A non-interactive badge component","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/avatar","title":"Avatar","group":"Components","status":"Healthy","blurb":"Represents a user and can display a profile picture or initials. If neither are available, it will fallback to a ghost icon.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/banner","title":"Banner","group":"Components","status":"Healthy","blurb":"Banners show important information sunch as persistent condition, system status etc to users.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/box","title":"Box","group":"Components","status":"Healthy","blurb":"The Box component serves as a wrapper component for most layout needs. By default, it renders a <code>div</code> element","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/button/button-group","title":"Button Group","group":"Components","status":"Healthy","blurb":"ButtonGroup helps grouping the multiple buttons with same style","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/checkbox","title":"Checkbox","group":"Components","status":"Healthy","blurb":"Used for selecting one or multiple items from several options.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/button","title":"Button","group":"Components","status":"Healthy","blurb":"Buttons make common actions more obvious and help users more easily perform them. Buttons use text and sometimes icons to communicate the action that will occur when the user interacts with them.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/card","title":"Card","group":"Components","status":"Healthy","blurb":"A card","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/content-icon","title":"Content Icon","group":"Components","status":"Healthy","blurb":"A base component useful for implementing color-coded icons representing features, documents etc.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/get-started","title":"Getting Started","group":"!Documentation","status":null,"blurb":"<code>houzz-ui</code> is already integrated with Houzz jukwaa applications. Below is a guide to setting up in a new app, or information if you're curious what tooling we use.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/collapsible","title":"Collapsible","group":"Components","status":"Healthy","blurb":"The collapsible is a UI component for expanding or collapsing content areas within a page.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/icon/concept-icon","title":"Concept Icon","group":"Components","status":"Healthy","blurb":"Houzz concept (aka tier 2) icons","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/grid","title":"Grid","group":"Components","status":"Healthy","blurb":"A responsive grid layout component.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/guide","title":"Developer Guide","group":"!Documentation","status":null,"blurb":"<code>houzz-ui</code> was created to provide a composable, accessibile, extendable / themable component library based off of Houzz's design system and principles.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components","title":"Components","group":null,"status":null,"blurb":null,"isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/icon","title":"Icon","group":"Components","status":"Healthy","blurb":"Houzz icons","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/link","title":"Link","group":"Components","status":"Healthy","blurb":"A link is a navigation element most commonly used to navigate from one page to another","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/loading","title":"Loading","group":"Components","status":"Healthy","blurb":"Different ways to indicate something is loading","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/menu/flyout","title":"Flyout Menu","group":"Components","status":"Healthy","blurb":"Flyout Menu is a Menu that opens on hover vs click","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/menu/mega","title":"Mega Menu","group":"Components","status":"Planned","blurb":"Dropdown / overlay that behaves more like a Modal","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/menu/application","title":"Application/Toolbar Menu","group":"Components","status":"Planned","blurb":"A group of dropdown navigation Menus or links that define an applications available actions","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/menu","title":"Menu / Dropdown","group":"Components","status":"Healthy","blurb":"An accessible dropdown menu. Used when the options are actions or navigations to other pages.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/modal","title":"Modal","group":"Components","status":"Dev","blurb":"Yes, another modal","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/pill","title":"Pill","group":"Components","status":"Healthy","blurb":"Pills are compact elements that represent an input, attribute, or action. Pills can be used to help users discover, identify, or refine content.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/popover/callout","title":"Callout","group":"Components","status":"Healthy","blurb":"Callouts are anchored components that can be used to teach, inform or guide users about certain features of the product.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/popover","title":"Popover","group":"Components","status":"Healthy","blurb":"Thin wrapper around PopperJS library","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/radio","title":"Radio","group":"Components","status":"Healthy","blurb":"A radio button is an element that allows a user to select a single item from a predefined list of options.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/recipes","title":"Recipes","group":"!Documentation","status":null,"blurb":"Some helpful guides to get started. Please let us know if you have any requests.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/select/select-menu","title":"Select Menu","group":"Components","status":"Healthy","blurb":"Implements a listbox UI component. <code>SelectMenu</code> is similar to a <code>Menu</code>, but keeps track of the selected item and displays it. It behaves similar to a native <code>select</code> element","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/card/selection-card","title":"Selection Card","group":"Components","status":"Healthy","blurb":"A card with checkbox or radio input selection","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/select","title":"Select","group":"Components","status":"Healthy","blurb":"Allows users pick a value from predefined options","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/skeleton","title":"Skeleton","group":"Components","status":"Healthy","blurb":"A building block for placeholder UI previews","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/slider","title":"Slider","group":"Components","status":"Healthy","blurb":"Used for making selections from a range of values","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/stack","title":"Stack","group":"Components","status":"Healthy","blurb":"A responsive flex layout component.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/switch","title":"Switch","group":"Components","status":"Healthy","blurb":"A toggle switch represents a physical switch that allows users to turn things on or off, like a light switch. Users expect switches to see an immediate effect when they toggle it on.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/status","title":"Status Indicator","group":"Components","status":"Healthy","blurb":"A badge variant representing a status.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/table/cell-recipes","title":"Cell Recipes","group":"Other","status":null,"blurb":"Reusable cell components","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/system-props","title":"System Props","group":"!Documentation","status":null,"blurb":"Houzz UI utilize \"System Props\", which give us a consistent interface to style our components through props. To achieve this, we use styled-system to group common props which are automatically applied to each component.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/table/column-recipes","title":"Column Recipes","group":"Other","status":null,"blurb":"Pre-configured column definitions for common patterns and use cases","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/table/view-customization","title":"View Customization","group":"Other","status":null,"blurb":"User table view preferences, storing and retreiving","isPrivate":true}}},{"node":{"frontmatter":{"path":"/components/tabs","title":"Tabs","group":"Components","status":"Healthy","blurb":"Tabs are used to navigate between related views within the same context.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/table","title":"Table","group":"Other","status":null,"blurb":"A collection of UI components for displaying data in tables","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/textarea","title":"Textarea","group":"Components","status":"Healthy","blurb":"Textareas allow users to input and edit a longer amount of custom text than a text field.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/text","title":"Text","group":"Components","status":"Healthy","blurb":"Text is the one of the main ways to communicate and convey ideas in product.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/tooltip","title":"Tooltip","group":"Components","status":"Healthy","blurb":"Tooltips display informative and guiding content when users hover over or focus on an element.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/toast","title":"Toast","group":"Components","status":"Dev","blurb":"Toasts show up to communicate messages to users with limited information and actions.","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/text-input","title":"Text Input","group":"Components","status":"Healthy","blurb":"TextInput let users enter and edit text","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/theme","title":"Theme","group":"!Documentation","status":null,"blurb":"Theme definition","isPrivate":null}}},{"node":{"frontmatter":{"path":"/components/toggle-button","title":"Toggle Button","group":"Components","status":"Healthy","blurb":"Serves as a tool to group related button options. The toggle component adjusts how content is presented on a page. A user cannot select two buttons at once; they must select one OR the other option.","isPrivate":null}}}]},"mdx":{"id":"6e95b523-da5d-5f31-ba43-1cb8f029ded9","body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"path\": \"/brand/photography\",\n  \"group\": \"Brand\",\n  \"title\": \"Photography\",\n  \"blurb\": \"Another visual communication tool, selecting the right photography is critical as it relates to our brand.\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h3\", {\n    \"id\": \"overview\"\n  }, \"Overview\"), mdx(\"p\", null, \"Art direction within Houzz photography aims to use instantly recognizable.To be able to do this successfully we need to be able to measure an image by its mood as much as its content.\"), mdx(\"p\", null, \"Photography should be inviting and immersive while demonstrating a clear focus on the subject matter. Full bleed photography provides different tonality and can be used to express a different message while using limited copy.\"), mdx(\"h3\", {\n    \"id\": \"lifestyle\"\n  }, \"Lifestyle\"), mdx(\"p\", null, \"The manner in which photos are cropped should add dynamism and scale should be used to create excitement and tension.\"), mdx(\"p\", null, \"Rooms\"), mdx(\"p\", null, \"Detail Shots\"), mdx(\"p\", null, \"Exteriors\"), mdx(\"h3\", {\n    \"id\": \"portraits\"\n  }, \"Portraits\"), mdx(\"p\", null, \"Photos in which people are interacting should not look staged.\"), mdx(\"p\", null, \"These portraits of our professionals and home owners should feel approachable, real, and capture the personalities of the subject matters.\"), mdx(\"p\", null, \"Home Professionals\"), mdx(\"p\", null, \"Homeowners\"), mdx(\"p\", null, \"Houzzers\"), mdx(\"h3\", {\n    \"id\": \"product-depictions\"\n  }, \"Product Depictions\"), mdx(\"p\", null, \"When using Houzz or Houzz Pro product screens within lifestyler photography, mock these screens into real, relevant, and up-to-date devices. The focus should always be on the screens, yet the devices feel natural in terms of the photo composition. They can be shown in use or in a scene that is relevant to home renovation pros and homeowners.\"), mdx(\"p\", null, \"When depicting the product screens in materials, make sure the interface matches the device. For example: when depicting Houzz or Houzz Pro within a photo of a phone, make sure to use the mobile interface. The same applies for tablet and desktop depictions.\"), mdx(\"h3\", {\n    \"id\": \"marketplace-products\"\n  }, \"Marketplace Products\"), mdx(\"p\", null, \"Another method to create focus on the subject matter is by silhouetting photos. More white space can be achieved by doing so, which helps with copy fitting. This is a technique that can be used when the quality of the supplied photography isn\\u2019t at the desired standard.\"), mdx(\"h3\", {\n    \"id\": \"photography-misuse\"\n  }, \"Photography Misuse\"), mdx(\"p\", null, \"When selecting photography to use within Houzz communications and materials please avoid the following don'ts that can be found on the right. The imagery selected should always be clean, simple, and bright.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Avoid photography with unintentional people in the background.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Avoid photography that is too busy or messy.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Avoid dark or overly saturated photography. They should be light and airy in tone.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Avoid awkward or strange cropping of photography.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Avoid warping or stretching of photography.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Avoid copyright images with iconic furniture.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Avoid modifying images in any way that would change the appearance of rooms and furniture showcased.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Avoid placing any colored overlays or filters over images, black, dark gray, and white are accepted.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Avoid using clich\\xE9 images that attempt to represent a concept while not portraying the real world of home renovation and design.\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"path":"/brand/photography","title":"Photography","group":"Brand","status":null,"blurb":"Another visual communication tool, selecting the right photography is critical as it relates to our brand.","externalLink":null,"isPrivate":null}}},"pageContext":{"id":"6e95b523-da5d-5f31-ba43-1cb8f029ded9","node":{"id":"6e95b523-da5d-5f31-ba43-1cb8f029ded9","frontmatter":{"path":"/brand/photography","title":"Photography","group":"Brand","status":null,"blurb":"Another visual communication tool, selecting the right photography is critical as it relates to our brand."}},"pages":[{"node":{"id":"b1dc4ce9-2d6d-53d7-917e-287a01e8f7d5","frontmatter":{"path":"/foundations","title":"Foundations","group":null,"status":null,"blurb":null}}},{"node":{"id":"d83ef77e-574d-5915-92b1-1a69fe0b9a5a","frontmatter":{"path":"/foundations/colors","title":"Colors","group":"Foundations","status":null,"blurb":"Overview of semantic colors and the full color palette"}}},{"node":{"id":"11a9675f-4e65-582d-a0b6-f897053e960a","frontmatter":{"path":"/foundations/layout","title":"Layout","group":"Foundations","status":null,"blurb":"Spacing between elements on the page are organized in units of 4px."}}},{"node":{"id":"afbfed98-77f1-5d3e-b928-442dbeafa6dc","frontmatter":{"path":"/foundations/accessibility","title":"Accessibility","group":"Foundations","status":null,"blurb":"We aim to make our website and software accessible to the widest audience possible"}}},{"node":{"id":"fa324d40-a574-5e2e-94b8-48029b62c3fc","frontmatter":{"path":"/foundations/motion","title":"Motion","group":"Foundations","status":null,"blurb":"I like the way you move"}}},{"node":{"id":"65b2a806-af4b-5be0-b36d-e03392c7a321","frontmatter":{"path":"/foundations/shadows","title":"Shadows","group":"Foundations","status":null,"blurb":"Shadow is the visual way to communicate the elevation and hierarchy of components."}}},{"node":{"id":"dc4eb025-8699-55e1-84bd-505abd64fd9a","frontmatter":{"path":"/foundations/radii","title":"Radii","group":"Foundations","status":null,"blurb":"Corner radii are generally organized in units of 2px"}}},{"node":{"id":"33b615ef-7950-539a-b5ba-fed91799babe","frontmatter":{"path":"/brand/color","title":"Color","group":"Brand","status":null,"blurb":"Our color system develops on our unique aesthetic and offers flexibility to harmonize the visual consistency across every touchpoint."}}},{"node":{"id":"7afb50a7-8417-54a4-a2e5-b647478f00b8","frontmatter":{"path":"/foundations/typography","title":"Typography","group":"Foundations","status":null,"blurb":"Houzz typography system can be used with other components to present content and product clearly and effectively to users."}}},{"node":{"id":"a33d06ae-8782-5cb2-b977-f1bccb9e6ff1","frontmatter":{"path":"/brand/glyphs","title":"Glyphs","group":"Brand","status":null,"blurb":"The Houzz glyphs are single-color icons portraying a subject as is, serving as a visual cue throughout the web and mobile products and marketing materials."}}},{"node":{"id":"7c51fc76-5e7a-502f-a747-cacd0ca1f7c4","frontmatter":{"path":"/brand","title":"Brand","group":null,"status":null,"blurb":null}}},{"node":{"id":"7e166960-2791-5e2e-aa05-12b5691f0a03","frontmatter":{"path":"/brand/illustration","title":"Illustrations","group":"Brand","status":null,"blurb":"As a visual communication tool, Houzz's illustration supports the effective and efficient delivery of messages and story-telling."}}},{"node":{"id":"e12d67c9-e94f-544a-ab41-68126b8d74cf","frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null}}},{"node":{"id":"2f2eb971-8a23-5dc3-abd9-12f38fe2d029","frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null}}},{"node":{"id":"3071cd54-233f-5f1d-b565-5d63bbab7c9b","frontmatter":{"path":"/brand/logo/architecture","title":"Brand Architecture","group":"Brand","status":null,"blurb":"Our brand architecture system organizes our sub-brands, products and partnerships to help users relate to Houzz."}}},{"node":{"id":"c5d8ff35-43a0-5fd7-bf43-42d5a1a43af3","frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null}}},{"node":{"id":"11304056-763d-5091-a217-926e12e5f67f","frontmatter":{"path":null,"title":"","group":null,"status":null,"blurb":null}}},{"node":{"id":"30861bed-430c-50b3-a7f8-8379387da249","frontmatter":{"path":"/brand/logo","title":"The Logo","group":"Brand","status":null,"blurb":"The Houzz logos are one of our most valuable assets. It sets us apart from our competitors and represents everything we are: our experience, our values and our offerings."}}},{"node":{"id":"b0f0f4b3-59a1-53af-bbe5-ead254cc0e58","frontmatter":{"path":"/brand/product-illustrations","title":"Product Illustrations","group":"Brand","status":null,"blurb":"Our product illustrations reference Houzz physical products in a simple manner to create educational moments as opposed to relying on a metaphorical narrative."}}},{"node":{"id":"6e95b523-da5d-5f31-ba43-1cb8f029ded9","frontmatter":{"path":"/brand/photography","title":"Photography","group":"Brand","status":null,"blurb":"Another visual communication tool, selecting the right photography is critical as it relates to our brand."}}},{"node":{"id":"a5333b1b-1157-5d4c-a305-b4531ca9b03e","frontmatter":{"path":"/brand/secondary-graphics","title":"Secondary Graphics","group":"Brand","status":null,"blurb":"Secondary graphics are the visual elements we use to visualize our brand personality and to tell the story of our positioning statement and messaging."}}},{"node":{"id":"1f51cdee-e86f-57cd-818f-d7958d0fae60","frontmatter":{"path":"/writing","title":"Content","group":null,"status":null,"blurb":null}}},{"node":{"id":"010435bb-746a-50d6-af4c-5d7780e0970e","frontmatter":{"path":"/writing/language-grammar","title":"Language & Grammar","group":"Content","status":null,"blurb":null}}},{"node":{"id":"59bc2813-8d7a-50c4-ade7-1e5c5108ac5d","frontmatter":{"path":"/writing/messaging-guidelines","title":"Messaging Guidelines","group":"Content","status":null,"blurb":null}}},{"node":{"id":"69d1ad2a-073c-58e9-84f5-da5b8b044107","frontmatter":{"path":"/brand/typography","title":"Typography","group":"Brand","status":null,"blurb":"Typography is our system of fonts. Our font Proxima Nova assists our homeowners and home renovation professionals through each stage of their journey."}}},{"node":{"id":"d4154e3f-1c29-5335-8dd1-99173fd7015c","frontmatter":{"path":"/writing/vocabulary","title":"Vocabulary","group":"Content","status":null,"blurb":null}}},{"node":{"id":"1b9099bf-82d6-56d0-aa98-f023d7e0831e","frontmatter":{"path":"/writing/writing-style","title":"Writing Style","group":"Content","status":null,"blurb":null}}},{"node":{"id":"ba9ad8b9-1bad-5ccc-ba0d-e2e69ed9dc48","frontmatter":{"path":"/writing/voice-tone","title":"Voice & Tone","group":"Content","status":null,"blurb":null}}},{"node":{"id":"fdd8d1e2-0ee7-5817-a3cf-0b4848adcdfc","frontmatter":{"path":"/marketing","title":"Marketing","group":null,"status":null,"blurb":null}}},{"node":{"id":"2c9a9c62-e4e0-5bb1-94fd-0240c42b3b9b","frontmatter":{"path":"/components/avatar/avatar-group","title":"Avatar Group","group":"Components","status":"Healthy","blurb":"Displays a list of avatars as a stack, allowing to limit the maximum number of avatars visible. "}}},{"node":{"id":"90fe01c4-1426-58d9-a6f4-c28e0c3ad4fb","frontmatter":{"path":"/components/collapsible/accordion","title":"Accordion","group":"Components","status":"Healthy","blurb":"Use an accordion simple to reduce page length or scrolling by the user when a single content block would require too much space."}}},{"node":{"id":"c0bc4539-4a48-59ed-a2af-1d01e4d4d7e5","frontmatter":{"path":"/components/badge","title":"Badge","group":"Components","status":"Healthy","blurb":"A non-interactive badge component"}}},{"node":{"id":"bcf11124-78ef-59e4-ae7e-62c36a334b14","frontmatter":{"path":"/components/avatar","title":"Avatar","group":"Components","status":"Healthy","blurb":"Represents a user and can display a profile picture or initials. If neither are available, it will fallback to a ghost icon."}}},{"node":{"id":"d6dffaba-27bd-578d-9c4e-6c090bd146e7","frontmatter":{"path":"/components/banner","title":"Banner","group":"Components","status":"Healthy","blurb":"Banners show important information sunch as persistent condition, system status etc to users."}}},{"node":{"id":"3d37e26a-df91-58b8-bfc2-4c377aed6559","frontmatter":{"path":"/components/box","title":"Box","group":"Components","status":"Healthy","blurb":"The Box component serves as a wrapper component for most layout needs. By default, it renders a <code>div</code> element"}}},{"node":{"id":"8019b49d-547c-5bb2-aaaf-cc3224b1661a","frontmatter":{"path":"/components/button/button-group","title":"Button Group","group":"Components","status":"Healthy","blurb":"ButtonGroup helps grouping the multiple buttons with same style"}}},{"node":{"id":"f97a0113-67ee-546f-94fd-c18deb4c25b2","frontmatter":{"path":"/components/checkbox","title":"Checkbox","group":"Components","status":"Healthy","blurb":"Used for selecting one or multiple items from several options."}}},{"node":{"id":"2ad7848e-e8fb-57c2-acab-f410c68a65b6","frontmatter":{"path":"/components/button","title":"Button","group":"Components","status":"Healthy","blurb":"Buttons make common actions more obvious and help users more easily perform them. Buttons use text and sometimes icons to communicate the action that will occur when the user interacts with them."}}},{"node":{"id":"6906dd9d-cf3f-55e3-a376-459ef9547354","frontmatter":{"path":"/components/card","title":"Card","group":"Components","status":"Healthy","blurb":"A card"}}},{"node":{"id":"1a02ab4c-cced-57b5-a9f2-7043a33179a1","frontmatter":{"path":"/components/content-icon","title":"Content Icon","group":"Components","status":"Healthy","blurb":"A base component useful for implementing color-coded icons representing features, documents etc."}}},{"node":{"id":"ca6ffccb-55ea-5aac-abb6-45ba93e4496a","frontmatter":{"path":"/components/get-started","title":"Getting Started","group":"!Documentation","status":null,"blurb":"<code>houzz-ui</code> is already integrated with Houzz jukwaa applications. Below is a guide to setting up in a new app, or information if you're curious what tooling we use."}}},{"node":{"id":"5f166b4e-e70a-520b-a9a6-e39cbaf9febc","frontmatter":{"path":"/components/collapsible","title":"Collapsible","group":"Components","status":"Healthy","blurb":"The collapsible is a UI component for expanding or collapsing content areas within a page."}}},{"node":{"id":"5f48b800-e465-572b-ab60-b43d525b5f65","frontmatter":{"path":"/components/icon/concept-icon","title":"Concept Icon","group":"Components","status":"Healthy","blurb":"Houzz concept (aka tier 2) icons"}}},{"node":{"id":"f1f56efb-89b3-5c8e-aa53-b77efcd3ebe7","frontmatter":{"path":"/components/grid","title":"Grid","group":"Components","status":"Healthy","blurb":"A responsive grid layout component."}}},{"node":{"id":"eada18cf-eb10-571f-95ea-32f12901126f","frontmatter":{"path":"/components/guide","title":"Developer Guide","group":"!Documentation","status":null,"blurb":"<code>houzz-ui</code> was created to provide a composable, accessibile, extendable / themable component library based off of Houzz's design system and principles."}}},{"node":{"id":"66658803-fc4d-5761-8206-3a2214403f5c","frontmatter":{"path":"/components","title":"Components","group":null,"status":null,"blurb":null}}},{"node":{"id":"40863596-04c7-54c9-97c6-7e838b7b7326","frontmatter":{"path":"/components/icon","title":"Icon","group":"Components","status":"Healthy","blurb":"Houzz icons"}}},{"node":{"id":"6d507b41-b0e6-5577-bd36-19008e205e94","frontmatter":{"path":"/components/link","title":"Link","group":"Components","status":"Healthy","blurb":"A link is a navigation element most commonly used to navigate from one page to another"}}},{"node":{"id":"a59bcc48-1e76-5ce3-b1fb-de336d46218f","frontmatter":{"path":"/components/loading","title":"Loading","group":"Components","status":"Healthy","blurb":"Different ways to indicate something is loading"}}},{"node":{"id":"e944f8cd-6aa6-587f-9a22-ef18ee0d2596","frontmatter":{"path":"/components/menu/flyout","title":"Flyout Menu","group":"Components","status":"Healthy","blurb":"Flyout Menu is a Menu that opens on hover vs click"}}},{"node":{"id":"daa7d68e-457c-5416-8045-36a79f9fdf45","frontmatter":{"path":"/components/menu/mega","title":"Mega Menu","group":"Components","status":"Planned","blurb":"Dropdown / overlay that behaves more like a Modal"}}},{"node":{"id":"077160a7-0552-5ce6-a313-0a64d3a34b7f","frontmatter":{"path":"/components/menu/application","title":"Application/Toolbar Menu","group":"Components","status":"Planned","blurb":"A group of dropdown navigation Menus or links that define an applications available actions"}}},{"node":{"id":"c9e38231-1169-5b12-b147-237e7f4a619d","frontmatter":{"path":"/components/menu","title":"Menu / Dropdown","group":"Components","status":"Healthy","blurb":"An accessible dropdown menu. Used when the options are actions or navigations to other pages."}}},{"node":{"id":"a2f3f0c2-5f34-5160-bf1c-d6dc8b5debe8","frontmatter":{"path":"/components/modal","title":"Modal","group":"Components","status":"Dev","blurb":"Yes, another modal"}}},{"node":{"id":"ed7ad56b-1342-5000-b0dd-653ad441bbf2","frontmatter":{"path":"/components/pill","title":"Pill","group":"Components","status":"Healthy","blurb":"Pills are compact elements that represent an input, attribute, or action. Pills can be used to help users discover, identify, or refine content."}}},{"node":{"id":"3b6a83b4-6a8c-547e-beb4-5f89c973c585","frontmatter":{"path":"/components/popover/callout","title":"Callout","group":"Components","status":"Healthy","blurb":"Callouts are anchored components that can be used to teach, inform or guide users about certain features of the product."}}},{"node":{"id":"11763dfd-97fd-5715-b82c-dfb1a552271a","frontmatter":{"path":"/components/popover","title":"Popover","group":"Components","status":"Healthy","blurb":"Thin wrapper around PopperJS library"}}},{"node":{"id":"83e37a90-02d4-5c99-abc0-a6f0fab63d80","frontmatter":{"path":"/components/radio","title":"Radio","group":"Components","status":"Healthy","blurb":"A radio button is an element that allows a user to select a single item from a predefined list of options."}}},{"node":{"id":"0be84773-2231-5c17-912e-5948ce565df9","frontmatter":{"path":"/components/recipes","title":"Recipes","group":"!Documentation","status":null,"blurb":"Some helpful guides to get started. Please let us know if you have any requests."}}},{"node":{"id":"e6cea260-b678-5b95-aff2-e6c2a2ec3a38","frontmatter":{"path":"/components/select/select-menu","title":"Select Menu","group":"Components","status":"Healthy","blurb":"Implements a listbox UI component. <code>SelectMenu</code> is similar to a <code>Menu</code>, but keeps track of the selected item and displays it. It behaves similar to a native <code>select</code> element"}}},{"node":{"id":"e07e66f7-7239-512c-9faf-c96913db4e79","frontmatter":{"path":"/components/card/selection-card","title":"Selection Card","group":"Components","status":"Healthy","blurb":"A card with checkbox or radio input selection"}}},{"node":{"id":"610cccd0-ea93-5b3d-a3f7-38c6e05c7a5e","frontmatter":{"path":"/components/select","title":"Select","group":"Components","status":"Healthy","blurb":"Allows users pick a value from predefined options"}}},{"node":{"id":"1d747ae1-ad09-5b74-8af4-d366c1a627df","frontmatter":{"path":"/components/skeleton","title":"Skeleton","group":"Components","status":"Healthy","blurb":"A building block for placeholder UI previews"}}},{"node":{"id":"8031e4bd-3c38-5481-a5c9-84e8f2668994","frontmatter":{"path":"/components/slider","title":"Slider","group":"Components","status":"Healthy","blurb":"Used for making selections from a range of values"}}},{"node":{"id":"f02ec73f-59fa-56d9-9e32-1fd3c96813aa","frontmatter":{"path":"/components/stack","title":"Stack","group":"Components","status":"Healthy","blurb":"A responsive flex layout component."}}},{"node":{"id":"d1fbedca-1d1b-5399-a269-bc5d02c00642","frontmatter":{"path":"/components/switch","title":"Switch","group":"Components","status":"Healthy","blurb":"A toggle switch represents a physical switch that allows users to turn things on or off, like a light switch. Users expect switches to see an immediate effect when they toggle it on."}}},{"node":{"id":"cd048b42-2ffc-5fc9-9710-f803a04928c6","frontmatter":{"path":"/components/status","title":"Status Indicator","group":"Components","status":"Healthy","blurb":"A badge variant representing a status."}}},{"node":{"id":"48b0f7d8-8b22-5f97-8aaf-ceb1f46463e4","frontmatter":{"path":"/components/table/cell-recipes","title":"Cell Recipes","group":"Other","status":null,"blurb":"Reusable cell components"}}},{"node":{"id":"54a4165f-5494-5853-b57f-a7a5cbaffe25","frontmatter":{"path":"/components/system-props","title":"System Props","group":"!Documentation","status":null,"blurb":"Houzz UI utilize \"System Props\", which give us a consistent interface to style our components through props. To achieve this, we use styled-system to group common props which are automatically applied to each component."}}},{"node":{"id":"03e22f65-d8c2-5419-9e2d-112f2cb9af9b","frontmatter":{"path":"/components/table/column-recipes","title":"Column Recipes","group":"Other","status":null,"blurb":"Pre-configured column definitions for common patterns and use cases"}}},{"node":{"id":"5bed3923-39fe-50cf-a556-2b12767eddd9","frontmatter":{"path":"/components/table/view-customization","title":"View Customization","group":"Other","status":null,"blurb":"User table view preferences, storing and retreiving"}}},{"node":{"id":"d2d6b699-a889-5f7e-b87d-dacc0c00fdf2","frontmatter":{"path":"/components/tabs","title":"Tabs","group":"Components","status":"Healthy","blurb":"Tabs are used to navigate between related views within the same context."}}},{"node":{"id":"7c5563dd-0ac6-5467-a165-bb658e2c1b44","frontmatter":{"path":"/components/table","title":"Table","group":"Other","status":null,"blurb":"A collection of UI components for displaying data in tables"}}},{"node":{"id":"dd9f3e0c-751d-5b99-b9a4-c277766a96df","frontmatter":{"path":"/components/textarea","title":"Textarea","group":"Components","status":"Healthy","blurb":"Textareas allow users to input and edit a longer amount of custom text than a text field."}}},{"node":{"id":"ddcf504e-d455-5c08-9b16-225dc26c01a1","frontmatter":{"path":"/components/text","title":"Text","group":"Components","status":"Healthy","blurb":"Text is the one of the main ways to communicate and convey ideas in product."}}},{"node":{"id":"5627bb35-b4a3-58fe-bd5d-af5930cb59b8","frontmatter":{"path":"/components/tooltip","title":"Tooltip","group":"Components","status":"Healthy","blurb":"Tooltips display informative and guiding content when users hover over or focus on an element."}}},{"node":{"id":"88df8296-1a52-508e-8af1-5f2ea8aa57a1","frontmatter":{"path":"/components/toast","title":"Toast","group":"Components","status":"Dev","blurb":"Toasts show up to communicate messages to users with limited information and actions."}}},{"node":{"id":"abac1003-bdcf-5422-b696-c01e68e8214d","frontmatter":{"path":"/components/text-input","title":"Text Input","group":"Components","status":"Healthy","blurb":"TextInput let users enter and edit text"}}},{"node":{"id":"e9b9f42b-34be-51ba-83c6-057305de3725","frontmatter":{"path":"/components/theme","title":"Theme","group":"!Documentation","status":null,"blurb":"Theme definition"}}},{"node":{"id":"8b7c730b-d8b1-52cf-bc1b-484416842426","frontmatter":{"path":"/components/toggle-button","title":"Toggle Button","group":"Components","status":"Healthy","blurb":"Serves as a tool to group related button options. The toggle component adjusts how content is presented on a page. A user cannot select two buttons at once; they must select one OR the other option."}}}]}},
    "staticQueryHashes": []}