DOCSEARCHbyAlgolia
Submit Docs

Holistics Design System

website·Indexed 30 days ago

https://design.holistics.dev

Documentation for the Holistics design system, featuring base elements like semantic color tokens and typography, content guidelines for tone of voice and grammar, and a comprehensive library of components including Modals, Forms, Buttons, and Drawers. Includes technical guides for TailwindCSS presets and floating UI mechanisms.

Tokens
58.7K
Snippets
292
Records
426
Agent score
47%

What's inside Holistics Design System

  1. Use the HHotspot component to draw user attention

    The HHotspot component creates an animated marker used to highlight specific spots on the screen. It positions itself relative to the nearest container with position: relative.
    <script setup lang="ts">
import { HHotspot } from '@holistics/design-system'
</script>

<template>
  <div class="relative flex size-64 items-center justify-center rounded-2xl border-2 border-strong">
    <HHotspot position="left" />
    <span class="text-helper">Container</span>
  </div>
</template>

  2. Use HCopyBox to create a read-only copyable text field

    The HCopyBox component from @holistics/design-system combines a read-only text display with a copy button. It can be used for single-line or multi-line text and supports optional leading icons and custom buttons.
    <script setup lang="ts">
import { HCopyBox } from '@holistics/design-system'

const text = 'Text to be copied'
const name = 'Example Copy Box'
</script>
<template>
  <HCopyBox
    :name
    :text
  />
</template>

  4. Use the HDivider component to separate UI elements

    The HDivider component is used to separate two UI elements to indicate hierarchy and grouping. It supports both vertical and horizontal orientations and a compact mode.
    <script setup lang="ts">
import { HDivider } from '@holistics/design-system'
</script>

<template>
  <div class="flex h-10 flex-row items-center">
    <div>Content 1</div>
    <HDivider />
    <div>Content 2</div>
  </div>
</template>

  5. Write effective warning messages

    Use warning messages to alert users about potential future problems, approaching limits/deadlines, or actions that will affect data. Unlike confirmations, warnings inform users of risks but allow them to continue working.

    Writing Guidelines:

    • Title: Use sentence case. Use "will" for certain outcomes and "may" or "might" for possible outcomes. Start statements with a verb rather than "You must" or "There is" (e.g., use "Set up 2FA before today" instead of "You must set up 2FA before today").
    • Description: Explain what might happen, when, and what the user can do. Explicitly state if an action is irreversible. Limit to 1–2 sentences.
    • CTA: Use specific action words instead of "OK". For destructive actions, use "Delete", "Remove", or "Proceed".

  6. Understand Floating UI component concepts

    Floating UI components (such as HPopover, HTooltip, HSelect, and HDropdown) consist of three primary parts:

    1. Trigger: The element the user interacts with (e.g., click or focus) to toggle the menu's open state.
    2. Anchor: The element the floating content is positioned relative to. By default, the trigger serves as the anchor.
    3. Floating content: The actual menu or popup content.

  9. Use the HAvatar component to display user profiles

    The HAvatar component displays a user's profile image. If no image is provided or while the image is loading, it can display the user's initials or a name. It supports various sizes, shapes, and an optional status badge.
    <script setup lang="ts">
import { HAvatar } from '@holistics/design-system'
</script>

<template>
  <HAvatar size="md" image="https://example.com/photo.jpg" />
</template>

  10. Implement nested and hierarchical options in Select

    The Select component supports recursive nesting of options using the children property. You can control whether a group is open by default using initialExpanded. This is useful for creating cascading menus or complex category trees.
    {
  value: '6',
  label: 'Parent Option',
  children: [
    {
      label: 'Child Option 1',
      value: '6.1',
      icon: 'hash'
    },
    {
      label: 'Child Option 2',
      value: '6.2',
      initialExpanded: true,
      children: [
        { label: 'Grandchild 1', value: '6.2.1' },
      ]
    }
  ]
}

  11. Implement accessible notifications

    Ensure notifications are accessible by following these requirements:

    • Avoid color-only cues: Pair colors with icons and clear text to ensure meaning is conveyed without color.
    • Avoid auto-dismissing critical messages: Do not use timed dismissals for emergency or critical information (per WCAG 2.1 2.2.1).
    • Use ARIA live regions: Use role="alert" for errors and warnings, and role="status" for info and success messages to ensure screen readers announce changes.
    • Provide user control: Allow users to postpone or suppress non-critical notifications (per WCAG 2.1 2.2.4).

  12. Ensure accessibility for icon-only buttons

    Icon-only buttons must have an accessible name for screen readers. HButton determines the accessible name in this priority order: 1. label prop, 2. Visible text content, 3. ARIA attributes (aria-label, aria-labelledby, aria-describedby), 4. HTooltip content. The @holistics/require-button-tooltip ESLint rule flags icon-only buttons missing these names.
    <!-- Recommended: Using aria-label -->
<HButton icon="x" aria-label="Close dialog" />

<!-- Recommended: Using HTooltip -->
<HTooltip content="Save your changes">
  <HButton icon="save" />
</HTooltip>

<!-- Bad: No accessibility support -->
<HButton icon="save" />