What problem does it solve?
This Skill provides a curated set of humanist fonts and design tokens to create warm, approachable, and highly readable user interfaces, especially for sectors like healthcare, education, and government.
Core Features & Use Cases
- Font Selection: Offers a selection of humanist sans-serif fonts (Source Sans Pro, Lato, Open Sans, Noto Sans) with clear guidance on pairings and use cases.
- Design Tokens: Provides pre-defined typography scales, weights, and accessibility settings for consistent UI implementation.
- Component Examples: Includes ready-to-use React Native components (Text, FormField, InfoCard) demonstrating how to integrate the typography.
- Accessibility Focus: Emphasizes accessible design practices with font scaling, contrast checks, and recommended line lengths.
- Use Case: Implement a new healthcare app's UI, ensuring all text is clear, legible, and conveys a sense of trust and warmth using the recommended Source Sans Pro pairings and accessible design tokens.
Quick Start
Apply the humanist-warm typography to your React Native project by installing the necessary expo-font packages and loading the fonts in your app's layout.