TK Logo

Typography

Headings - 2rem/32px

The quick brown fox

Navigation - 0.875rem/14px

The quick brown fox

Body - 1rem/16px

The quick brown fox jumps over the lazy dog.

Regular

The quick brown fox

Active/Selected

The quick brown fox

Color Palette

White

#FFFFFF

Black

#000000

Gray 200

#E5E7EB

Gray 100

#F3F4F6

Layout Patterns

Grid Layout

Left Column
Meta Info
Main Content Area

Navigation

menu item active item

Footer

Contact Information Additional Details
Brand Name
Link 1 Link 2

Card Patterns

Standard Project Cards - 3 Column Grid

Example Project

Example Project Title

Example project description

Example Project

Example Project Title

Example project description

Example Project

Example Project Title

Example project description

Split Content Cards - Full Width

Example Split Card

Example description for split content card layout.

Learn more
Example Split Card

Usage:
- Standard cards for grid layouts and collections
- Split cards for featured content and highlights
- Both patterns are fully responsive

Content Patterns

Text Styles

Regular paragraph text

Secondary text in gray

Interactive text with underline

Form Elements