2:I[5650,["173","static/chunks/173-b4a1357369b6686e.js","13","static/chunks/app/articles/crafting-a-design-system-for-a-multiplanetary-future/page-91f3e31f5d75c8b1.js"],"ArticleLayout"]
3:I[8173,["173","static/chunks/173-b4a1357369b6686e.js","13","static/chunks/app/articles/crafting-a-design-system-for-a-multiplanetary-future/page-91f3e31f5d75c8b1.js"],"Image"]
4:I[9275,[],""]
5:I[1343,[],""]
6:I[2650,["501","static/chunks/c16f53c3-4935902af006763a.js","231","static/chunks/231-5df8fb61e376c60b.js","173","static/chunks/173-b4a1357369b6686e.js","124","static/chunks/124-da3f8f0926d1fc8b.js","185","static/chunks/app/layout-8a874e272fea26fe.js"],"Providers"]
7:I[6864,["501","static/chunks/c16f53c3-4935902af006763a.js","231","static/chunks/231-5df8fb61e376c60b.js","173","static/chunks/173-b4a1357369b6686e.js","124","static/chunks/124-da3f8f0926d1fc8b.js","185","static/chunks/app/layout-8a874e272fea26fe.js"],"Header"]
8:I[231,["231","static/chunks/231-5df8fb61e376c60b.js","173","static/chunks/173-b4a1357369b6686e.js","222","static/chunks/app/articles/page-b6f1b2a0f512fefc.js"],""]
0:["MezRQaEsIzoOK3i9oWyL8",[[["",{"children":["articles",{"children":["crafting-a-design-system-for-a-multiplanetary-future",{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],["",{"children":["articles",{"children":["crafting-a-design-system-for-a-multiplanetary-future",{"children":["__PAGE__",{},[["$L1",["$","$L2",null,{"article":{"author":"Kortby","date":"2022-09-05","title":"Crafting a Design System for a Multiplanetary Future","description":"In today’s digital landscape, a beautiful web design is more than just aesthetics..."},"children":[["$","h1",null,{"children":"Crafting a Design System for a Multiplanetary Future"}],"\n",["$","p",null,{"children":"In today's digital landscape, a beautiful web design is more than just aesthetics – it's about creating an experience that resonates with users while delivering seamless functionality. Let's explore the key elements that transform a good website into an exceptional one."}],"\n",["$","$L3",null,{"src":{"src":"/_next/static/media/planetaria-design-system.d4cfce90.png","height":872,"width":1310,"blurDataURL":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAANlBMVEUKFh8lMEE+RlgyO00vJ2wbIytNLJscITUqImspHlZxQFR2Y0ZDKoxMNXA7LnVdL6AoVVpVdmQ+/fZDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAALElEQVR4nAXBhwEAEBAAscNX3f7LSjARkYhgursCWO7Vx7uYltJqbRx1MuEDFtoA+SPDKegAAAAASUVORK5CYII=","blurWidth":8,"blurHeight":5},"alt":""}],"\n",["$","p",null,{"children":"Beautiful web design begins with thoughtful visual hierarchy. This means strategically arranging elements so users naturally flow through your content. Start with a compelling hero section that immediately communicates your value proposition. Use size, color, and spacing to guide attention to key elements, ensuring the most important information stands out."}],"\n",["$","h2",null,{"children":"Typography: The Silent Ambassador"}],"\n",["$","p",null,{"children":"Typography speaks volumes before users read a single word. Choose fonts that reflect your brand personality while maintaining excellent readability. A common approach is pairing a distinctive display font for headings with a clean, simple font for body text. The ideal line height (around 1.5-1.6) and comfortable line length (60-75 characters) create an effortless reading experience."}],"\n",["$","h2",null,{"children":"Color Psychology in Action"}],"\n",["$","p",null,{"children":"A sophisticated color palette can evoke specific emotions and strengthen brand recognition. Start with a primary color that embodies your brand's personality, then build a complementary palette. The 60-30-10 rule works well: 60% primary color, 30% secondary color, and 10% accent color. Remember to maintain sufficient contrast for accessibility."}],"\n",["$","h2",null,{"children":"White Space: The Breathing Room"}],"\n",["$","p",null,{"children":"Don't underestimate the power of white space (or negative space). It's not empty space – it's a crucial design element that gives your content room to breathe. Generous margins and padding around elements create visual clarity and improve comprehension. Think of white space as the pause between musical notes that makes the composition beautiful."}],"\n",["$","h2",null,{"children":"Responsive Design Excellence"}],"\n",["$","p",null,{"children":"Beautiful design must translate seamlessly across all devices. This means thinking beyond simple scaling – consider how elements reflow and reorganize on different screen sizes. Use flexible grids, fluid typography, and responsive images to ensure your design remains stunning whether viewed on a phone or desktop."}],"\n",["$","h2",null,{"children":"Micro-interactions: The Delightful Details"}],"\n",["$","p",null,{"children":"Small, thoughtful interactions can elevate your design from good to memorable. Subtle hover effects, smooth transitions, and meaningful animations provide feedback and delight users. However, exercise restraint – these elements should enhance the experience, not distract from it."}],"\n",["$","h2",null,{"children":"Performance as Design"}],"\n",["$","p",null,{"children":"A beautiful website must perform beautifully too. Optimize images, leverage modern formats like WebP, and implement lazy loading. Consider using techniques like skeleton screens during loading to maintain visual appeal while content loads. Remember, the most stunning design falls flat if users must wait too long to see it."}],"\n",["$","h2",null,{"children":"Content First Approach"}],"\n",["$","p",null,{"children":"Design should serve your content, not overshadow it. Start with your core message and build the design around it. Use clear visual hierarchy to guide users through your narrative. Ensure readability with appropriate contrast, font sizes, and spacing. Beautiful design amplifies your message rather than competing with it."}],"\n",["$","h2",null,{"children":"Accessibility is Beautiful"}],"\n",["$","p",null,{"children":"True beauty in web design is inclusive. Ensure sufficient color contrast, provide alt text for images, and maintain a logical tab order for keyboard navigation. Beautiful design should be accessible to everyone, regardless of how they interact with your site.\nThe Role of Consistency\nMaintain consistent spacing, typography, and interaction patterns throughout your site. This creates a cohesive experience that feels polished and professional. Document your design decisions in a style guide to ensure consistency as your site evolves."}],"\n",["$","h2",null,{"children":"Testing and Iteration"}],"\n",["$","p",null,{"children":"Beautiful design is refined through testing and iteration. Gather user feedback, analyze behavior patterns, and make data-informed improvements. Beautiful design evolves with your users' needs while maintaining its core aesthetic principles."}],"\n",["$","p",null,{"children":"Remember, beautiful web design is a balance of aesthetics and functionality. It requires understanding your users, your content, and the principles of visual design. When these elements align, you create not just a website, but an engaging digital experience that users love to interact with."}]]}]],null],null]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","articles","children","crafting-a-design-system-for-a-multiplanetary-future","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]},["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children","articles","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]},[["$","html",null,{"lang":"en","className":"h-full antialiased","suppressHydrationWarning":true,"children":["$","body",null,{"className":"flex h-full bg-zinc-50 dark:bg-black","children":["$","$L6",null,{"children":["$","div",null,{"className":"flex w-full","children":[["$","div",null,{"className":"fixed inset-0 flex justify-center sm:px-8","children":["$","div",null,{"className":"flex w-full max-w-7xl lg:px-8","children":["$","div",null,{"className":"w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20"}]}]}],["$","div",null,{"className":"relative flex w-full flex-col","children":[["$","$L7",null,{}],["$","main",null,{"className":"flex-auto","children":["$","$L4",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L5",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"sm:px-8 flex h-full items-center pt-16 sm:pt-32","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl lg:px-8","children":["$","div",null,{"className":"relative px-4 sm:px-8 lg:px-12","children":["$","div",null,{"className":"mx-auto max-w-2xl lg:max-w-5xl","children":["$","div",null,{"className":"flex flex-col items-center","children":[["$","p",null,{"className":"text-base font-semibold text-zinc-400 dark:text-zinc-500","children":"404"}],["$","h1",null,{"className":"mt-4 text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100","children":"Page not found"}],["$","p",null,{"className":"mt-4 text-base text-zinc-600 dark:text-zinc-400","children":"Sorry, we couldn’t find the page you’re looking for."}],["$","$L8",null,{"className":"inline-flex items-center gap-2 justify-center rounded-md py-2 px-3 text-sm outline-offset-2 transition active:transition-none bg-zinc-50 font-medium text-zinc-900 hover:bg-zinc-100 active:bg-zinc-100 active:text-zinc-900/60 dark:bg-zinc-800/50 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:active:bg-zinc-800/50 dark:active:text-zinc-50/70 mt-4","href":"/","children":"Go back home"}]]}]}]}]}]}],"notFoundStyles":[],"styles":null}]}],["$","footer",null,{"className":"mt-32 flex-none","children":["$","div",null,{"className":"sm:px-8","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl lg:px-8","children":["$","div",null,{"className":"border-t border-zinc-100 pt-10 pb-16 dark:border-zinc-700/40","children":["$","div",null,{"className":"relative px-4 sm:px-8 lg:px-12","children":["$","div",null,{"className":"mx-auto max-w-2xl lg:max-w-5xl","children":["$","div",null,{"className":"flex flex-col items-center justify-between gap-6 sm:flex-row","children":[["$","div",null,{"className":"flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm font-medium text-zinc-800 dark:text-zinc-200","children":[["$","$L8",null,{"href":"/about","className":"transition hover:text-sky-500 dark:hover:text-sky-400","children":"About"}],["$","$L8",null,{"href":"/projects","className":"transition hover:text-sky-500 dark:hover:text-sky-400","children":"Projects"}]]}],["$","p",null,{"className":"text-sm text-zinc-400 dark:text-zinc-500","children":["© ",2025," kortby . All rights reserved."]}]]}]}]}]}]}]}]}]]}]]}]}]}]}],null],null],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/240e7997b0d69ec9.css","precedence":"next","crossOrigin":"$undefined"}]],"$L9"]]]]
9:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Crafting a Design System for a Multiplanetary Future - kortby "}],["$","meta","3",{"name":"description","content":"In today’s digital landscape, a beautiful web design is more than just aesthetics..."}],["$","link","4",{"rel":"alternate","type":"application/rss+xml","href":"https://kortby.com/feed.xml"}]]
1:null