Our color system uses two layers: primitive tokens define the raw palette, while semantic tokens assign meaning and purpose to each color. This separation makes the system flexible and maintainable.
Raw color values that form the foundation of our palette. Referenced by semantic tokens.
Purpose-driven tokens that reference primitives. Use these in components for consistent, themeable styling.
Poppins is our sole typeface, used across all text elements. Our type system defines consistent sizes, weights, and line heights through design tokens.
An 8-point spacing scale provides consistent rhythm across all components and layouts. Container widths and grid patterns create flexible, responsive page structures.
Responsive grid layouts using CSS Grid. Columns stack on smaller breakpoints.
Reusable UI components form the building blocks of every page. Each component is documented with its variants, states, and usage guidelines to ensure consistency across the site.
Buttons drive user actions throughout the site. Three variants serve different levels of visual emphasis: Primary for main actions, Secondary for supporting actions, and Ghost for tertiary or inline actions.
Classes: button-primary, button-secondary, button-ghost. Apply hover and pressed states via pseudo-classes. Use disabled attribute for inactive state.
Cards display content in a contained, scannable format. Three variants handle different content densities: Default for standard content, Featured for highlighted items, and Compact for lists and grids.
Research-backed support groups led by trained facilitators.
A highlighted content piece with emphasis styling.
A compact card for dense grid layouts.
Classes: card, card-image, card-content, card-title, card-cta. Use combo classes card--featured and card--compact for variants.
Sections define the vertical rhythm of each page. Three variants control visual tone: Default for standard content areas, Hero for prominent introductions, and Alt (Dark) for contrast and emphasis.
White background, standard padding
Warm tint, extra padding
Dark background, light text
Classes: section, section-hero, section-alt. Sections always contain a container child for content width control.
Call-to-action blocks prompt visitors toward key conversions. Two patterns cover the primary use cases: Donation CTAs for fundraising and Newsletter CTAs for email capture.
Your gift brings preventative mental health programs to the infertility community.
Classes: cta-block, cta-block--donate, cta-block--newsletter. Each CTA contains a heading, supporting text, and a primary button.
© 2025 | Uniquely Knitted INC. is a registered 501(c)(3) nonprofit organization in the United States of America. All Rights Reserved. Information on this site is for educational and supportive purposes only and is not intended to diagnose or treat any medical or mental health conditions. Uniquely Knitted provides evidence-based, preventative mental health programs to support people navigating infertility.
