Touchable Design System

The official Vue 3 design system from Touchable Technologies.

A visual and technical foundation for consistent, accessible and scalable digital products.

NPM · GitHub · Release v1.0.0 · Changelog

Overview

Touchable Design System is the official source of UI components and design foundations for Touchable Technologies products. It is built for teams shipping Vue 3 applications across the web, server-rendered environments and Capacitor WebViews.

The public API is intentionally composed of individual entrypoints. Import only the components your application uses, keep contracts explicit and let your bundler perform predictable tree-shaking.

Highlights

| Capability | Status | | ------------------------------ | ---------------------------------------------------------------- | | Vue 3 components | Supported | | TypeScript declarations | Included (.d.ts) | | Individual subpath entrypoints | Supported | | Tree-shaking | Supported by ESM entrypoints | | SSR and hydration | Validated with server rendering and stable IDs | | Accessibility | Automated axe, semantic, keyboard and contrast coverage | | Light/dark themes | data-theme="light" and data-theme="dark" | | Reduced motion | prefers-reduced-motion: reduce | | Web and mobile layouts | Validated in desktop and mobile Web flows | | Capacitor/WebView | Web build and configuration validated | | Native iOS/Android | Not claimed; native SDKs are outside this validation environment | | CSS and official tokens | Included through styles.css | | Vue peer dependency | vue: ^3.5.0 | | Source maps | Included in generated distribution output |

Installation

Vue 3 is a peer dependency. Add it explicitly when it is not already provided by your application.

pnpm add vue @touchable/design-system

npm install vue @touchable/design-system

yarn add vue @touchable/design-system

To reproduce the first stable release exactly:

pnpm add @touchable/[email protected]

Global styles

Load the official stylesheet once from your application entrypoint or root layout:

import '@touchable/design-system/styles.css'

It contains the component styles and foundation tokens. Import it once before rendering the application. Do not import internal or src paths.

First use

<script setup lang="ts">
import { Button } from '@touchable/design-system/button'
import '@touchable/design-system/styles.css'
</script>

<template>
  <Button>Continuar</Button>
</template>

Individual imports

Every public component has an explicit subpath:

import { Button } from '@touchable/design-system/button'
import { Input } from '@touchable/design-system/input'
import { Dialog } from '@touchable/design-system/dialog'

This supports smaller bundles, explicit contracts and predictable tree-shaking. There is no public aggregate barrel.

// Not public API
import { Button } from '@touchable/design-system/src'
import { Button } from 'packages/design-system/src'

Public component catalog

This catalog is maintained from the package exports map. All entries use @touchable/design-system/<entrypoint>.

Foundations and layout

Box · Container · Divider · Grid · Inline · Stack · Surface · Text · Heading

Actions and forms

Button · ButtonGroup · IconButton · Input · Label · Field · Hint · Textarea · Checkbox · Radio · RadioGroup · Select · Switch

Data display and feedback

Avatar · Badge · Card · Table · EmptyState · ErrorMessage · Image · Progress · Skeleton · Spinner · Toast · Alert

Navigation and overlays

Breadcrumb · Pagination · Tabs · Dialog · Drawer · DropdownMenu · Popover · Tooltip

The package also exposes ./styles.css and ./package.json. The complete inventory is generated from packages/design-system/package.json so documentation cannot silently add a component that is not public.

Themes and tokens

Choose the theme explicitly on an application root element:

<div data-theme="light"><!-- application --></div>

Use data-theme="dark" for dark mode. The package does not read localStorage or override the consumer's choice. The shipped CSS contains semantic color, typography, spacing, radius, shadow, motion and safe-area tokens. Motion durations collapse to zero when reduced motion is preferred.

Accessibility

Components are developed and validated with practices aligned with WCAG: semantic HTML, accessible labels and roles, visible focus, keyboard interactions, Escape behavior where applicable, pointer/touch behavior and light/dark contrast checks. Automated axe coverage, interaction tests and a dedicated contrast suite are part of the validation record.

This project does not claim formal WCAG certification. Application teams remain responsible for accessible content and integration context.

SSR and hydration

The package is validated with Vue server rendering and hydration. DOM access is guarded in overlay infrastructure, generated IDs are checked for stability, and the SSR audit captures hydration warnings and errors. The same public entrypoints work in SSR applications.

Capacitor and mobile

The components are designed for Vue applications hosted in Capacitor WebViews, including pointer/touch interaction, narrow viewports, portrait and landscape layouts, and safe-area-aware surfaces where applicable. Web build and configuration are validated. Native iOS and Android execution is not claimed because those SDKs are not installed in the package validation environment.

Compatibility

| Technology | Support | | ---------- | -------------------------------------------------------------- | | Vue | ^3.5.0 peer dependency | | TypeScript | Included declarations | | Vite | Validated package and consumer builds | | SSR | Vue server renderer and hydration validated | | Capacitor | WebView/build contract validated | | Nuxt | Repository portal uses Nuxt; package entrypoints are Vue-based | | Node.js | >=20.19.0 <23 |

Versioning

Releases follow Semantic Versioning. Changes are recorded with Changesets, consolidated into the changelog and released through the official main flow. Pin production dependencies to a known version and review release notes before upgrading.

Changelog and releases

• Changelog
• GitHub Releases
• v1.0.0 release

Contributing

Report product or API concerns through GitHub Issues. Contributions use the dev branch and follow AGENTS.md, the canonical design-system skills and required validation commands. Pull requests should explain scope, evidence and public-contract impact.

Security

Please do not disclose a suspected vulnerability in a public issue. Contact repository maintainers privately before disclosure. GitHub's security advisories channel is available when enabled.

License

Released under the MIT License.

About Touchable Technologies

Touchable Technologies maintains this design system as the shared visual and technical foundation for its digital products. It helps product teams ship consistent, accessible and scalable Vue experiences without duplicating component contracts across applications.

Touchable Design System is the official component foundation for the Touchable product ecosystem.