[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fchoosing-colors-in-user-interface-design":663,"blog-author-\u002Fblog\u002Fchoosing-colors-in-user-interface-design":1103,"i-material-symbols:arrow-back-rounded":1115},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Sign in","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","VdirGIa8cUm6xLprbBeTKcw914JfyJjWfF-9hSVOX5Y",{"id":87,"extension":5,"links":88,"meta":660,"stem":661,"__hash__":662},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,295,299,303,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,453,457,461,465,469,473,477,480,483,486,489,493,497,500,504,508,512,516,520,524,528,532,536,540,544,548,551,555,559,563,567,571,574,577,580,584,587,591,595,599,603,606,610,614,617,620,623,627,631,635,638,641,644,648,652,656],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":209,"label":210,"href":211},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":213,"label":214,"href":215},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":217,"label":218,"href":219},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":221,"label":222,"href":223},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":225,"label":226,"href":227},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":229,"label":230,"href":231},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":233,"label":234,"href":235},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":237,"label":238,"href":239},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":241,"label":242,"href":243},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":245,"label":246,"href":247},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":249,"label":250,"href":251},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":253,"label":254,"href":255},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":257,"label":258,"href":259},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":261,"label":262,"href":263},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":265,"label":266,"href":267},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":269,"label":270,"href":271},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":273,"label":274,"href":275},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":277,"label":278,"href":279},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":281,"label":282,"href":283},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":285,"label":286,"href":287},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":289,"label":290,"href":291},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":293,"label":294,"href":92},"docs.desktop.download","Desktop download docs",{"key":296,"label":297,"href":298},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":300,"label":301,"href":302},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":304,"label":305,"href":207},"docs.piecesOS.install","PiecesOS install docs",{"key":307,"label":308,"href":309},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":311,"label":312,"href":313},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":315,"label":316,"href":317},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":319,"label":320,"href":321},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":323,"label":324,"href":325},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":327,"label":328,"href":329},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":331,"label":332,"href":333},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":335,"label":336,"href":337},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":343,"label":344,"href":345},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":347,"label":348,"href":349},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":351,"label":352,"href":353},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":355,"label":356,"href":357},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":359,"label":360,"href":361},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":363,"label":364,"href":365},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":367,"label":368,"href":369},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":371,"label":372,"href":373},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":375,"label":376,"href":377},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":379,"label":380,"href":381},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":383,"label":384,"href":385},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":387,"label":388,"href":389},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":391,"label":392,"href":393},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":395,"label":396,"href":397},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":399,"label":400,"href":401},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":403,"label":404,"href":405},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":407,"label":408,"href":409},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":411,"label":412,"href":413},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":415,"label":416,"href":417},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":419,"label":420,"href":421},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":423,"label":424,"href":425},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":427,"label":428,"href":429},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":431,"label":432,"href":433},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":435,"label":436,"href":437},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":439,"label":440,"href":441},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":443,"label":444,"href":445},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":447,"label":448,"href":449},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":451,"label":58,"href":452},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":454,"label":455,"href":456},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":458,"label":459,"href":460},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":462,"label":463,"href":464},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":466,"label":467,"href":468},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":470,"label":471,"href":472},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":474,"label":475,"href":476},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":478,"label":34,"href":479},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":481,"label":43,"href":482},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":484,"label":46,"href":485},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":487,"label":488,"href":485},"social.twitter","Twitter",{"key":490,"label":491,"href":492},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":494,"label":495,"href":496},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":498,"label":49,"href":499},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":501,"label":502,"href":503},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":505,"label":506,"href":507},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":509,"label":510,"href":511},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":513,"label":514,"href":515},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":517,"label":518,"href":519},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":521,"label":522,"href":523},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":525,"label":526,"href":527},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":529,"label":530,"href":531},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":533,"label":534,"href":535},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":537,"label":538,"href":539},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":541,"label":542,"href":543},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":545,"label":546,"href":547},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":549,"label":550,"href":247},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":552,"label":553,"href":554},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":556,"label":557,"href":558},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":560,"label":561,"href":562},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":564,"label":565,"href":566},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":568,"label":569,"href":570},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":572,"label":573,"href":66},"legal.privacyPolicy","Privacy policy",{"key":575,"label":576,"href":69},"legal.refundPolicy","Refund policy",{"key":578,"label":579,"href":72},"legal.terms","Terms",{"key":581,"label":582,"href":583},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":585,"label":586,"href":503},"videos.youtubeChannel","YouTube channel",{"key":588,"label":589,"href":590},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":592,"label":593,"href":594},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":596,"label":597,"href":598},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":600,"label":601,"href":602},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":604,"label":605,"href":519},"sales.feedback","Feedback discussions",{"key":607,"label":608,"href":609},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":611,"label":612,"href":613},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":615,"label":616,"href":19},"routes.home","Home route",{"key":618,"label":619,"href":56},"routes.about","About route",{"key":621,"label":622,"href":12},"routes.downloads","Downloads route",{"key":624,"label":625,"href":626},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":628,"label":629,"href":630},"routes.pricing","Pricing route","\u002Fpricing",{"key":632,"label":633,"href":634},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":636,"label":637,"href":22},"routes.enterprise","Enterprise route",{"key":639,"label":640,"href":62},"routes.contact","Contact route",{"key":642,"label":643,"href":59},"routes.updates","Updates route",{"key":645,"label":646,"href":647},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":649,"label":650,"href":651},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":653,"label":654,"href":655},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":657,"label":658,"href":659},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","NLkVE1lIUws518K-1QsSB6T-GvlXYIzcRL1HDhqarGQ",{"id":664,"title":665,"author":666,"authorPhoto":667,"authorPhotoAlt":668,"authorSlug":669,"body":670,"buttonText":1090,"buttonUrl":1090,"category":1091,"date":1092,"description":1093,"draft":1094,"editorsPick":1094,"extension":1095,"featured":1094,"image":1096,"imageAlt":1097,"meta":1098,"navigation":32,"ogImage":1090,"ogImageAlt":1090,"path":1099,"seo":1100,"stem":1101,"tags":1090,"__hash__":1102},"blog\u002Fblog\u002Fchoosing-colors-in-user-interface-design.md","Tips on Choosing a User Interface Color Palette","Queendarlin Nnamani","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Ffundamentals-of-the-css-float-and-clear-properties\u002Fauthor.jpeg","Queendarlin Nnamani.","queendarlin-nnamani",{"type":671,"value":672,"toc":1072},"minimark",[673,677,682,685,708,712,729,733,736,740,743,767,772,775,779,782,788,794,800,806,812,818,824,830,836,842,846,857,864,870,873,879,885,888,894,897,900,906,912,915,921,925,928,951,955,958,998,1002,1005,1050,1054,1057],[674,675,676],"p",{},"The use of a good user interface color palette for your product design is a critical aspect of building visually appealing websites and applications. User interface colors influence people's perception of website designs, builds brand recognition, draws attention to specific elements of web pages, and gives meaning to designs. While there is no set list for the best colors for user interface design, the use of color theory, understanding color categories, color psychology, and color relationships are all essential when choosing colors for a website.",[678,679,681],"h2",{"id":680},"before-we-start-how-do-we-define-color","Before we Start: How do we Define Color?",[674,683,684],{},"Color is recognized through the reflection of light from objects. The eyes see color when any object reflects light. It has three main aspects:",[686,687,688,696,702],"ul",{},[689,690,691,695],"li",{},[692,693,694],"strong",{},"Hue",": Another name for color, and represents the base color, such as yellow, red or blue",[689,697,698,701],{},[692,699,700],{},"Value",": The lightness or darkness of a hue",[689,703,704,707],{},[692,705,706],{},"Intensity",": How bright or dull a hue is",[678,709,711],{"id":710},"the-importance-of-color-in-user-interface-design","The Importance of Color in User Interface Design",[686,713,714,717,720,723,726],{},[689,715,716],{},"It influences people's perception of your website designs.",[689,718,719],{},"It builds brand recognition.",[689,721,722],{},"It makes browsing your website more appealing.",[689,724,725],{},"It draws attention to certain elements of web pages.",[689,727,728],{},"It gives meaning to designs.",[678,730,732],{"id":731},"color-theory-un-ui-design","Color Theory un UI Design",[674,734,735],{},"Colors are significant in user interface design and represent the content of your website. Unfortunately, colors that distract and feel unnatural can make designs appear messy. Color theory is the application of art and science that helps to combine colors properly.  Understanding color theory can be very beneficial to deciding the right user interface color palette for your product.",[678,737,739],{"id":738},"understanding-colors","Understanding Colors",[674,741,742],{},"It’s crucial to understand colors and how to use them in your user interface designs. The different categories of colors include the following:",[744,745,746,752,758],"ol",{},[689,747,748,751],{},[692,749,750],{},"Primary colors definition",": The base colors from which other colors are derived. They include yellow, blue, and red.",[689,753,754,757],{},[692,755,756],{},"Secondary colors definition",": Combinations of primary colors. They include orange, green, and purple.",[689,759,760,763,766],{},[692,761,762],{},"Tertiary colors definition",[764,765],"combinations",{}," of primary and secondary colors. For example, tertiary colors include magenta (red+purple) and violet (blue+purple).",[768,769,771],"h3",{"id":770},"color-isolation-effect","Color Isolation Effect",[674,773,774],{},"The isolation effect is the standard for all designs and gives impact, making an element of your design stand out. For example, isolation effects make it easier for people to recognize your website. Brands make this possible by combining colors that match their designs' different sections.",[768,776,778],{"id":777},"ui-color-examples","UI Color Examples",[674,780,781],{},"Colors have different meanings, and it’s ideal to use the ones that match the concept of your design. Below are commonly accepted feelings associated with each color:",[674,783,784,787],{},[692,785,786],{},"Red:"," Boldness, power, excitement, strength, passion, desire",[674,789,790,793],{},[692,791,792],{},"Green:"," Harmony, life, nature, health, balance, freshness",[674,795,796,799],{},[692,797,798],{},"Blue:"," Professionalism, patience, peace, trustworthiness, stability, honor",[674,801,802,805],{},[692,803,804],{},"Brown:"," Confidence, comfort, relaxation, durability, reliability, honesty",[674,807,808,811],{},[692,809,810],{},"Yellow:"," Cheerfulness, brightness**,** energy, liveliness, happiness, intelligence, fun, warmth",[674,813,814,817],{},[692,815,816],{},"Purple:"," Nobility, royalty, wealth, luxury, wisdom, mystery",[674,819,820,823],{},[692,821,822],{},"Black:"," Sophistication, seriousness, elegance",[674,825,826,829],{},[692,827,828],{},"Orange:"," Friendliness, creativity, courage, youthfulness, adventure",[674,831,832,835],{},[692,833,834],{},"Pink:"," Affection, romance, peace, care",[674,837,838,841],{},[692,839,840],{},"White:"," Purity, innocence, simplicity",[768,843,845],{"id":844},"color-relationships","Color Relationships",[674,847,848,849,856],{},"Color relationships allow you to choose colors that relate to one another in a unique way. The color wheel shows the relationships between colors. Below is an image of the ",[850,851,855],"a",{"href":852,"rel":853},"https:\u002F\u002Fwww.canva.com\u002Fcolors\u002Fcolor-wheel\u002F",[854],"nofollow","Canva color wheel"," followed by explanations of the different color relationships you can use.",[674,858,859],{},[860,861],"img",{"alt":862,"src":863},"The color wheel with blue selected.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fchoosing-colors-in-user-interface-design\u002Fimg-001.png",[674,865,866,869],{},[692,867,868],{},"Monochromatic Color Relationship:"," This involves using one color with different variations of that color, such as shades of blue, shades of green, etc. Monochromatic colors look sophisticated in designs, but the contrast can be minimal, which can make it difficult for specific design elements to stand out. However, you can avoid this by intentionally making your design elements more visible – for example, using bright colors for the text.",[674,871,872],{},"Below is an example of a monochromatic relationship.",[674,874,875],{},[860,876],{"alt":877,"src":878},"A green-on-green monochromatic landing page.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fchoosing-colors-in-user-interface-design\u002Fimg-002.png",[674,880,881,884],{},[692,882,883],{},"Complementary Color Relationship:"," Using a pair of colors that lie directly across from each other on the color wheel is called a complementary relationship. Examples of complementary relationships include green and red, blue and orange, and yellow and purple. The high contrast between complementary colors makes your design bright and noticeable.",[674,886,887],{},"It’s ideal to use complementary colors when you want to draw attention to or emphasize certain elements of your designs. However, mobile application designers should avoid using too many complementary colors because their bold contrast can exhaust the eyes quickly.",[674,889,890,893],{},[692,891,892],{},"Triadic Relationship:"," This uses three colors by picking the colors to the right and left of the base color in the color wheel. The three colors are equal distances from each other on the wheel, forming a triangle shape. Examples of triadic color relationships include purple\u002Fgreen\u002Forange, yellow\u002Fblue\u002Fred and blue-purple\u002Fred-orange\u002Fyellow-green.",[674,895,896],{},"Triadic colors create a balanced and harmonious relationship. It’s ideal to use triadic colors when you want to make something appear intriguing.",[674,898,899],{},"Below is an example of a triadic color relationship:",[674,901,902],{},[860,903],{"alt":904,"src":905},"A triadic landing page.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fchoosing-colors-in-user-interface-design\u002Fimg-003.png",[674,907,908,911],{},[692,909,910],{},"Analogous Color Relationship:"," This choice involves using a group of two or more colors next to each other on the color wheel—for example, red-orange\u002Forange\u002Fred or yellow\u002Fyellow-green\u002Fgreen. There is mild contrast with the analogous relationship.",[674,913,914],{},"Below is an example of an analogous color relationship:",[674,916,917],{},[860,918],{"alt":919,"src":920},"An analogous landing page.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fchoosing-colors-in-user-interface-design\u002Fimg-004.png",[678,922,924],{"id":923},"tips-on-color-usage-in-web-design","Tips on Color Usage in Web Design",[674,926,927],{},"These are general rules of thumb in color usage for creating exceptional designs, and can depend on individual preference:",[686,929,930,933,936,939,942,945,948],{},[689,931,932],{},"First, when choosing colors for your designs, decide on the desired color relationships.",[689,934,935],{},"To have a clear and clean design, use a single base color.",[689,937,938],{},"To draw attention to a design, use a color that stands out.",[689,940,941],{},"Avoid using one color for your website.",[689,943,944],{},"Avoid using black for your designs— black can feel unnatural.",[689,946,947],{},"Be intentional about the colors you choose. Getting the desired response from your audience goes beyond picking your favorite color.",[689,949,950],{},"If you want to use a lot of colors in your designs, it’s best to use a color tool.",[768,952,954],{"id":953},"how-to-practice-color-usage","How to Practice Color Usage",[674,956,957],{},"To master color usage in your own user interface designs, try out some of these tips:",[686,959,960,974,977,980,983,992,995],{},[689,961,962,963,968,969],{},"Go to ",[850,964,967],{"href":965,"rel":966},"https:\u002F\u002Fwww.awwwards.com\u002F",[854],"Awwwards"," or ",[850,970,973],{"href":971,"rel":972},"https:\u002F\u002Fdribbble.com\u002F",[854],"Dribbble",[689,975,976],{},"Search for a website",[689,978,979],{},"Pay attention to the use of colors on websites",[689,981,982],{},"Identify a website with two or more colors",[689,984,985,986,991],{},"Install the chrome extension ",[850,987,990],{"href":988,"rel":989},"https:\u002F\u002Fwww.colorzilla.com\u002Fchrome\u002F",[854],"Colorzilla"," to be able to find the exact color codes of the colors used on sites",[689,993,994],{},"Create designs with color schemes on the website to practice",[689,996,997],{},"If you’re looking for colors for your website or application, try experimenting with different color shades to get the one that meets your needs",[678,999,1001],{"id":1000},"color-tools-for-your-user-interface-designs","Color Tools for Your User Interface Designs",[674,1003,1004],{},"When adding colors, you can use a variety of color tools and websites to assist with color selection in your user interface designs. Here are some great color tools for designers:",[686,1006,1007,1014,1020,1028,1042],{},[689,1008,1009,1013],{},[850,1010,855],{"href":1011,"rel":1012},"https:\u002F\u002Fwww.canva.com\u002F",[854],": A tool for accessing the color wheel for picking color combinations.",[689,1015,1016,1019],{},[850,1017,990],{"href":988,"rel":1018},[854],": A Chrome extension you can use to pick out colors on a web page to know the exact colors. You can see the colors' codes on the web page.",[689,1021,1022,1027],{},[850,1023,1026],{"href":1024,"rel":1025},"https:\u002F\u002Ftrycolors.com\u002F",[854],"Trycolors",": An online color mixing tool that helps you mix colors to get a matching combination.",[689,1029,1030,1035,1036,1041],{},[850,1031,1034],{"href":1032,"rel":1033},"https:\u002F\u002Fwww.canva.com\u002Fcolors\u002Fcolor-palette-generator\u002F",[854],"Canva color palette generator",": Enables you to choose colors for your designs based on the picture you want to use in the design. It gives you a color combination that matches the image. Wepik, ",[850,1037,1040],{"href":1038,"rel":1039},"https:\u002F\u002Fwepik.com\u002F",[854],"this online template editor",", also provides a built-in color palette tool that can assist you in maintaining consistent and complementary color schemes throughout your designs.",[689,1043,1044,1049],{},[850,1045,1048],{"href":1046,"rel":1047},"https:\u002F\u002Fpieces.app\u002Fblog\u002Flearn-how-to-utilize-chakra-uis-color-mode-in-your-nextjs-application",[854],"Chakra UI",": If you’re more technical, Chakra UI is a popular open-source component library that provides a set of accessible and reusable UI components for building web applications with React. It offers a rich set of pre-designed UI elements such as buttons, forms, modals, tooltips, and more, that can be easily customized to fit the needs of any project.",[678,1051,1053],{"id":1052},"conclusion","Conclusion",[674,1055,1056],{},"Using color in user interface designs is a powerful aspect of website creation. Because of this, it’s super important to choose a good user interface color palette. A good UI color palette beautifies your work and helps you to create unique designs that users can easily navigate. Therefore, learning about and experimenting with color gives your designs an edge.",[674,1058,1059,1060,1065,1066,1071],{},"User interface design doesn’t end at color, there are more ",[850,1061,1064],{"href":1062,"rel":1063},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fuser-interface-neumorphism-glassmorphism",[854],"user interface principles"," to help you best design any UI. Furthermore, if you are struggling to ",[850,1067,1070],{"href":1068,"rel":1069},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fimprove-website-accessibility",[854],"improve your website accessibility",", Pieces can help with that!",{"title":1073,"searchDepth":1074,"depth":1074,"links":1075},"",2,[1076,1077,1078,1079,1085,1088,1089],{"id":680,"depth":1074,"text":681},{"id":710,"depth":1074,"text":711},{"id":731,"depth":1074,"text":732},{"id":738,"depth":1074,"text":739,"children":1080},[1081,1083,1084],{"id":770,"depth":1082,"text":771},3,{"id":777,"depth":1082,"text":778},{"id":844,"depth":1082,"text":845},{"id":923,"depth":1074,"text":924,"children":1086},[1087],{"id":953,"depth":1082,"text":954},{"id":1000,"depth":1074,"text":1001},{"id":1052,"depth":1074,"text":1053},null,"Productivity","2022-10-11T00:00:00.000Z","Selecting a color is an important aspect of website design. It goes beyond using your favorites and requires you to pick the best for your target audience.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fchoosing-colors-in-user-interface-design\u002Fhero.jpeg","decorative cover image showing a color palette.",{},"\u002Fblog\u002Fchoosing-colors-in-user-interface-design",{"title":665,"description":1093},"blog\u002Fchoosing-colors-in-user-interface-design","D64e4kHr4mbUDQpo79G_kCnEMxlxZsp3ge5xqVYAzSU",{"id":1104,"title":666,"body":1105,"description":1073,"draft":1094,"extension":1095,"meta":1109,"navigation":32,"path":1110,"photo":1111,"photoAlt":1090,"seo":1112,"stem":1113,"__hash__":1114},"authors\u002Fauthors\u002Fqueendarlin-nnamani.md",{"type":671,"value":1106,"toc":1107},[],{"title":1073,"searchDepth":1074,"depth":1074,"links":1108},[],{},"\u002Fauthors\u002Fqueendarlin-nnamani","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fqueendarlin-nnamani.png",{"title":666,"description":1073},"authors\u002Fqueendarlin-nnamani","ew_I3Z8CxdVOnSUhwhpJJkL5-zlWp8KOHxMXo_C6lDw",{"left":1116,"top":1116,"width":1117,"height":1117,"rotate":1116,"vFlip":1094,"hFlip":1094,"body":1118},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]