Colors

The CCSync color system includes primary brand colors and supporting colors.

Primary
$primary-ccsync

Primary Dark
$primary-ccsync-dark

Primary Light
$primary-ccsync-light

Dark
$dark

Success
$success

Danger
$danger

Warning
$warning

Info
$info

Typography

CCSync uses a consistent typography system based on the Inter font family.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget felis eget urna mollis pretium.

This is a lead paragraph, used for introductory text or important messages.

This is small text, used for captions or less important information.

Primary text color

Muted text color

Bold text

Semibold text

Medium weight text

Normal weight text

Spacing

CCSync uses a consistent spacing system with increments based on a 1rem (16px) base.

Spacing 1 (0.25rem / 4px)

Spacing 2 (0.5rem / 8px)

Spacing 3 (1rem / 16px)

Spacing 4 (1.5rem / 24px)

Spacing 5 (3rem / 48px)

Buttons

CCSync provides various button styles for different purposes.

Button Variants

Button Sizes

Icon Buttons

Forms

Consistent form styling for user input.

Cards

Card components for displaying content in containers.

Standard Card

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Last updated 3 mins ago

Elevated Card

This card has enhanced elevation with a stronger shadow effect.

Learn more

Primary Card

This card has a primary color accent on the top border.

Explore

Responsive Layout

Examples of responsive design patterns.

Responsive Grid

Column 1

Column 2

Column 3

Column 4

Responsive Visibility

Visible only on mobile (xs, sm)

Visible only on medium screens (md)

Visible only on large screens (lg and up)