A design system is a collection of reusable components and assets, guided by clear standards of use. It provides resources, guidelines, and a shared language for anyone involved in designing and building a product or brand. Within a design system, you can find both a style guide and a pattern library.
Seneca Harper personal website
- Typography: The site uses a clean, modern typography system with a primary sans-serif font for headings and a serif font for body text. They are well-balanced and create a consistent hierarchy.
- Color Palette: The color palette is quite minimal, primarily using a neutral grayscale with accents of a deep navy blue. This palette helps create a calm and focused atmosphere.
- Interaction and Animations: hover effects, smooth transitions and parallax scrolling made in one style and added a sense of interactivity.
Holland America Line
- Typography: A good combination of a sans-serif font for headings and a more traditional serif font for body copy. The font sizes, weights, and spacing create a clear hierarchy and readability.
- Color Palette: The color palette is primarily based on the Holland America brand colors – navy blue and various shades of blue and gray. These colors are used consistently across the website.
- Accessibility: As Seneca mentioned their design system have been developed with accessibility standards, with appropriate color contrasts, clear labeling, and keyboard navigation support.
IBM Carbon Design System
Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.
- Interactions and Animations: hover effects, transitions, and micro-interactions provide responsive user experience.
- Typography: The site utilizes the IBM Plex family of fonts, including IBM Plex Sans and IBM Plex Serif, for headings, body text, and UI elements.
- Color Palette: The color palette is centered around IBM’s blue shades, complemented by a neutral grayscale and accents of green, red, and other supporting colors. The color usage aligns with the Carbon color guidelines.