DOCSEARCHbyAlgolia
Submit Docs

Astro UXDS Nova

website·Indexed 31 days ago

https://astro-design-tokens.netlify.app/

A modular, reimagined version of the Astro User Experience Design System (UXDS). This documentation covers design foundations including typography, spacing, and dimensions, as well as a library of UX patterns for feedback, ratings scales, and choice inputs.

Tokens
2.7K
Snippets
9
Records
18
Agent score
65%

What's inside Astro UXDS Nova

  1. Use the Pattern Template for documenting design solutions

    A pattern is defined as a solution to a problem in context, emphasizing the rationale ('why') as well as the implementation ('how'). When documenting a new pattern, use the following template structure to ensure consistency and clarity:

    • Name: A unique reference for the problem/solution pairing.
    • Problem: The specific issue that needs to be solved.
    • Solution: The proposed resolution to the problem.
    • Context: The circumstances, constraints, and situations where the pattern is applicable.
    • Forces: The constraints, challenges, conflicting requirements, or trade-offs that make the problem non-trivial.
    • Indications (Optional): Symptoms that suggest the problem exists.
    • Resulting Context (Optional): The state of the system after the pattern is applied, including any new problems created.
    • Related Patterns (Optional): Alternative solutions, variations, or subsequent patterns.
    • Examples (Optional): Concrete illustrations of the pattern in use.
    • Code Samples (Optional): Implementation code.
    • Rationale (Optional): Explanation of why this specific solution is most appropriate for the context.

  2. Implement a Ratings Scale for quantifying user experience

    Use a Ratings Scale when you need to quantify a subjective aspect of a user's experience, opinion, or degree of satisfaction and agreement. The solution involves presenting a question that the user can answer using a numerical scale, typically ranging from 1 to 5 or 1 to 10. This pattern balances the need for quantifiable data with simplicity for the respondent.

  3. Implement the Emotion Spectrum pattern for sentiment capture

    The Emotion Spectrum pattern is used when you need to understand emotional reactions to a specific content piece, product, or experience. It involves providing users with visual or descriptive emotional cues—such as a scale of faces ranging from happy to sad—to allow them to express their feelings intuitively. This is particularly effective for experiences specifically designed to evoke emotional responses, though it is important to note that results are based on subjective interpretation.

  4. Install and import Astro UXDS design tokens

    Install the @astrouxds/tokens package using the nova tag and import the primitive CSS file into your project's entry point to apply the design tokens.
    npm i @astrouxds/tokens@nova
    // index.js
import '@astrouxds/tokens/dist/primitives.css';

  5. Implement Open Text patterns for detailed user feedback

    Use the 'Open Text' pattern when you need to collect in-depth, personalized, and rich feedback from users. This is most effective as a follow-up to structured questions where a freeform text input allows respondents to express thoughts that cannot be captured by predefined options. Note that while this provides high-quality insights, it increases the complexity of data analysis due to the lack of structure in the responses.

  6. Implement responsive icons using em units

    To allow icons to automatically inherit the current font size instead of explicitly applying an icon-size token, set the SVG width and height attributes to 1em.
    <svg width="1em" height="1em" ...>
  <!-- Icon content -->
</svg>

  7. Implement the Binary Choice design pattern for feedback

    The Binary Choice pattern is used when you need to collect simple, unambiguous feedback limited to two distinct, opposing outcomes. This pattern is ideal for scenarios requiring swift responses and easy analysis, though it does not capture nuanced feedback.

    Usage Guidelines:

    • Pose a question or statement that can be answered with one of two clear, predefined options.
    • Use this when the query can be framed into two clear opposing choices.

    Examples of Binary Choice queries:

    • "Are you satisfied with our service?"
    • "Please indicate if this content was helpful or not."

  8. Pair font sizes with recommended line heights

    To maintain visual balance, manually adjust line heights as font sizes increase. Use line-height-normal for smaller and base text, and switch to line-height-tight for larger headings (XL and above).
    /* Recommended Pairings */

/* Small to Large text */
.text-small { 
  font-size: var(--font-size-xs); 
  line-height: var(--line-height-normal); 
}
/* ... applies to sm, base, and lg */

/* Extra Large to 6XL text */
.text-heading { 
  font-size: var(--font-size-xl); 
  line-height: var(--line-height-tight); 
}
/* ... applies to 2xl, 3xl, 4xl, 5xl, and 6xl */

  9. Configure Astro UXDS with Tailwind CSS

    Install the @astrouxds/tailwind plugin using the nova tag and add it to the plugins array in your tailwind.config.js file to integrate Astro UXDS tokens with Tailwind.
    npm i @astrouxds/tailwind@nova
    // tailwind.config.js
module.exports = {
  // ...
  plugins: [require('@astrouxds/tailwind')]
  // ...
}

  10. Implement Multiple Choice patterns for structured feedback

    Use the Multiple Choice pattern when you need to capture nuanced feedback or detailed insights while preventing completely freeform responses. This ensures structured data by limiting the respondent to a set of predefined options. Common use cases include demographic questions such as age ranges, industry, or location.

  11. Implement Feedback Patterns for user data collection

    Feedback patterns are used to gather user opinions, feelings, or experiences to improve products and services. When implementing feedback mechanisms, consider the following forces:

    • Diversity of Responses: Balance structured questions (for quantitative data) with open-ended options (for qualitative insights).
    • Complexity of Analysis: Ensure the collection method aligns with your team's capacity to analyze the resulting data.
    • Engagement Level: Match the feedback method to the amount of time and effort you expect the user to commit.
    • Sensitivity of Information: Apply appropriate data handling and collection methods based on the sensitivity of the information requested.

    Common use cases include product feedback surveys, user research interview strategies, and website usability forms.

  12. Implement spacing using Astro design tokens

    Astro uses a numeric, linear spacing scale based on a base-spacing-unit token.

    Usage Guidelines:

    • Do: Use the spacing scale for margin, padding, and gap properties.
    • Do Not: Use the spacing scale for dimensions (width or height). Using these tokens for dimensions can break the UI when dynamic scaling is enabled and provides no benefit as dimension is a separate concept.
    • Consistency: Avoid adding custom steps to the spacing scale to maintain system consistency. If a specific value (e.g., 34px) is needed, try the nearest available tokens (e.g., spacing-8 or spacing-9) before resorting to a one-off value.