Projects

Design Systems News

Design Systems News is a curated publication dedicated to delivering insightful articles, resources, and updates on design systems. Each issue compiles a selection of relevant content, including in-depth articles, practical guides, and industry news, aimed at enhancing the knowledge and skills of design professionals.

The publication also features contributions from experts who share their experiences and best practices in building and maintaining effective design systems. Additionally, Design Systems News offers access to multimedia resources such as videos and slides from recent conferences, providing a comprehensive platform for staying informed about the latest trends and developments in the field

Mosaic Design System

Mosaic is a design system built around the power and flexibility of web components, ensuring accessibility and usability by including meaningful HTML fallbacks within each component. It combines thoughtfully crafted components, robust design tokens, comprehensive guidelines, and a suite of tools to support scalable and consistent design and development workflows.

The documentation for Mosaic will be built using Eleventy, providing a fast and lightweight static site generator to showcase its features. This approach ensures that developers and designers have access to clear, accessible, and organized resources for implementing and maintaining Mosaic in their projects.

CSS Feature Support

This web application allows users to check the browser support for various CSS features. It provides an easy-to-use form where users can input CSS feature names (e.g., css-grid, :has(), etc.), and the application dynamically checks their support across multiple browsers. The app leverages a fuzzy search for feature names, allowing users to input shorthand, partial names, or more descriptive versions of CSS features to find the right match.

Key Features

• Fuzzy Search: The app allows for flexible searches, enabling users to type abbreviations or shorthand versions (e.g., has, :has()) and still retrieve the correct CSS feature.
• Real-time Error Checking: If a non-existent or invalid feature name is entered, the application provides immediate feedback with a user-friendly error message.
• Browser Support Data: Once valid features are entered, the application fetches and displays browser compatibility data, including desktop and mobile browser support percentages.
• User-friendly Interface: Simple, interactive form inputs with dynamically added or removed fields allow users to check multiple CSS features at once. Error messages for invalid feature names are displayed inline.

This tool is ideal for front-end developers, web designers, or anyone working with CSS who needs quick insights into browser support for various CSS features.

Simple-ish Color Palette Generator

The Simple-ish Color Palette Generator is a lightweight, flexible tool for designers and developers to create accessible color palettes. It allows users to generate dynamic color variations, ensuring WCAG-compliant contrast ratios for readability. Built as a modular, web-based application, it provides an intuitive interface for crafting color systems with ease.

Key Features

• Dynamic Palette Generation
  Input a base color to generate lighter and darker shades with customizable interpolation.

• WCAG Compliance Feedback
  Each color block provides real-time feedback on AA and AAA compliance for text contrast, ensuring accessibility standards are met.

• Modular Architecture
  The application is built using reusable web components, enabling scalability and adaptability for future features.

• Copy-to-Clipboard Functionality
  Export your generated CSS, Sass, or JSON variables with a single click, streamlining integration into your projects.

• Interactive Adjustments
  Fine-tune light and dark percentage sliders post-generation to see immediate updates across the palette, including updated contrast ratios and exportable values.

• Format Flexibility
  Generate palettes in multiple formats, including Hex, RGB, HSL, LCH, OKLCH, and Display-P3, ensuring compatibility with various design and development workflows.

Why This Tool Stands Out

This tool is more than just a color palette generator; it is a thoughtfully designed application that prioritizes usability, accessibility, and modularity. By considering real-world workflows, it offers practical solutions like easy customization, live updates, and standards compliance, making it a versatile addition to any designer or developer's toolkit.

Whether you're crafting a Design System, fine-tuning a brand identity, or simply exploring color possibilities, the Simple-ish Color Palette Generator provides the tools you need with simplicity and precision.