design systems

Bilingual

Elena, a library for building Progressive Web Components
2 months ago
- Elena is a lightweight library for building Progressive Web Components using HTML and CSS first, with JavaScript for interactivity only.
- It addresses common web component issues like accessibility, SSR limitations, layout shifts, and framework compatibility.
- Elena is designed for teams building design systems and component libraries across multiple frameworks.
- Core features include being extremely lightweight (2.9kB), progressively enhanced, accessible, standards-based, SSR-friendly, and having zero dependencies.
- Elena supports composite, primitive, and declarative component models.
- A quick start guide, live examples, comparisons, FAQ, and playground are available for further exploration.
Progressive Web Components
2 months ago
- Web components face issues like layout shifts, flash of unstyled content, poor SSR support, heavy JavaScript reliance, framework incompatibility, and accessibility challenges.
- Progressive Web Components address these problems by using a two-layer design: a base HTML/CSS layer for immediate rendering and a JavaScript layer for interactivity.
- Elena is a 2.6kB library that enables building Progressive Web Components, focusing on HTML and CSS first with progressive JavaScript enhancement.
- Elena supports SSR by allowing components without render() to be fully SSR-compatible, and components with render() to partially render with optional server-side utilities.
- Key features of Elena include lightweight size, progressive enhancement, semantic accessibility, standards-based architecture, reactive updates, scoped styles, SSR support, zero dependencies, and zero framework lock-in.
- The library includes packages like @elenajs/core, @elenajs/bundler, @elenajs/cli, @elenajs/ssr, and @elenajs/mcp for building and managing web component libraries.
- Elena's v1.0.0-rc.7 is released with features for product teams, such as batched reactive re-renders and clean CSS encapsulation.
Capra, Cribl's Design System
2 months ago
- Startups often rely on third-party UI libraries for quick development, but this can lead to issues like constant style overrides, misaligned design, and accessibility problems as the product evolves.
- Cribl faced significant frontend challenges, including visual divergence, brittle code from overrides, and accessibility failures, prompting them to build their own design system called Capra.
- A design system is more than UI components; it includes design standards (like design tokens), a frontend component library, and a commitment to accessibility, which is crucial in the era of agentic programming.
- Cribl's Platform UI team partnered with Design to refresh UX, create new design tokens using the Design Token Community Group spec, and chose React Aria Components as a foundation for its accessibility and unstyled approach.
- The design system documentation was made accessible to both humans via Storybook and LLMs via Markdown conversion, ensuring ease of use for all.
- Rollout of Capra is ongoing, with over 25% migration progress; lessons learned include balancing final component states with pragmatic adoption to ease the transition for engineers.
- Capra is now publicly available on NPM for Cribl Apps customers, and future plans include expanding base components and supporting higher-level ones to improve consistency and code health.
Design Systems as Knowledge Graphs
2 months ago
- The traditional design system documentation resembles linear product docs but could be more effective as small, addressable chunks.
- Design systems are hyperobjects akin to knowledge graphs, capturing decisions, patterns, and history, rather than just products or libraries.
- Knowledge graphs interlink entity descriptions with semantic metadata, enabling data integration and sharing, as seen in tools like Roam Research and Obsidian.
- Transclusion allows embedding minimal content chunks (e.g., tokens, components) across contexts, ensuring updates propagate and revealing system relationships.
- Bidirectional links make dependencies (e.g., between Button and Icon) visible from both sides, aiding navigation and visualization, similar to features in knowledge graph apps.
- Fragments (like Wikipedia's red links) represent undefined future elements in design systems, encouraging contribution by highlighting gaps.
- Queries enable users to ask questions of the design system (e.g., via GraphQL APIs) for immediate answers, moving beyond browsing to interactive exploration.
- Applying knowledge graph concepts can transform design system docs into collaborative, remixable tools that scale knowledge across large teams.

design systems

Elena, a library for building Progressive Web Components

Progressive Web Components

Capra, Cribl's Design System

Design Systems as Knowledge Graphs