{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/2qQopn4WIR3LLJeLpOeZ/vIRvtrC3pvgQTrvrIoAP/epAzzOQ1Q.js"],
  "sourcesContent": ["import{jsx as e,jsxs as i}from\"react/jsx-runtime\";import{addPropertyControls as n,ControlType as t,Link as r}from\"framer\";import*as a from\"react\";let s=\"KHZzMyXdN\",o=\"ks5wykjz9\",l=\"qk2Ednyei\",c=\"TRYee_XNK\",d=\"ksz3Nuzv3\",h=\"G9SmQhwci\",g=\"o21fVCjpy\",p=\"jBTAhKkBs\",m=[{id:\"DBr8tb6Ha\",[s]:\"Section: Pricing\",[o]:\"section-pricing\",[l]:\"Pricing Section UI Components\",[c]:\"The Pricing section of our site template is a strategically designed area that plays a crucial role in presenting subscription plans or one-time payment options for products or services. This section is not only about listing prices but also about giving potential customers a clear, comparative overview of different offerings, enhancing their decision-making process.\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D224%253A14239%26mode%3Ddesign%26t%3DE4V2z0d7MGYPq9Iz-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=224%3A14239&mode=design&t=E4V2z0d7MGYPq9Iz-1\",[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Key Elements of the Pricing Section\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Plan Overview:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Multiple Options\"}),\": Showcases various pricing plans, catering to different customer needs or usage levels. This could include basic, standard, premium, or custom plans.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Clear Pricing\"}),\": Each plan\u2019s cost is displayed prominently, whether it\u2019s a one-time fee or a recurring subscription, ensuring transparency and ease of understanding.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Features and Comparisons:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"List of Features\"}),\": Alongside each plan, a detailed list of features or services included is provided. This helps customers understand what they get at each price point.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Comparative Layout\"}),\": Plans are often presented side-by-side to facilitate easy comparison. Highlighting exclusive features or services in higher-tier plans can encourage upgrades.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Aesthetic and Functional Design:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Beautiful Background\"}),\": The section is set against an aesthetically pleasing background, which enhances visual appeal and draws attention to the pricing information.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Interactive Elements\"}),\": Some templates include interactive features like hover effects over different plans, which can reveal more information or emphasize selected options.\"]}),/*#__PURE__*/e(\"h4\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Benefits of an Effective Pricing Section\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Informed Decision Making\"}),\": By providing a clear comparison of features and prices, customers can make informed decisions tailored to their needs.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Increased Conversions\"}),\": A well-structured pricing section, with straightforward information and appealing design, can significantly enhance conversion rates.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Brand Trust\"}),\": Transparency in pricing builds trust. Customers appreciate knowing exactly what they are paying for, without any hidden fees or surprises.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Applications\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"SaaS and Tech Products\"}),\": Ideal for software or tech services offering multiple subscription tiers or license types.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"E-commerce and Retail\"}),\": Useful for products with different pricing models, like one-time purchases versus subscriptions.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Service Industries\"}),\": Applicable for businesses offering tiered service packages, like hosting providers, marketing agencies, or consultancy firms.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"p\",{children:\"In summary, the Pricing section in our site template is meticulously crafted to effectively communicate value and cost across different plans or payment options. Set against an engaging background and with a focus on clarity and comparability, it is an essential component for any business that seeks to provide clear, concise, and attractive pricing information to its potential customers.\"})]})},{id:\"ht9sKrIAN\",[s]:\"Section: Features\",[o]:\"section-features\",[l]:\"Features Section UI Components\",[c]:\"The Features section of a site template plays a crucial role in detailing and highlighting the key attributes of a product or service. This section is designed to concisely communicate what sets the product apart, often serving as a decisive factor in engaging and converting potential customers. Our template offers a variety of layouts, including masonry, bento, and other unique configurations, to showcase these features effectively.\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D318%253A42345%26mode%3Ddesign%26t%3DE4V2z0d7MGYPq9Iz-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=318%3A42345&mode=design&t=E4V2z0d7MGYPq9Iz-1\",[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Essential Aspects of the Features Section\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Product Showcase:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Core Functionality\"}),\": Here, the primary functionalities and benefits of the product are showcased. This section is not just about listing features but also about explaining how these features solve problems or improve the user\u2019s experience.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Visual Elements\"}),\": Accompanied by relevant images, icons, or infographics, each feature is visually represented to enhance comprehension and retention.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Different Layouts for Diverse Appeal:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Masonry Layout\"}),\": Similar to a bricklaying pattern, this layout presents features in an organized yet dynamic format, ideal for sites with multiple, diverse features.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Bento Layout\"}),\": Inspired by the Japanese Bento box, this layout segments features into neat, equal sections, offering a clean and structured presentation.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Unique Layouts\"}),\": For more creative freedom, our template includes unique, custom layouts that can be tailored to the specific aesthetic of the site or the nature of the product.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Highlighting Important Features:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Prioritization\"}),\": The most impactful features are given prominence, either through size, placement, or additional graphical elements.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Detailing\"}),\": Each key feature is explained with enough detail to inform but not overwhelm the user, often including a brief description or a list of benefits.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Benefits of a Well-Designed Features Section\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Enhanced User Understanding\"}),\": Clearly presenting the features helps users quickly grasp what the product offers and why it\u2019s beneficial to them.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Visual Engagement\"}),\": With various layout options, the section becomes visually engaging, drawing users\u2019 attention and encouraging them to explore more.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Versatility\"}),\": Different layout styles cater to various content types and design aesthetics, making the section adaptable to a wide range of products and services.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Applications\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Tech Products and Apps\"}),\": Explain complex functionalities in an easily digestible format.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"E-Commerce Platforms\"}),\": Highlight the unique selling points of products.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Corporate Websites\"}),\": Detail the range of services or solutions offered by a company.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"p\",{children:\"In conclusion, the Features section in our site template is a pivotal area for communicating the value and uniqueness of a product or service. Through its various layout options and emphasis on visual and textual clarity, it provides an effective platform for businesses to showcase their offerings and engage with their audience.\"})]})},{id:\"kycA3Q5Ym\",[s]:\"Section: Hero\",[o]:\"section-hero\",[l]:\"Hero Sections UI Components\",[c]:\"The Hero section of a UI template is a pivotal part of web design, acting as the primary visual and informational focal point on a webpage. Recognizing its importance, our UI template offers multiple themes for the Hero section, catering to diverse design preferences and messaging strategies.\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D224%253A12831%26mode%3Ddesign%26t%3DE4V2z0d7MGYPq9Iz-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=224%3A12831&mode=design&t=E4V2z0d7MGYPq9Iz-1\",[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Characteristics of the Hero Section\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Prominent Positioning:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"First Engagement Point\"}),\": Located at the very top of a webpage, the Hero section is the first element that visitors encounter, setting the tone for their entire browsing experience.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Content and Messaging:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Core Message\"}),\": This section typically contains the most crucial message or value proposition, concisely communicated through a combination of impactful text and visuals.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Brand Representation\"}),\": It's a prime space for brand introduction, showcasing the essence of the brand or the key benefits of the product/service.\"]}),/*#__PURE__*/e(\"h5\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Visual Elements:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"High-Quality Images or Videos\"}),\": Depending on the chosen theme, the Hero section can feature striking imagery, engaging videos, or sleek animations that resonate with the site's overall aesthetic.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Engaging Backgrounds\"}),\": Options include full-width images, dynamic gradients, subtle animations, or minimalist designs, each setting a different mood and visual appeal.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Call-to-Action (CTA):\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Conversion-Focused\"}),\": A prominent CTA button is often included, encouraging visitors to take action, whether it\u2019s signing up, learning more, or viewing a product.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Multiple Themes in Our Template\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Diversity in Design\"}),\": Our template offers a range of thematic choices for the Hero section. These themes vary from bold and vibrant to sleek and understated, accommodating different brand personalities and campaign goals.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Customization Options\"}),\": Each theme provides customizable elements like color schemes, fonts, and CTA button styles, allowing for fine-tuning to meet specific branding requirements.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Benefits of a Well-Designed Hero Section\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Strong First Impression\"}),\": Captures visitor attention immediately, increasing engagement and interest in the website.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Enhanced User Experience\"}),\": A visually appealing and informative Hero section contributes to a positive overall user experience.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Increased Conversion Rates\"}),\": Effectively communicates key messages and drives visitor action, potentially increasing conversion rates.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Applications\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Marketing and Landing Pages\"}),\": Ideal for introducing new products, special campaigns, or brand overviews.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Portfolio Websites\"}),\": Artists and professionals can use it to make a strong personal brand statement.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"E-commerce Sites\"}),\": Perfect for highlighting special offers, new arrivals, or best-sellers.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"p\",{children:\"In summary, the Hero section in our UI template is more than just a banner; it\u2019s a strategic and versatile tool designed to make a lasting impression. With multiple themes and customization options, it offers the flexibility to create a compelling introduction to any website.\"})]})},{id:\"Dcf7GVgfh\",[s]:\"Template: Courses\",[o]:\"template-courses\",[l]:\"UI Template: Design and Code Courses\",[c]:\"Our UI template is specifically tailored for presenting online courses focused on design and coding. This template is designed to attract and engage learners, providing them with a comprehensive overview of the courses offered, ranging from beginner to advanced levels. It's structured to highlight key information such as course content, instructor expertise, student testimonials, and pricing options.\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D2420%253A838279%26mode%3Ddesign%26t%3DE4V2z0d7MGYPq9Iz-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=2420%3A838279&mode=design&t=E4V2z0d7MGYPq9Iz-1\",[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Key Sections of the Template\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Hero Section:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"First Impression\"}),\": Features a captivating hero area that immediately grabs attention, often with a compelling image or video and a clear, concise headline about the course offerings.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Call to Action\"}),\": Includes prominent call-to-action (CTA) buttons, like 'Enroll Now' or 'Learn More', guiding potential students to take the next step.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Features Highlights:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Course Benefits\"}),\": Outlines the key benefits and unique selling points of the courses, such as the skills learners will gain, the teaching methodology, and any unique course materials or resources.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Visually Engaging\"}),\": Utilizes icons, brief descriptions, and engaging graphics to make the information easily digestible and visually appealing.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Course Topics Overview:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Detailed Curriculum\"}),\": Breaks down the courses into core topics or modules, giving prospective students a clear idea of what to expect and the scope of what they'll learn.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Interactive Elements\"}),\": May include hover effects or clickable elements for users to explore course modules in more detail.\"]}),/*#__PURE__*/e(\"h5\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Testimonials and Reviews:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Student Feedback\"}),\": Showcases genuine testimonials from former students, highlighting their experiences and the outcomes of their learning.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Builds Trust\"}),\": Testimonials add credibility and give prospective students insights into the real-world application and benefits of the courses.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Pricing Information:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Transparent Pricing\"}),\": Clearly displays the pricing for different courses or packages, including any discounts or special offers.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Flexible Options\"}),\": May include different payment plans, subscription models, or money-back guarantees to accommodate various learner needs.\"]}),/*#__PURE__*/e(\"h4\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Advantages of Using the Template\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Engaging and Informative\"}),\": The template is designed to be both visually engaging and informative, ensuring that potential learners have all the information they need to make a decision.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"User-Friendly Navigation\"}),\": The layout is intuitive and easy to navigate, enhancing the user experience and increasing the likelihood of course enrollment.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Conversion Focused\"}),\": Each section is strategically designed to lead users towards enrollment, with clear CTAs and persuasive content.\"]}),/*#__PURE__*/e(\"h4\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Ideal Usage Scenarios\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Educational Platforms\"}),\": Ideal for online learning platforms or educational institutions looking to showcase their design and coding courses.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Independent Educators\"}),\": Useful for independent trainers or educators seeking to promote their personal brand and course offerings online.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Corporate Training Programs\"}),\": Can be adapted for businesses offering employee training programs in design and coding skills.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"p\",{children:\"In summary, this UI template is an effective tool for showcasing design and coding courses, combining aesthetic appeal with functional design to provide potential learners with a comprehensive, engaging overview of educational offerings.\"})]})},{id:\"tGa3BH4H1\",[s]:\"Template: Icons\",[o]:\"template-icons\",[l]:\"UI Template: Premium Icon Set\",[c]:\"Our UI template is expertly crafted to showcase a large set of icons, providing an intuitive and visually engaging platform for users to browse, search, and learn about the icon collection. It's an ideal tool for designers and developers looking to effectively display and market their icon sets.\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D222%253A11008%26mode%3Ddesign%26t%3DE4V2z0d7MGYPq9Iz-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=222%3A11008&mode=design&t=E4V2z0d7MGYPq9Iz-1\",[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Key Features of the Template\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Browsing and Search Functionality:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Effortless Navigation\"}),\": The template includes a user-friendly interface that allows users to easily browse through the entire icon set. Categories and filters enhance the browsing experience.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Advanced Search Capabilities\"}),\": Users can quickly search for specific icons using keywords, making it simple to find exactly what they need.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Icon Viewing and Presentation:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"High-Quality Previews\"}),\": Icons are displayed in high resolution, allowing users to appreciate their quality and style.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Detailed Views\"}),\": Clicking on an icon provides a detailed view, showing different sizes, formats, and potential use cases.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Testimonials and User Feedback:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Credibility through Reviews\"}),\": Incorporates a section for user testimonials and reviews, showcasing real-life applications and satisfaction.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Build Trust with New Users\"}),\": Positive feedback from existing users adds credibility and helps new users make informed decisions.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Pricing Information:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Clear Pricing Structure\"}),\": Clearly outlines the pricing for different sets or individual icons, including any bundle offers or discounts.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Flexible Options\"}),\": Offers different licensing options, catering to various user needs and budgets.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"FAQ Section:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"User Support\"}),\": Addresses common questions regarding the icon set, usage rights, file formats, and customization options.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Enhanced User Experience\"}),\": A well-organized FAQ section reduces user queries and improves the overall experience.\"]}),/*#__PURE__*/e(\"h4\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Benefits of Using the Template\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Comprehensive Showcase\"}),\": The template is designed to cover all aspects of presenting an icon set, from browsing to purchasing.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"User-Centric Design\"}),\": Focuses on creating an engaging and hassle-free user experience, encouraging exploration and interaction with the icon set.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Professional Layout\"}),\": Delivers a professional and polished look, aligning with the high-quality standards of modern iconography.\"]}),/*#__PURE__*/e(\"h4\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Ideal Applications\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Icon Set Marketing\"}),\": Perfect for designers or companies looking to market their icon sets effectively.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Digital Asset Libraries\"}),\": Suitable for online platforms hosting large collections of digital assets, including icons.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"E-commerce for Design Assets\"}),\": Can be used by e-commerce sites specializing in design assets, providing a seamless shopping experience.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"p\",{children:\"In conclusion, this UI template is tailored to showcase large icon sets in a comprehensive and user-friendly manner. It facilitates easy navigation, provides detailed insights, and builds trust with potential buyers, making it a vital tool for anyone looking to effectively market and sell their icon collections.\"})]})},{id:\"Ouk04p0lK\",[s]:\"Template: App Showcase\",[o]:\"template-app-showcase\",[l]:\"UI Template: Pro Desktop App\",[c]:\"Our UI template is specifically designed to showcase professional desktop applications, catering to a range of functionalities including communications, task management, helpdesk, and documentation. It's structured to highlight key features and capabilities of such applications, making it perfect for businesses that want to effectively demonstrate the value of their software.\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D222%253A17131%26mode%3Ddesign%26t%3DE4V2z0d7MGYPq9Iz-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=222%3A17131&mode=design&t=E4V2z0d7MGYPq9Iz-1\",[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Template Structure and Sections\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Feature Highlights:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Detailed Descriptions\"}),\": This section focuses on showcasing the main features of the app, such as messaging capabilities, task tracking, support ticket management, and document handling.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Visual Representations\"}),\": Accompanied by high-quality screenshots or icons, this area visually represents the app\u2019s features, making them easily digestible for the viewer.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Benefits of the Template\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Comprehensive Showcasing\"}),\": The template covers all essential aspects of a professional desktop app, from functionality to user feedback.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Engagement and Clarity\"}),\": Each section is designed to engage the viewer and provide clear information, facilitating better understanding and interest.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Professional Aesthetic\"}),\": Reflects a high level of professionalism, aligning with the standards expected of top-tier desktop applications.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Ideal Usage Scenarios\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Marketing Websites\"}),\": Perfect for businesses looking to create an informative and attractive landing page for their desktop app.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Investor Presentations\"}),\": Useful in pitches to investors, showcasing the app\u2019s capabilities and market potential.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"User Onboarding\"}),\": Assists in onboarding new users, providing a comprehensive overview of the app\u2019s features and benefits.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"p\",{children:\"In summary, this UI template offers a structured, detailed, and visually appealing way to present a professional desktop application. It's crafted to not only highlight the app's features and capabilities but also to tell a compelling story about its usability and impact, making it an invaluable tool for marketing, education, and customer engagement.\"})]})},{id:\"gsOjKW6vC\",[s]:\"Template: Mockups\",[o]:\"template-mockups\",[l]:\"UI Template: Premium Device Mockups\",[c]:\"Our UI template is expertly designed for showcasing product mockups using devices at various angles, akin to the visually striking presentation style seen on Apple's marketing pages. This template is ideal for businesses and developers looking to highlight their products and apps in a dynamic, engaging manner.\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D222%253A14627%26mode%3Ddesign%26t%3DE4V2z0d7MGYPq9Iz-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=222%3A14627&mode=design&t=E4V2z0d7MGYPq9Iz-1\",[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Key Features of the UI Template\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Diverse Device Angles and Settings:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Variety of Perspectives\"}),\": The template includes mockups of devices like smartphones, tablets, and laptops in multiple angles and contexts, enabling a comprehensive showcase of your product.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Realistic Environments\"}),\": Devices are set against aesthetically pleasing, realistic backgrounds that enhance the appeal of the mockups.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"High-Quality, Engaging Presentation:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Crisp, Clear Display\"}),\": Each mockup is rendered in high resolution, ensuring that your product looks sharp and professional.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Interactive Elements\"}),\": Some mockups include interactive elements, allowing viewers to experience a more dynamic presentation.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Consistency with Brand Image:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Customizable Features\"}),\": The template allows for easy customization to align with your brand\u2019s colors, fonts, and overall aesthetic.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Cohesive Design Language\"}),\": It's designed to complement and enhance your brand's existing marketing materials.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Advantages of Using the Mockup Template\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Professional Appearance\"}),\": Mimicking the high-quality presentation style of leading tech companies, the template elevates the perceived value and professionalism of your product.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Versatility\"}),\": Suitable for a wide range of products and applications, from mobile apps to web platforms.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Enhanced User Engagement\"}),\": By showcasing products in a variety of realistic scenarios, the template helps potential customers envision how the product would fit into their daily lives.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Applications in Marketing and Branding\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Digital Marketing Campaigns\"}),\": Ideal for creating compelling visuals for websites, social media, and digital ad campaigns.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Product Demonstrations\"}),\": Use the template to give potential customers a clear, attractive preview of what your app or website looks like in use.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Investor and Stakeholder Presentations\"}),\": Enhance pitches and presentations with professional, engaging product visuals.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"p\",{children:\"In conclusion, this UI template is a powerful tool for any business looking to showcase their digital products with sophistication and style. Its ability to present products on a variety of devices in different settings not only captures the essence of the product but also aligns with the high standards seen in modern digital marketing.\"})]})},{id:\"pqOoxAt4W\",[s]:\"Template: UI Kit\",[o]:\"template-ui-kit\",[l]:\"Template: UI Kit - Design System\",[c]:\"Our UI Kit template is meticulously crafted to be an ideal tool for showcasing branding guidelines, documentation, and design system guidelines. It\u2019s designed to serve as a comprehensive resource for designers and developers, providing a clear and consistent framework for building and maintaining a brand\u2019s visual identity across various platforms.\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D312%253A22948%26mode%3Ddesign%26t%3DE4V2z0d7MGYPq9Iz-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=312%3A22948&mode=design&t=E4V2z0d7MGYPq9Iz-1\",[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Key Features of the UI Kit Template\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Showcasing Branding Guidelines:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Visual Identity Elements\"}),\": The template includes dedicated sections for brand elements like logos, color palettes, typography, and imagery. This allows for a clear presentation of the brand\u2019s visual language.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Usage Rules\"}),\": It outlines the do\u2019s and don\u2019ts of using brand assets, ensuring consistent application across all media.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Documentation of Design System:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Component Library\"}),\": The template features a comprehensive library of UI components, from buttons and input fields to navigation bars and modals, each with variants and states.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Design Principles and Patterns\"}),\": It provides an overview of the design principles and patterns that underpin the design system, guiding designers in their decision-making process.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Guidelines for Design System:\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Usage Guidelines\"}),\": Detailed instructions on how to use the design system elements are included, ensuring designers and developers can effectively apply them in their projects.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Best Practices\"}),\": The template highlights best practices for design and development, promoting a high standard of work.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Advantages of Using the UI Kit Template\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Streamlined Workflow\"}),\": By having all necessary brand and design guidelines in one place, the template streamlines the design and development process, saving time and reducing inconsistencies.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Ease of Communication\"}),\": It serves as a single source of truth for teams, ensuring that everyone from designers to developers and stakeholders is on the same page.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Flexibility and Customization\"}),\": While providing a structured approach, the template is flexible enough to accommodate customization, allowing it to adapt to the evolving needs of the brand.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Application in Projects\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Brand Consistency\"}),\": Ideal for projects where maintaining a consistent brand identity is crucial.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Design and Development\"}),\": Acts as a go-to reference for designers and developers, ensuring design system components are applied correctly and consistently.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Training and Onboarding\"}),\": An excellent resource for training new team members on the brand\u2019s visual identity and design system.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"p\",{children:\"In conclusion, the UI Kit template is a vital tool in any design and development toolkit, perfect for those looking to showcase and adhere to branding guidelines, document design systems comprehensively, and ensure consistency and clarity in their digital products.\"})]})},{id:\"LDYn9uhQk\",[s]:\"Patterns\",[o]:\"patterns\",[l]:\"UI Patterns and Blurred Gradients\",[c]:\"Our design system incorporates a sophisticated selection of UI patterns and blurred gradients, which are key to creating visually engaging elements within your UI, such as card backgrounds, textures, and general ornamentation. These elements are especially effective in adding depth and dimension when used with glass-style interfaces.\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D251%253A38964%26mode%3Ddesign%26t%3DE4V2z0d7MGYPq9Iz-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=251%3A38964&mode=design&t=E4V2z0d7MGYPq9Iz-1\",[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Applications and Impact\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Card Background Patterns\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Variety of Patterns\"}),\": Options like grids, waves, and subtle star patterns can transform a simple card background into a visually intriguing element.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Depth Perception\"}),\": Used beneath glass-style overlays, these patterns create a layered depth, enhancing the card's visual appeal.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Blurred Gradients\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Soft Transitions\"}),\": Blurred gradients provide a smooth, seamless transition between colors, adding a modern and dynamic feel to backgrounds and textures.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Focus and Atmosphere\"}),\": They help in setting the mood and directing focus towards key content or actions within the UI.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Textures and Ornaments\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Adding Subtle Complexity\"}),\": The use of vortex patterns or a mix of blur and exposure adjustments can add a unique textural complexity to UI elements.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Enhancing Aesthetics\"}),\": Such textural elements can elevate the overall aesthetic, making it more engaging and visually pleasing.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Integration with Glass Style\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Layered Aesthetics\"}),\": These patterns and gradients, when placed under semi-transparent glass-style elements, create a multi-dimensional and sophisticated look.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Enhanced Depth\"}),\": The combination brings an elegant, refined quality to interfaces, ideal for creating a premium user experience.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Best Practices for Usage\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Harmonious Balance\"}),\": While these patterns and gradients add visual interest, it's crucial to balance them to ensure they don\u2019t overpower the primary content.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Consistent Application\"}),\": Use these design elements consistently across the interface to maintain a cohesive look and feel.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Accessibility\"}),\": Consider how patterns and gradients affect the overall readability and accessibility of your UI, especially for users with visual impairments.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"p\",{children:\"By thoughtfully applying these varied patterns and gradients, such as grids, waves, stars, and vortex designs, combined with adjustments in blurs and exposure, designers can create captivating backgrounds and textures. These elements, particularly in conjunction with glass-style aesthetics, significantly enhance the depth and visual interest of a user interface, contributing to a rich and immersive user experience.\"})]})},{id:\"lghak3WGp\",[s]:\"Backgrounds\",[o]:\"backgrounds\",[l]:\"Backgrounds and Wallpapers\",[c]:\"Our design system features a unique and innovative Background system, equipped with a diverse range of patterns and colors to enhance the visual appeal of your designs. This system is specifically tailored to provide a high level of customization and creative flexibility, allowing for the creation of unique and dynamic backgrounds for various applications.\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D228%253A24510%26mode%3Ddesign%26t%3DE4V2z0d7MGYPq9Iz-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=228%3A24510&mode=design&t=E4V2z0d7MGYPq9Iz-1\",[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"How to Use the Background System\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Inserting a Background Component\"}),\": Easily add a background to your design by using the shortcut 'Shift + I'. This action brings up a selection of background components from our extensive library.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Customizing Properties\"}),\": Once a background component is inserted, you have the freedom to tailor its appearance to your specific needs. In the Component properties, you can adjust various aspects such as the Grid, Exposure, Stars, Blurs, and Waves. Each of these properties contributes to the overall look and feel of the background, offering endless possibilities for customization.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Grid\"}),\": Alter the grid pattern to suit the style of your design, whether you're looking for something subtle or more pronounced.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Exposure\"}),\": Adjust the exposure setting to fine-tune the brightness and contrast of the background, ensuring it complements your design's content.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Stars, Blurs, Waves\"}),\": Add or modify elements like stars, blurs, and waves to create dynamic, visually engaging backgrounds. These elements can add depth, texture, or a sense of movement, enhancing the overall user experience.\"]}),/*#__PURE__*/e(\"h5\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"The Possibilities\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Thousands of Combinations\"}),\": With the vast array of options available in our Background system, there are literally thousands of combinations at your fingertips. This range of choices allows for the creation of truly bespoke backgrounds that can set your designs apart.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Versatility and Application\"}),\": Whether you are working on a web page, a mobile app, or any digital interface, the Background system offers solutions that can be adapted to any context. From professional and sleek designs to more playful and vibrant ones, the system\u2019s versatility caters to a wide spectrum of design needs.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"p\",{children:\"Our Background system is designed to empower designers with the tools and flexibility needed to create distinctive and engaging backgrounds. By offering a multitude of customizable options, it elevates the visual language of any project, allowing designers to express creativity and maintain alignment with the project's overall aesthetic and branding goals.\"})]})},{id:\"kSzBNkmkv\",[s]:\"Wireframes\",[o]:\"wireframes\",[l]:\"Wireframes for Quick Layouts\",[c]:\"Wireframes are foundational tools in user interface (UI) and user experience (UX) design, serving as blueprints for digital products. They are schematic representations that outline the structure, layout, and functionality of a web page or app interface. Our design system offers wireframes that aid in quickly drawing elegant layouts and establishing effective UI patterns and user flows.\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D7029%253A30001%26mode%3Ddesign%26t%3DE4V2z0d7MGYPq9Iz-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=7029%3A30001&mode=design&t=E4V2z0d7MGYPq9Iz-1\",[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Benefits of Wireframes\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Rapid Layout Design\"}),\": Wireframes enable designers to quickly sketch out page layouts, helping to visualize the arrangement of elements like headers, content blocks, navigation menus, and call-to-action buttons. This accelerates the design process, allowing for rapid iteration and refinement.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Focus on User Experience\"}),\": By stripping away visual design elements like colors and fonts, wireframes keep the focus on the user experience. They help in planning user flows, ensuring that the navigational structure is intuitive and the user journey is smooth.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Clarifying UI Patterns\"}),\": Wireframes are instrumental in establishing and testing UI patterns. They allow designers to experiment with different layout options and interface components, ensuring consistency and usability across different screens and devices.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Facilitating Communication\"}),\": They act as a common language between designers, developers, stakeholders, and clients. Wireframes can be used to convey ideas and gather feedback early in the design process, reducing misunderstandings and aligning expectations.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/e(\"h4\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Features of Our Wireframes\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Elegant and Clear Layouts\"}),\": Our wireframes are designed to be clean and uncluttered, providing a clear vision of the layout without distracting details.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Customizable Components\"}),\": We offer a variety of pre-designed elements that can be easily customized and rearranged, allowing for quick creation and modification of layouts.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Extensive Library\"}),\": Our collection includes a wide range of wireframe templates and components, covering a multitude of UI patterns and user flow scenarios.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/e(\"h4\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Using Wireframes for Quick Representations\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Sketching User Flows\"}),\": Quickly map out user journeys from start to finish, visualizing how users will navigate through the interface.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Prototyping\"}),\": Transform wireframes into low-fidelity prototypes to test and validate ideas before moving into high-fidelity design.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Collaboration\"}),\": Use wireframes as a collaborative tool to brainstorm and refine ideas within teams and with clients.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"p\",{children:\"Wireframes are an essential part of the design toolkit in our design system. They are not only about creating layouts but also about understanding and designing the user experience. By providing a clear, focused, and flexible way to plan and communicate designs, wireframes are invaluable for creating effective, user-centered designs quickly and efficiently.\"})]})},{id:\"wDDochN_w\",[s]:\"Icons\",[o]:\"icons\",[l]:\"Icons - 2,116 Unique Components\",[c]:\"Our design system boasts a comprehensive collection of 2116 unique icon components. These icons cover a wide range of themes and purposes, ensuring that designers and developers have access to a versatile and extensive visual language for any UI/UX scenario.\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D243%253A26724%26mode%3Ddesign%26t%3DE4V2z0d7MGYPq9Iz-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=243%3A26724&mode=design&t=E4V2z0d7MGYPq9Iz-1\",[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Icon Components with Variable Colors\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Stroke Width Customizability\"}),\": One of the standout features of these icons is the ability to customize the stroke width. This flexibility allows the icons to be fine-tuned for different visual weights and styles, ensuring they fit perfectly within various design contexts. Whether you need a bold icon for a button or a more delicate icon for a subtle interface cue, the stroke width can be adjusted to meet these requirements.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Uniqueness and Variety\"}),\": Each of the 2116 icons is distinct, providing an unparalleled range of choices. This extensive collection includes everything from basic symbols to more specialized icons, ensuring that designers can find the perfect icon for any application, whether it\u2019s a common action, a specific tool, or a unique concept.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Consistent Design Language\"}),\": Despite the variety, these icons have been crafted to maintain a consistent design language. This consistency means that they can be used together harmoniously, contributing to a cohesive look and feel in any project.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Versatility and Scalability\"}),\": Designed with scalability in mind, these icons perform beautifully across different screen sizes and resolutions. They are crafted to retain their clarity and impact whether used in large formats or scaled down for mobile screens.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Applications\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"UI Elements\"}),\": Ideal for buttons, menus, and interactive elements, providing clear visual cues for user interactions.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Instructional Graphics\"}),\": Enhance instructional materials or guides with relevant, easy-to-understand icons.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Marketing and Branding\"}),\": Use in digital marketing materials to add visual interest and support textual content.\"]})]})},{id:\"JrMN5f3ix\",[s]:\"Cards\",[o]:\"cards\",[l]:\"Cards UI Components\",[c]:\"Cards and large UI components such as pricing cards, images with captions, and testimonials are versatile and essential elements in modern UI design. They serve as containers for various types of content and are crucial in structuring information in an easily digestible format.\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D344%253A519819%26mode%3Ddesign%26t%3DE4V2z0d7MGYPq9Iz-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=344%3A519819&mode=design&t=E4V2z0d7MGYPq9Iz-1\",[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Cards in Design Systems\"}),/*#__PURE__*/e(\"p\",{children:\"Cards are versatile containers in UI design, ideal for displaying varied content like text, images, and interactive elements. Their effectiveness lies in their ability to present information in an organized, digestible format, making them crucial for interfaces like e-commerce platforms, news feeds, and social media apps.\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Design Characteristics\"}),/*#__PURE__*/e(\"p\",{children:\"Typically rectangular with defined borders or shadows, cards have a distinct, elevated appearance. They often feature rounded corners for a softer look. Uniformity in spacing, typography, and color schemes is key, ensuring they align seamlessly with the broader design system.\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Content Organization and User Engagement\"}),/*#__PURE__*/e(\"p\",{children:\"Cards enhance user interaction by serving as interactive gateways to more detailed content. Their design \u2014 from imagery to text hierarchy \u2014 is pivotal in capturing user attention and facilitating engagement, crucial in areas like product showcasing and content summarization.\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Responsive Design and Layout Flexibility\"}),/*#__PURE__*/e(\"p\",{children:\"Cards excel in responsive design, adapting to various screen sizes. On desktops, they might display in a grid, while on mobile, they align vertically. This flexibility ensures content is optimally presented across devices, maintaining usability and aesthetic appeal.\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Best Practices in Card Design\"}),/*#__PURE__*/e(\"p\",{children:\"Focus on the card\u2019s purpose, whether to drive sales or deliver information, and design accordingly. Accessibility is paramount; ensure text is legible and interactive elements comply with accessibility standards, making the content reachable for all users.\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"p\",{children:\"In summary, cards are a key component in design systems, striking a balance between form and function. They efficiently organize content and foster user interaction, essential for creating intuitive and visually compelling digital experiences.\"})]})},{id:\"OKeOCirlJ\",[s]:\"Menus\",[o]:\"menus\",[l]:\"Menus and Input Components\",[c]:\"Menus and input components are integral parts of a design system, each serving distinct but equally crucial roles in user interface design. Here's a detailed explanation of each:\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D344%253A519826%26mode%3Ddesign%26t%3DE4V2z0d7MGYPq9Iz-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=344%3A519826&mode=design&t=E4V2z0d7MGYPq9Iz-1\",[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Menus in Design Systems\"}),/*#__PURE__*/e(\"h3\",{children:\"Purpose and Functionality\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Navigation\"}),\": Menus are primarily used for navigation, guiding users through different sections or features of an application or website.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Types\"}),\": Common types include dropdown menus, sidebar menus, top navigation bars, and context menus.\"]}),/*#__PURE__*/e(\"h5\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Design Considerations\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Clarity\"}),\": Menus should be clearly labeled and easy to understand. The text should be concise and indicative of the content or function they lead to.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Hierarchy\"}),\": Design the menu layout to reflect the importance and frequency of use of menu items. Frequently used items should be more prominent or accessible.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Responsiveness\"}),\": Menus must adapt to different screen sizes and devices, often transforming into hamburger menus or similar patterns on mobile devices.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Accessibility\"}),\": Ensure menus are accessible with keyboard navigation and screen readers. Proper ARIA roles and attributes are essential.\"]}),/*#__PURE__*/e(\"h5\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Interactive Elements\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Hover and Active States\"}),\": Menus often change appearance when hovered over or selected, providing immediate visual feedback to the user.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Icons\"}),\": Use icons alongside text for a more intuitive navigation experience, especially for commonly recognized functions like search or home.\"]}),/*#__PURE__*/e(\"h4\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Input Components in Design Systems\"}),/*#__PURE__*/e(\"h3\",{children:\"Purpose and Functionality\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Data Collection\"}),\": Input components are used to collect information from the user, such as text fields, checkboxes, radio buttons, and switches.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Types\"}),\": Include text fields, text areas, dropdown selectors, checkboxes, radio buttons, toggle switches, and date pickers.\"]}),/*#__PURE__*/e(\"h5\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Design Considerations\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Visibility and Legibility\"}),\": Inputs should be easily identifiable with clear labels. Placeholder text can provide additional guidance but should never replace actual labels.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Error Handling and Validation\"}),\": Provide immediate and clear feedback on input errors or successful data entry. Error messages should be specific and helpful.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Size and Padding\"}),\": Ensure input fields are appropriately sized with adequate padding for ease of use, especially on touch devices.\"]}),/*#__PURE__*/e(\"h5\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Interactive Elements\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Focus States\"}),\": Inputs should have a distinct style when focused to indicate where the user is currently typing or interacting.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Icons\"}),\": Icons can be used within inputs for additional context, such as a search icon inside a search bar.\"]}),/*#__PURE__*/e(\"h5\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Accessibility\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Labels and Descriptions\"}),\": Each input should have a descriptive label. Utilize \",/*#__PURE__*/e(\"code\",{children:\"label\"}),\" tags in HTML and associate them with input controls for accessibility.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Keyboard Navigation\"}),\": Ensure that all input elements can be navigated using a keyboard.\"]}),/*#__PURE__*/e(\"h5\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Integration with Forms and UI Elements\"}),/*#__PURE__*/e(\"p\",{children:\"Inputs should seamlessly integrate with other form elements like buttons and with the overall UI design. Consistency in styling across different types of inputs is key for a cohesive look.\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"p\",{children:\"Menus and input components are vital for user interaction and data collection. Their design should focus on clarity, ease of use, and accessibility. In a design system, these elements should be versatile to accommodate various applications while maintaining consistency in style and interaction patterns, ensuring a seamless user experience across the platform.\"})]})},{id:\"tfIRJtzAv\",[s]:\"Buttons\",[o]:\"buttons\",[l]:\"Buttons\",[c]:\"Buttons are a fundamental component in any design system, serving as one of the primary means for user interaction. A well-designed button system is crucial for a coherent and effective user interface.\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D344%253A519814%26mode%3Ddesign%26t%3DE4V2z0d7MGYPq9Iz-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=344%3A519814&mode=design&t=E4V2z0d7MGYPq9Iz-1\",[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Types of Buttons\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Primary Buttons\"}),\": These are the main call-to-action (CTA) buttons. They are prominent and used for the most important actions, like 'Submit', 'Save', or 'Continue'.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Secondary Buttons\"}),\": Less prominent, these are used for less crucial actions. They often have a subtler design compared to primary buttons.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Tertiary Buttons\"}),\": Used for the least prioritized actions, they are often more minimalistic, sometimes styled only as text.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Design Attributes\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Size\"}),\": Buttons come in various sizes (small, medium, large, extra large) to fit different spaces and importance levels.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Color\"}),\": Primary buttons often use the brand\u2019s main color to stand out, while secondary and tertiary buttons might use less prominent colors.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Shape\"}),\": Rounded corners are common for a friendly appearance, but some systems might use sharp edges for a more formal look.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Icons\"}),\": Some buttons include icons to help convey their purpose, like a search icon on a search button.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Style\"}),\": DesignCode UI provides three button styles\u2014Glass, Outline, and Flat\u2014each with specific design attributes to suit your project needs:\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"States\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Normal\"}),\": The default state of a button.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Hover\"}),\": Changes when a user hovers over the button with a cursor. Often involves a slight color change or shadow to indicate interactivity.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Active/Pressed\"}),\": When the button is clicked or tapped. This state might show the button as \u2018pressed down\u2019.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Disabled\"}),\": Indicates the button cannot be interacted with. Usually, the button appears faded or greyed out.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Accessibility\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Contrast\"}),\": Buttons should have sufficient color contrast to be easily distinguishable from their background.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Labeling\"}),\": Text on buttons should be clear and concise. Additionally, proper ARIA (Accessible Rich Internet Applications) labels are important for screen readers.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Responsive and Adaptive Design\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Adaptability\"}),\": Buttons should resize or reflow appropriately in different devices and screen sizes.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Touch Targets\"}),\": On mobile devices, buttons should be large enough to be easily tapped.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Guidelines for Use\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Consistency\"}),\": Use buttons consistently across the application. For example, a \u2018Save\u2019 button should look the same in all contexts.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Hierarchy\"}),\": Ensure that the visual hierarchy of buttons corresponds to their importance. Don't overwhelm users with too many primary buttons.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Integration with Other Components\"}),/*#__PURE__*/e(\"p\",{children:\"Buttons often need to work in conjunction with other UI elements, like forms, modals, or cards. Ensuring they fit seamlessly within these contexts is key.\"}),/*#__PURE__*/e(\"h4\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Create your first button for the design system\"}),/*#__PURE__*/i(\"p\",{children:['Firstly, either create a new template or select a page within your design system specifically for buttons. For our example, we\\'ll refer to this page simply as \"Buttons.\"',/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{}),\"\u25BA \",/*#__PURE__*/e(r,{href:\"https://www.youtube.com/watch?v=jts39CN4fLk&feature=youtu.be\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Watch the video\"})}),/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/e(\"h3\",{children:\"Organizing Your Buttons\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),\"Ideally, you should have a minimal number of button variants to maintain simplicity. However, depending on your design's complexity, you may have multiple styles and variants to provide the necessary flexibility.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/e(\"h3\",{children:\"Creating a Button\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Add Text to Your Button\"}),\":\",/*#__PURE__*/e(\"br\",{}),\"Use the text tool (often shortcut 'T') to add your button's text.\",/*#__PURE__*/e(\"br\",{}),'Apply the \"Body\" text style, choosing between \"Regular\" and \"Medium\" based on the emphasis you want to give your text.\\u2028\\u2028']}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Incorporate an Icon\"}),\":\",/*#__PURE__*/e(\"br\",{}),\"If your design calls for it, add an icon (Shift + I) to your button.\",/*#__PURE__*/e(\"br\",{}),\"Use the design system\u2019s Icons library to select an appropriate icon, such as a chevron right.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Set Colors and Styles\"}),\":\",/*#__PURE__*/e(\"br\",{}),\"Use variable foreground and background colors for adaptability between light and dark modes.\",/*#__PURE__*/e(\"br\",{}),\"Select text and icon colors that are part of your design system's predefined styles.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Using Auto Layout\"}),\":\",/*#__PURE__*/e(\"br\",{}),\"Combine the text and icon using auto layout features (Shift + A).\",/*#__PURE__*/e(\"br\",{}),\"Adjust Variable button padding and gap to ensure visual balance.\",/*#__PURE__*/e(\"br\",{}),\"Apply corner radius and any additional styling as per your design system's guidelines.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Component Properties\"}),\":\",/*#__PURE__*/e(\"br\",{}),\"Convert your button into a reusable component.\",/*#__PURE__*/e(\"br\",{}),\"Define properties for text and icon, allowing for easy adjustments and variations.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Testing Your Button\"}),/*#__PURE__*/e(\"br\",{}),\"Once created, test your button in various contexts within your design, adjusting properties as needed for the best visual and functional fit.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),\"You've now created a button that's not only visually appealing but also perfectly integrated into your design system. This button can be easily adapted and reused across your projects, ensuring consistency and efficiency in your design workflow.\"]})]})},{id:\"QPZOa598U\",[s]:\"Typography\",[o]:\"typography\",[l]:\"Typography and Content\",[c]:\"Typography is a crucial component of user interface design, providing not only the delivery mechanism for your content but also setting the tone and experience for the user. A typographic hierarchy like the one from your DesignCode UI, which uses the Inter font, enables users to quickly navigate and understand your content's structure and importance.\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D104%253A6331%26mode%3Ddesign%26t%3DE4V2z0d7MGYPq9Iz-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=104%3A6331&mode=design&t=E4V2z0d7MGYPq9Iz-1\",[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Typography usage\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Defining Text Styles\"]}),/*#__PURE__*/i(\"p\",{children:[\"In Figma, text styles are reusable and can be applied across various components and frames. Start by defining styles for your headings (H1-H5), body text, captions, and other text elements.\\u2028\\u2028\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/e(\"h3\",{children:\"Creating a Typographic Hierarchy\"}),/*#__PURE__*/e(\"p\",{children:\"Your hierarchy should guide users through the content effectively. Use size, weight, and spacing to differentiate between elements such as headings, subheadings, and body text. For example, a 60px Semibold heading will grab attention, while a 14px Regular footnote provides supplementary information without competing with the main content.\\u2028\\u2028\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Consistency Across Devices\"]}),/*#__PURE__*/e(\"p\",{children:\"Establish separate styles for mobile and desktop if necessary, as mobile headings may need to be smaller than their desktop counterparts to fit smaller screens comfortably.\\u2028\\u2028\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Accessibility Considerations\"]}),/*#__PURE__*/e(\"p\",{children:\"Ensure your typography meets accessibility standards. This includes using sufficient contrast ratios and legible font sizes, especially for body text and smaller elements like footnotes and captions.\\u2028\\u2028\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Responsive Typography\"]}),/*#__PURE__*/e(\"p\",{children:\"Leverage Figma's 'Auto Layout' and 'Constraints' features to make your typography responsive. Your text should resize and adjust to different screen sizes and orientations.\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Typography rules\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Line Height for Enhanced Legibility \"]}),/*#__PURE__*/i(\"p\",{children:[\"For the Inter typeface, a line height of 120% to 145% is recommended to improve legibility and comfort. This spacing allows the eye to easily follow text and aids in readability, especially for longer content blocks.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/e(\"h3\",{children:\"Optimal Characters Per Line \"}),/*#__PURE__*/e(\"p\",{children:\"Stick to 45-90 characters per line to avoid overwhelming readers. This range helps in creating a natural reading rhythm. In Figma, this can be controlled by adjusting the width of the text containers.\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Kerning for Balanced Text \"]}),/*#__PURE__*/i(\"p\",{children:[\"Kerning, the space between characters, is essential for creating visually balanced text. Inter is well-kerned out of the box, but fine-tuning may be required for large headers or when using all caps. Figma allows for individual letter adjustments to achieve perfect text density.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/e(\"h3\",{children:\"Utilize Typeface Weights and Styles \"}),/*#__PURE__*/e(\"p\",{children:\"Make the most of Inter's range without forcing unsupported styles. Only use bold or italic if they are specifically designed for Inter. Faux styles can degrade legibility and aesthetic quality.\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Establishing a Clear Hierarchy \"]}),/*#__PURE__*/e(\"p\",{children:\"Differentiate headings, subheadings, body text, and other elements by varying the size, weight, and even color using Inter\u2019s extensive font family. This helps users navigate your content with ease.\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Text Alignment for Coherent Structure \"]}),/*#__PURE__*/e(\"p\",{children:\"Align text to the left for Western languages and to the right for languages like Arabic. Use centered text sparingly, as it can disrupt the reading flow if overused.\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Serif vs. Sans Serif\"]}),/*#__PURE__*/e(\"p\",{children:\"Choose serif for traditional, reading-focused interfaces, and sans-serif for modern or digital-first experiences. Inter, being a sans-serif typeface, offers a neutral and clean appearance suitable for a variety of modern applications.\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Dos and Don'ts:\"]}),/*#__PURE__*/i(\"p\",{children:[\"Do use grid systems in Figma to maintain consistent spacing.\",/*#__PURE__*/e(\"br\",{}),\"Don't stretch or squeeze Inter to fit your design; resize text boxes to maintain font integrity.\",/*#__PURE__*/e(\"br\",{}),\"Do utilize Figma's style and component features to standardize typography across your project.\",/*#__PURE__*/e(\"br\",{}),\"Don't overlook accessibility; ensure text color has enough contrast with the background.\"]}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Learning and Refining Typography Skills \"]}),/*#__PURE__*/i(\"p\",{children:[\"Expanding your knowledge of typography is key to elevating your design. Resources like \",/*#__PURE__*/e(r,{href:\"http://typogui.de\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"typogui.de\"})}),' provide in-depth guidance on typeface pairing and typographic details, while a quick read like \"',/*#__PURE__*/e(r,{href:\"https://www.pierrickcalvez.com/journal/a-five-minute-guide-to-better-typography\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"A Five Minutes Guide to Better Typography\"})}),'\" can offer smart, actionable insights.']}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Pre-made Content Blocks\"}),/*#__PURE__*/e(\"p\",{children:\"Our design system includes pre-made text blocks that are ready for use in any layout, especially useful for landing pages. These blocks come with responsive properties, making them adaptable to various breakpoints. They feature a mix of headings, body text, and button styles, all crafted according to our typographic guidelines.\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Responsive Text Blocks \"]}),/*#__PURE__*/e(\"p\",{children:\"Jump-start your designs with our library of text blocks, suitable for landing pages and more. They're built to adapt to different screen sizes and come with a hierarchy of titles, paragraphs, and buttons.\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Visual Elements \"]}),/*#__PURE__*/e(\"p\",{children:\"Incorporate our ready-to-use logos and avatars to maintain visual consistency. These elements are versatile for use across various components and screens.\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"UI Components \"]}),/*#__PURE__*/i(\"p\",{children:[\"Our system includes pre-formatted components for prices, icons, buttons, inputs, lists, and tables. These elements are designed for clarity and ease of use, ensuring that your layouts are not only attractive but also functional.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{}),\"Begin with our content blocks to efficiently create layouts that are consistent, accessible, and ready for any device.\"]})]})},{id:\"xZnNFohPQ\",[s]:\"Shadows\",[o]:\"shadows\",[l]:\"Shadows and Blur Styles in Figma\",[c]:\"Shadows and blur styles are two fundamental design elements that play a crucial role in enhancing the aesthetic appeal and functionality of user interfaces (UI). Their effective application can transform a flat, two-dimensional design into a more dynamic and engaging interface. Both elements serve to create depth, draw attention, and improve the user experience by making interfaces more intuitive and visually appealing.\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D317%253A35652%26mode%3Ddesign%26t%3DE4V2z0d7MGYPq9Iz-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=317%3A35652&mode=design&t=E4V2z0d7MGYPq9Iz-1\",[g]:{webPageId:\"DY9adcFVw\"},[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"How to add Blurs and Shadows\"}),/*#__PURE__*/i(\"p\",{children:[\"Select an element and go to \",/*#__PURE__*/e(\"strong\",{children:\"Effects\"}),\" and click on the \",/*#__PURE__*/e(\"strong\",{children:\"Style\"}),\" icon (4 small circles).\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,uS8yt1ElL10sX6evlusKWn67vB4.png\",\"data-framer-height\":\"858\",\"data-framer-width\":\"476\",height:\"429\",src:\"https://framerusercontent.com/images/uS8yt1ElL10sX6evlusKWn67vB4.png\",style:{aspectRatio:\"476 / 858\"},width:\"238\"}),/*#__PURE__*/e(\"h5\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Understanding Drop Shadows in our UI Kit\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Design Style\"]}),/*#__PURE__*/e(\"p\",{children:\"Choose from three shadow styles: normal, subtle, and strong.\"}),/*#__PURE__*/e(\"p\",{children:\"Select based on the visual impact you desire; subtle for minimal depth, strong for pronounced elevation.\\u2028\\u2028\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,qTh3AfdzW4JS0s8tCqlUVh2mE.png\",\"data-framer-height\":\"1024\",\"data-framer-width\":\"1024\",height:\"512\",src:\"https://framerusercontent.com/images/qTh3AfdzW4JS0s8tCqlUVh2mE.png\",style:{aspectRatio:\"1024 / 1024\"},width:\"512\"}),/*#__PURE__*/i(\"h5\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/e(\"h3\",{children:\"Element Elevation\"}),/*#__PURE__*/e(\"p\",{children:\"Consider the layering of elements; modals are higher than buttons, cards stack atop content.\"}),/*#__PURE__*/e(\"p\",{children:\"Match shadow strength to elevation level; higher elements typically warrant stronger shadows.\\u2028\\u2028\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,7OKPwYcUBemXbpSotld1vOfwo.png\",\"data-framer-height\":\"1024\",\"data-framer-width\":\"1024\",height:\"512\",src:\"https://framerusercontent.com/images/7OKPwYcUBemXbpSotld1vOfwo.png\",style:{aspectRatio:\"1024 / 1024\"},width:\"512\"}),/*#__PURE__*/i(\"h5\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/e(\"h3\",{children:\"Simplified System\"}),/*#__PURE__*/e(\"p\",{children:\"Each shadow style is crafted from three smaller shadows for a sophisticated effect.\"}),/*#__PURE__*/e(\"p\",{children:\"Our presets eliminate the need to adjust shadow parameters manually, streamlining the design workflow.\"}),/*#__PURE__*/e(\"p\",{children:\"Shadows are consistent between Light and Dark Mode, although in Dark Mode, glow can be used more prominently.\\u2028\\u2028\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,xHBqEigUDtSPsot8OOy94II1Bs.png\",\"data-framer-height\":\"1024\",\"data-framer-width\":\"1024\",height:\"512\",src:\"https://framerusercontent.com/images/xHBqEigUDtSPsot8OOy94II1Bs.png\",style:{aspectRatio:\"1024 / 1024\"},width:\"512\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),\"Use this system to enhance your design efficiently, without the hassle of extensive customization.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Shadows / Inner Glow in Dark Mode\"}),/*#__PURE__*/e(\"p\",{children:\"In dark mode, traditional shadows (darker than the element they're cast from) can be less noticeable or even invisible, as they blend into the dark background. This makes it challenging to use shadows to create depth and separation between elements.\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{}),\"Purpose of Inner Glow\"]}),/*#__PURE__*/e(\"p\",{children:\"Inner glows can be particularly effective in dark mode for creating a sense of depth. They are used to subtly highlight an element's edges, making it stand out from its background.\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,kRI2P1RO9WrAmYH2tLCIMh4eFqY.png\",\"data-framer-height\":\"2048\",\"data-framer-width\":\"2048\",height:\"1024\",src:\"https://framerusercontent.com/images/kRI2P1RO9WrAmYH2tLCIMh4eFqY.png\",style:{aspectRatio:\"2048 / 2048\"},width:\"1024\"}),/*#__PURE__*/i(\"h5\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/e(\"h3\",{children:\"Application\"}),/*#__PURE__*/e(\"p\",{children:\"Inner glows are usually applied to the inner edges of UI elements, such as buttons or input fields. They are generally softer and more diffused compared to shadows. The color of the glow is often a lighter or contrasting shade relative to the element's color, providing a gentle lift from the dark background.\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,WWw0gcGFmdL7dWXiWOoLI4sk0.png\",\"data-framer-height\":\"2048\",\"data-framer-width\":\"2048\",height:\"1024\",src:\"https://framerusercontent.com/images/WWw0gcGFmdL7dWXiWOoLI4sk0.png\",style:{aspectRatio:\"2048 / 2048\"},width:\"1024\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{}),\"Enhancing Focus and Interactivity\"]}),/*#__PURE__*/e(\"p\",{children:\"Inner glows are not just for aesthetic purposes; they can also enhance user interaction. For example, adding a slight inner glow to a button upon hover can indicate interactivity, guiding users on where to click.\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{}),\"Balance and Contrast\"]}),/*#__PURE__*/e(\"p\",{children:\"Maintaining the right balance of light and dark elements is crucial. The shadows and glows should create enough contrast for elements to be distinguishable, but not so much that it disrupts the overall visual harmony.\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{}),\"Consistency\"]}),/*#__PURE__*/e(\"p\",{children:\"Apply shadows and inner glows consistently across similar elements to maintain a cohesive look and feel throughout the interface.\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,bFR7FfHjQ90GmXq5ioXMmKhvaHY.png\",\"data-framer-height\":\"2048\",\"data-framer-width\":\"2048\",height:\"1024\",src:\"https://framerusercontent.com/images/bFR7FfHjQ90GmXq5ioXMmKhvaHY.png\",style:{aspectRatio:\"2048 / 2048\"},width:\"1024\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{}),\"Accessibility\"]}),/*#__PURE__*/e(\"p\",{children:\"Ensure that the addition of these effects does not compromise the readability or usability of the interface. Text and important elements should remain legible and accessible to all users.\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),\"In summary, when designing for dark mode, the creative use of lighter shadows and inner glows can effectively create depth and emphasize key elements, enhancing the user experience while maintaining the sleek and muted aesthetic that users often associate with dark-themed interfaces.\"]})]})},{id:\"iNTQnete_\",[s]:\"Spacing\",[o]:\"spacing\",[l]:\"Spacing Variables and Rules\",[c]:\"Just like a color scale, employing a defined spacing system accelerates your workflow and promotes consistency across designs. Adopting the 8-pt soft grid system eliminates guesswork during both the design and development phases, as it offers a limited and systematic set of spacing options.\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D3537%253A29760%26mode%3Ddesign%26t%3DE4V2z0d7MGYPq9Iz-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=3537%3A29760&mode=design&t=E4V2z0d7MGYPq9Iz-1\",[g]:{webPageId:\"DY9adcFVw\"},[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"4-pt grid\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Halves for Fine-Tuning\"}),\": Between 0 to 5, utilizing halves can fine-tune button paddings, ensuring optimal visual balance. For most other instances, prefer full numbers for clarity and simplicity.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Granularity with Care\"}),\": While it's possible to achieve finer granularity in spacing between grouped elements, it often necessitates additional containers. Remember, as designers and developers, our goal is to strike a balance between precision and minimalism to maintain an efficient workflow.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{}),\"Whenever you're deciding on spacing \u2014 be it margins, padding, or gaps \u2014 refer to this list. It's designed to provide uniformity, streamline your decisions, and maintain a consistent visual rhythm throughout the interface.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,TPHSFH5rMSMDaG105acNQ2u0Tk.png\",\"data-framer-height\":\"1580\",\"data-framer-width\":\"724\",height:\"790\",src:\"https://framerusercontent.com/images/TPHSFH5rMSMDaG105acNQ2u0Tk.png\",style:{aspectRatio:\"724 / 1580\"},width:\"362\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Implementing the Grid System\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),\"The 4-point grid system is a versatile tool for creating a cohesive, consistent layout in design. It's based on increments of four to create harmony and balance.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Base Unit\"}),\": Start with a base unit of 4 points. This will be the foundation for all spacing and layout measurements.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Containers\"}),\": Use multiples of 4 (8, 16, 32, etc.) for padding within containers to ensure elements are aligned and uniformly spaced.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Elements Sizing\"}),\": Apply the grid to the sizing of elements, ensuring buttons, icons, and form fields adhere to the multiples of 4.\\u2028\\u2028\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,sAUtT2xeXiJ4oQoGdD83S4UR4JA.png?originalFilename=Screenshot+2023-11-20+at+10.12.58.png\",\"data-framer-height\":\"1202\",\"data-framer-width\":\"1600\",height:\"601\",src:\"https://framerusercontent.com/images/sAUtT2xeXiJ4oQoGdD83S4UR4JA.png\",style:{aspectRatio:\"1600 / 1202\"},width:\"800\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Using Halves for Precision\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),\"When finer control is needed, particularly for smaller components like buttons, you can use half values (2 points) to get the perfect spacing without breaking the grid system's rhythm.\\u2028\\u2028\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,SgRijTfIhf9CxcjnGapHvN3l8.png?originalFilename=Specs.png\",\"data-framer-height\":\"2060\",\"data-framer-width\":\"2960\",height:\"1030\",src:\"https://framerusercontent.com/images/SgRijTfIhf9CxcjnGapHvN3l8.png\",style:{aspectRatio:\"2960 / 2060\"},width:\"1480\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Proportions Depending on Element Size\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Small Elements\"}),\": Use smaller grid units (e.g., 4, 8 points) for spacing around text fields, buttons, and icons.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Large Elements\"}),\": Increase the grid unit for larger elements like cards or modal windows to maintain proportional spacing (e.g., 16, 32 points).\\u2028\\u2028\"]}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Gaps and Auto Layout\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Auto Layout\"}),\": Use auto layout functions to automatically apply the grid system within components. This ensures consistent spacing as elements resize or adjust.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Gaps\"}),\": Define gap properties between elements based on the 4-point grid, ensuring consistent space within lists, grids, or stacks of components.\\u2028\\u2028\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,MiSXC0ilWTuSynjuFcgYY2elnmM.png?originalFilename=Screenshot+2023-11-20+at+10.21.42.png\",\"data-framer-height\":\"1202\",\"data-framer-width\":\"1600\",height:\"601\",src:\"https://framerusercontent.com/images/MiSXC0ilWTuSynjuFcgYY2elnmM.png\",style:{aspectRatio:\"1600 / 1202\"},width:\"800\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Variables for Different Elements\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),\"Create spacing variables that can be applied to different elements. For example, --spacing-small could be 8 points, while --spacing-large could be 32 points. Use these variables consistently across your design.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Primitives and Spacing\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Primitives\"}),\": Define primitives for your spacing just like you do for colors. These are the smallest units from which all spacing is derived.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Consistent Application\"}),\": Apply these primitives consistently across all UI elements to maintain a coherent visual structure.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,8KpyDddzuu14vLqEMW9INbiMvDU.png\",\"data-framer-height\":\"1202\",\"data-framer-width\":\"1600\",height:\"601\",src:\"https://framerusercontent.com/images/8KpyDddzuu14vLqEMW9INbiMvDU.png\",style:{aspectRatio:\"1600 / 1202\"},width:\"800\"}),/*#__PURE__*/e(\"h5\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Practical Application\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Hierarchy\"}),\": Larger spacing for larger elements enhances visual hierarchy.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Readability\"}),\": Adequate spacing between text lines improves readability.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Responsive Design\"}),\": Use variable spacing for different screen sizes. For example, a desktop layout may have more generous outer margins than a mobile screen.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Accessibility\"}),\": Consider the touch targets for interactive elements, ensuring they are spaced appropriately for usability.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,j5QqA66NU4ma3XxdYh75uqnLkE.png\",\"data-framer-height\":\"1202\",\"data-framer-width\":\"1600\",height:\"601\",src:\"https://framerusercontent.com/images/j5QqA66NU4ma3XxdYh75uqnLkE.png\",style:{aspectRatio:\"1600 / 1202\"},width:\"800\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Summary\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),\"By leveraging the 4-point grid system and its divisible units, designers create a rhythm that's visually pleasing and functionally robust. Spacing primitives become a core part of the design system, allowing for a modular approach to layout construction. Auto layout features further streamline the design process, ensuring consistency across different screens and devices. Use spacing variables judiciously to ensure elements are neither too cramped nor too spread out, respecting the overall design's balance and user needs.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Understanding Breakpoints\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"What Are Breakpoints?\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),\"Breakpoints are specific pixel values that define how the layout of web content should adapt to different screen sizes, ranging from mobile devices to large desktop monitors. They're a cornerstone of responsive design, ensuring that an application or website remains accessible, legible, and usable across all devices.\\u2028\\u2028\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,SeJgcyidRkxK7KFvV0tao57I.png\",\"data-framer-height\":\"168\",\"data-framer-width\":\"2002\",height:\"84\",src:\"https://framerusercontent.com/images/SeJgcyidRkxK7KFvV0tao57I.png\",style:{aspectRatio:\"2002 / 168\"},width:\"1001\"}),/*#__PURE__*/e(\"h5\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Setting Breakpoints\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Common Breakpoints\"}),\": Start with industry-standard breakpoints. Common sizes include:\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Mobile\"}),\" (small screens): 320px, 375px, 480px\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Tablet\"}),\" (medium screens): 600px, 768px, 1024px\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Desktop\"}),\" (large screens): 1280px, 1440px, 1920px\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Content-Driven Breakpoints\"}),\": Instead of, or in addition to standard sizes, consider where your content naturally breaks. Adjust layouts when the content requires, not strictly by device dimensions.\\u2028\\u2028\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,c2AyCO6U93VOx4MIXaIUfUUeU4.png\",\"data-framer-height\":\"614\",\"data-framer-width\":\"880\",height:\"307\",src:\"https://framerusercontent.com/images/c2AyCO6U93VOx4MIXaIUfUUeU4.png\",style:{aspectRatio:\"880 / 614\"},width:\"440\"}),/*#__PURE__*/i(\"h5\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/e(\"h3\",{children:\"Using Breakpoints in Design Systems\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Variables\"}),\": Create variables for your breakpoints, such as --breakpoint-mobile, --breakpoint-tablet, --breakpoint-desktop.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"CSS Media Queries\"}),\": Use these variables within media queries to apply different styles at each breakpoint, ensuring content scales and rearranges effectively.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Component Variants\"}),\": Design components with variations for each breakpoint, adjusting padding, margins, and font sizes to fit different screens.\\u2028\\u2028\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,D1CHd99gfJXpC7OtBvwgSpXXp1w.png\",\"data-framer-height\":\"1660\",\"data-framer-width\":\"1716\",height:\"830\",src:\"https://framerusercontent.com/images/D1CHd99gfJXpC7OtBvwgSpXXp1w.png\",style:{aspectRatio:\"1716 / 1660\"},width:\"858\"}),/*#__PURE__*/i(\"h5\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/e(\"h3\",{children:\"Breakpoints and the 4-Point Grid\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Consistency Across Breakpoints\"}),\": Maintain the 4-point grid system across breakpoints. Adjust grid units in multiples of four to ensure consistency while scaling up or down.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Proportional Scaling\"}),\": As you move from smaller to larger breakpoints, scale spacing proportionally. A padding of 16px on mobile could scale to 32px on desktop.\\u2028\\u2028\"]}),/*#__PURE__*/e(\"h5\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Auto Layout and Breakpoints\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Fluid Containers\"}),\": Use auto layout to make containers and elements stretch and shrink between breakpoints.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Min/Max Sizing\"}),\": Set minimum and maximum widths for elements to ensure they don't become too narrow or too wide at different breakpoints.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Breakpoints and Accessibility\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Touch Targets\"}),\": At smaller breakpoints, ensure touch targets are large enough (at least 44px by 44px) for comfortable interaction.\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Readable Text\"}),\": Scale text sizes at different breakpoints to ensure legibility. Text that's readable on a desktop may be too small on mobile.\"]})]})},{id:\"kgcIP4kiQ\",[s]:\"Colors\",[o]:\"colors\",[l]:\"Figma Color Variables and Styles\",[c]:\"Effective color use in design systems involves defining a palette of primary, secondary, and neutral colors, then converting these into consistently used color variables. Focus on context, contrast, and cohesion, and experiment with gradients and opacity for depth, while maintaining a professional look.\",[d]:'<iframe style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FtMjSwKbrcKbmb1Q4aDokxn%2FDesignCode-UI%3Ftype%3Ddesign%26node-id%3D256%253A12275%26mode%3Ddesign%26t%3Dm1AR8HxqxJ2Vzufu-1\" allowfullscreen></iframe>',[h]:\"https://www.figma.com/file/tMjSwKbrcKbmb1Q4aDokxn/DesignCode-UI?type=design&node-id=256%3A12275&mode=design&t=m1AR8HxqxJ2Vzufu-1\",[g]:{webPageId:\"DY9adcFVw\"},[p]:/*#__PURE__*/i(a.Fragment,{children:[/*#__PURE__*/e(\"h2\",{children:\"Semantic Colors in Figma\"}),/*#__PURE__*/e(\"p\",{children:\"In the dynamic world of Figma, understanding color styles is essential for creating visually compelling designs. Let's dive into the various color styles and their applications:\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,nB3UnRIGf4Vz5fldrhCZucD6tpk.png?originalFilename=Screenshot+2023-11-20+at+10.42.55.png\",\"data-framer-height\":\"1710\",\"data-framer-width\":\"1964\",height:\"855\",src:\"https://framerusercontent.com/images/nB3UnRIGf4Vz5fldrhCZucD6tpk.png\",style:{aspectRatio:\"1964 / 1710\"},width:\"982\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Foreground Color\"}),\": This category primarily focuses on the colors for texts, icons, and any element that prominently appears in the front. It's the color that catches the viewer's eye first and is crucial for highlighting important elements.\\u2028\\u2028\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,1N7qL4MwLxwYFBkUi4xIDt0DI.png?originalFilename=Color+Styles+Light+Mode.png\",\"data-framer-height\":\"372\",\"data-framer-width\":\"1400\",height:\"186\",src:\"https://framerusercontent.com/images/1N7qL4MwLxwYFBkUi4xIDt0DI.png\",style:{aspectRatio:\"1400 / 372\"},width:\"700\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Secondary and Tertiary Colors\"}),\": These colors add depth and variety to your designs. They are used to accentuate and support the primary (foreground) colors, bringing balance and visual interest to the overall design.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Container Colors\"}),\": Essential for elements like cards, these colors include container backgrounds, borders, and dividers. They provide structure and clarity, segmenting different sections and content in a design.\\u2028\\u2028\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,uexYifOsl7Gt7KfNfWSxpiPYyx0.png?originalFilename=Screenshot+2023-11-20+at+10.42.43.png\",\"data-framer-height\":\"1710\",\"data-framer-width\":\"1964\",height:\"855\",src:\"https://framerusercontent.com/images/uexYifOsl7Gt7KfNfWSxpiPYyx0.png\",style:{aspectRatio:\"1964 / 1710\"},width:\"982\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Button Colors\"}),\": A vital part of interactive design, button colors include the button foreground (often the text color) and adapt to various states like hover, inactive, selected, and active. The primary color often dictates the button's base color, ensuring consistency across the design.\\u2028\\u2028\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,Ixf09SAiRT1Vls8WUyzbeoxwhTY.png?originalFilename=Color+Styles+Button.png\",\"data-framer-height\":\"372\",\"data-framer-width\":\"1400\",height:\"186\",src:\"https://framerusercontent.com/images/Ixf09SAiRT1Vls8WUyzbeoxwhTY.png\",style:{aspectRatio:\"1400 / 372\"},width:\"700\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Background Colors\"}),\": Serving as the canvas for your design, these are typically primary and secondary colors used across the entire screen. Popular choices include black, white, dark gray, and off-white, with variations like dark blue and light blue. They are pivotal in both light and dark mode settings, ensuring readability and aesthetic appeal in different lighting conditions.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,emDoFDgi3KghmaGITyA98JnbxGQ.png?originalFilename=Screenshot+2023-11-20+at+10.43.06.png\",\"data-framer-height\":\"1710\",\"data-framer-width\":\"1964\",height:\"855\",src:\"https://framerusercontent.com/images/emDoFDgi3KghmaGITyA98JnbxGQ.png\",style:{aspectRatio:\"1964 / 1710\"},width:\"982\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Exploring Gradients in Figma Design\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),\"Gradients in Figma offer a dynamic way to enhance your designs, bringing an additional layer of depth and personality. They are typically used in specific design elements, such as backgrounds, card backgrounds, and button backgrounds. Here's a closer look at how gradients can elevate your design work:\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Backgrounds and Card Backgrounds\"}),\": Gradients add a subtle complexity to these elements, making them stand out without overwhelming the overall design.\\u2028\\u2028\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,9ByjlktcQjZA7xzeBgLavuZUXY.png\",\"data-framer-height\":\"336\",\"data-framer-width\":\"1400\",height:\"168\",src:\"https://framerusercontent.com/images/9ByjlktcQjZA7xzeBgLavuZUXY.png\",style:{aspectRatio:\"1400 / 336\"},width:\"700\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Button Backgrounds\"}),\": Using gradients here can create a sense of depth and make buttons more engaging and noticeable.\\u2028\\u2028\",/*#__PURE__*/e(\"br\",{}),\"Ornamental Use: Gradients act like ornaments, injecting style and personality into designs. They are not just functional but also add an aesthetic flair.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Outlines and Glows\"}),\": Gradients can be creatively used for outlines or to create a glowing effect, adding a unique touch to elements.\\u2028\\u2028\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,7dXOk3akK59qaVD5oDUhq7owY.jpg\",\"data-framer-height\":\"1024\",\"data-framer-width\":\"1024\",height:\"512\",src:\"https://framerusercontent.com/images/7dXOk3akK59qaVD5oDUhq7owY.jpg\",style:{aspectRatio:\"1024 / 1024\"},width:\"512\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Angular Gradients\"}),\": These are most commonly used for glow effects or as backgrounds with a blur effect. Angular gradients require careful handling, often needing a blur layer on top to look their best.\\u2028\\u2028\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,6qxC7Y6l88RbMoiRe2wr3FH8IA.png\",\"data-framer-height\":\"372\",\"data-framer-width\":\"1400\",height:\"186\",src:\"https://framerusercontent.com/images/6qxC7Y6l88RbMoiRe2wr3FH8IA.png\",style:{aspectRatio:\"1400 / 372\"},width:\"700\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Radial and Linear Gradients\"}),\": These are the more common types. Radial gradients are akin to linear gradients in their application but offer a different visual feel.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Diamond Gradient\"}),\": Like angular gradients, diamond gradients also benefit from a blur layer for optimal aesthetics.\\u2028\\u2028\",/*#__PURE__*/e(\"br\",{}),\"Use Sparingly for Uniqueness: While gradients can significantly enhance a design, they should be used sparingly. Overuse can overwhelm the design or make it look cluttered.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"For Beginners\"}),\": If you're not yet confident in using gradients, it's advisable to stick with existing templates and components. Gradients require a nuanced understanding of color and effect to be used effectively.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),\"Incorporating gradients into your Figma designs can add a layer of sophistication and uniqueness. However, it's crucial to understand their impact and use them judiciously to maintain the balance and integrity of your design.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"How to Use Colors in Design Systems\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),\"Primitives are the basic building blocks of your design system's color palette. These are the essential colors that define your brand and interface. Primitives usually include:\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Primary Colors\"}),\": The main color of your brand.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Secondary Colors\"}),\": Supportive colors that complement your primary color.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Neutral Colors\"}),\": Grayscale colors used for text, backgrounds, and UI elements.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Color Variables\"}),\" (or Design Tokens) are named entities that store color values. Instead of using direct color codes in your designs, use these variables. This makes it easier to maintain consistency and simplifies changes across your designs.\\u2028\\u2028\\u2028\\u2028\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})]}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,anlDtjGHc4130NSi84e17KYN6hA.png\",\"data-framer-height\":\"1694\",\"data-framer-width\":\"2220\",height:\"847\",src:\"https://framerusercontent.com/images/anlDtjGHc4130NSi84e17KYN6hA.png\",style:{aspectRatio:\"2220 / 1694\"},width:\"1110\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h3\",{children:\"Setting Up Primitives in a Design System\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Define Brand Colors\"}),\": Choose a primary brand color and complementary secondary colors.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Create Shades\"}),\": Develop a range of tints (lighter shades) and shades (darker versions) for each color.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Assign Meaning\"}),\": Colors should have a clear role, like error (red), success (green), or warning (yellow).\\u2028\\u2028\\u2028\\u2028\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,wsg09nO6dMF7rMJ419t2JESPmM.png\",\"data-framer-height\":\"570\",\"data-framer-width\":\"1040\",height:\"285\",src:\"https://framerusercontent.com/images/wsg09nO6dMF7rMJ419t2JESPmM.png\",style:{aspectRatio:\"1040 / 570\"},width:\"520\"}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Using Color Variables\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Naming Conventions\"}),\": Use clear, descriptive names for color variables, such as --color-primary or --color-background-light.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Apply Variables\"}),\": Use these variables throughout your design instead of hard-coded color values.\\u2028\\u2028\\u2028\\u2028\"]}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Context and Colors\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Contextual Use of Colors\"}),\": Colors should change depending on their context. For instance:\\u2028\\u2028\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Background Colors\"}),\": Use lighter shades for backgrounds to reduce eye strain.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Interactive Elements\"}),\": Use medium shades for buttons to make them stand out.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Text\"}),\": Contrast is crucial. Ensure text colors stand out against their background for readability.\\u2028\\u2028\\u2028\\u2028\"]}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Tips for Working with Colors\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Consistency\"}),\": Stick to your defined color system for a cohesive design language.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Contrast\"}),\": Always check for enough contrast, especially for text, to ensure accessibility.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Cohesion\"}),\": Ensure colors complement each other, creating a visually harmonious interface.\\u2028\\u2028\\u2028\\u2028\"]}),/*#__PURE__*/i(\"h3\",{children:[/*#__PURE__*/e(\"br\",{}),\"Advanced Techniques\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"strong\",{children:\"Gradients\"}),\": For a modern look, experiment with gradients, but use them sparingly to maintain a professional appearance.\",/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Opacity and Blends\"}),\": Use these to create depth and layering in your interface.\\u2028\\u2028\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/i(\"strong\",{children:[/*#__PURE__*/e(\"br\",{}),\"Summary\\u2028\\u2028\"]}),/*#__PURE__*/e(\"br\",{}),\"A design system\u2019s color palette should start with a set of primitives \u2014 your primary, secondary, and neutral colors. Turn these into color variables for easy reference and application across your design. Use these colors contextually to convey meaning and ensure accessibility. Maintain consistency in your designs by sticking to the color system, and always ensure sufficient contrast for readability. Experiment with advanced techniques like gradients and blends to add depth to your design.\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,RLkSKUgH9WItc6dSwwoDMGACD0.png\",\"data-framer-height\":\"928\",\"data-framer-width\":\"1400\",height:\"464\",src:\"https://framerusercontent.com/images/RLkSKUgH9WItc6dSwwoDMGACD0.png\",style:{aspectRatio:\"1400 / 928\"},width:\"700\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,c2PyApOVYSUT7QOaHL74I6xmMtM.png\",\"data-framer-height\":\"928\",\"data-framer-width\":\"1400\",height:\"464\",src:\"https://framerusercontent.com/images/c2PyApOVYSUT7QOaHL74I6xmMtM.png\",style:{aspectRatio:\"1400 / 928\"},width:\"700\"}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"h2\",{children:\"Color Contrast in Figma for Accessibility and Readability\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),\"In the realm of design, particularly when working in tools like Figma, it's crucial to ensure that your content is not only aesthetically pleasing but also accessible and easy to read. A key component in achieving this is understanding and effectively applying color contrast.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Importance of Contrast Ratio\"}),\": A strong contrast ratio is essential for making design elements, especially text and icons, stand out against their backgrounds. It significantly affects legibility and clarity.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Contrast Ratio Range\"}),\": The contrast ratio ranges from 1 to 21. A ratio of 21:1 represents the highest contrast, such as black text on a white background, while 1:1 indicates no contrast, like white text on a white background.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/i(\"strong\",{children:[/*#__PURE__*/e(\"br\",{}),\"Using Figma Plugins for Contrast\"]}),\": Tools like the \",/*#__PURE__*/e(r,{href:\"https://www.figma.com/community/plugin/1024452006068794933/foundation-color-generator\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Foundation Color Generator\"})}),\" and \",/*#__PURE__*/e(r,{href:\"https://www.figma.com/community/plugin/732603254453395948/stark-accessibility-tools\",openInNewTab:!0,smoothScroll:!1,children:/*#__PURE__*/e(\"a\",{children:\"Stark\"})}),\" can be immensely helpful in Figma. They allow designers to select a foreground element (like text or an icon) and compare it against the background, providing a contrast ratio value.\\u2028\\u2028\"]}),/*#__PURE__*/e(\"p\",{children:/*#__PURE__*/e(\"br\",{className:\"trailing-break\"})}),/*#__PURE__*/e(\"img\",{alt:\"\",className:\"framer-image\",\"data-framer-asset\":\"data:framer/asset-reference,3I3i9S9rsIFhrtWJzBSZEt3RSQs.png\",\"data-framer-height\":\"1658\",\"data-framer-width\":\"2218\",height:\"829\",src:\"https://framerusercontent.com/images/3I3i9S9rsIFhrtWJzBSZEt3RSQs.png\",style:{aspectRatio:\"2218 / 1658\"},width:\"1109\"}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Standards for Contrast Ratios\"}),\": According to the Web Content Accessibility Guidelines (WCAG), the minimum contrast ratio for AA level is 4.5:1 for normal text and 3:1 for large text. For the higher AAA standard, the ratios are 7:1 for normal text and 4.5:1 for large text.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"Targeting Higher Contrast Ratios\"}),\": While a contrast ratio of 3:1 meets the AA requirement for large text, it falls short for normal text. Therefore, aiming for higher contrast ratios, preferably at the AAA level, ensures better accessibility and readability for a broader audience, including those with visual impairments.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),/*#__PURE__*/e(\"strong\",{children:\"ColorStyles and Variable Colors in Figma\"}),\": When working with ColorStyles and variable colors in Figma, aim to pair colors against black or white to achieve a high contrast ratio. This practice not only enhances the visual appeal of your design but also ensures it is accessible to as many users as possible.\\u2028\\u2028\"]}),/*#__PURE__*/i(\"p\",{children:[/*#__PURE__*/e(\"br\",{}),\"By prioritizing high contrast ratios in your designs, you enhance the overall user experience, making your designs not only visually appealing but also accessible and inclusive.\"]})]})}];for(let e of m)Object.freeze(e);n(m,{KHZzMyXdN:{defaultValue:\"\",title:\"Section\",type:t.String},ks5wykjz9:{title:\"Slug\",type:t.String},qk2Ednyei:{defaultValue:\"\",title:\"Title\",type:t.String},TRYee_XNK:{defaultValue:\"\",title:\"Text\",type:t.String},ksz3Nuzv3:{defaultValue:\"\",title:\"Embed\",type:t.String},G9SmQhwci:{title:\"Figma Link\",type:t.Link},o21fVCjpy:{title:\"Back Link\",type:t.Link},jBTAhKkBs:{defaultValue:\"\",title:\"Content\",type:t.RichText}}),m.displayName=\"Components\";export default m;export const enumToDisplayNameFunctions={};\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"data\",\"name\":\"data\",\"annotations\":{\"framerContractVersion\":\"1\",\"framerSlug\":\"ks5wykjz9\",\"framerEnumToDisplayNameUtils\":\"2\",\"framerRecordIdKey\":\"id\",\"framerData\":\"\"}},\"enumToDisplayNameFunctions\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}"],
  "mappings": "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",
  "names": ["s", "o", "l", "c", "d", "h", "g", "p", "m", "u", "x", "Link", "e", "addPropertyControls", "ControlType", "epAzzOQ1Q_default", "enumToDisplayNameFunctions", "__FramerMetadata__"]
}