Design System

Typography

Font Families

Plus Jakarta Sans

Primary sans-serif font for UI and headings

Light: The quick brown fox jumps over the lazy dog

Regular: The quick brown fox jumps over the lazy dog

Medium: The quick brown fox jumps over the lazy dog

Semibold: The quick brown fox jumps over the lazy dog

Bold: The quick brown fox jumps over the lazy dog

IBM Plex Serif

Secondary serif font for accents and quotes

Regular: The quick brown fox jumps over the lazy dog

Semibold: The quick brown fox jumps over the lazy dog

Italic: The quick brown fox jumps over the lazy dog

Type Scale

huge

The quick brown fox

big

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

h4

The quick brown fox

body-large

The quick brown fox

body

The quick brown fox

body-small

The quick brown fox

caption

The quick brown fox

Colors

System Colors

background

var(--background)

foreground

var(--foreground)

accent

var(--accent)

hover

var(--hover)

subtle

var(--subtle)

Accent Colors

teal

var(--teal)

teal-light

var(--teal-light)

teal-dark

var(--teal-dark)

coral

var(--coral)

coral-light

var(--coral-light)

coral-dark

var(--coral-dark)

Color Usage Examples (Teal Primary)

Primary Actions

Text Highlights

Our technical leadership drives transformation.

Achieve impressive results through strategic execution.

Card Examples

Technical Services

Primary card with teal accent

Success Stories

Secondary card with coral accent

Feature Blocks

Technical Excellence

Primary messaging with strong technical focus

Client Success

Highlighting achievements and results

"We transform how companies run and scale their digital products"

— Client Testimonial

Image Usage Examples

Examples of image treatments and layouts across different contexts.

Standard Image

Standard example

Clean, simple presentation for standard content images.

Case Study Hero

Case study hero example

Project Title

Brief project description

Grid Layout

Grid example 1
Grid example 2

Team Member

Team member

Team Member Name

Role / Position

Common Aspect Ratios

16:9 example

16:9 Ratio

4:3 example

4:3 Ratio

1:1 example

1:1 Ratio

Loading States

Simple pulse animation for loading states

Font Usage Example

In-contenxt combination of Serif fonts as accent elements alongside the Sans Serif font Plus Jakarta Sans

IBM Plex Serif

Modern serif with technical character
https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&display=swap

CVPK Digital Studio

Technical leadership for growing digital products

We bridge the gap between strategic vision and technical execution

From our case studies:

A client reduced operational costs by 40% through our partnership.

Regular weight

Semibold weight

Italic style

Theme Comparison

While the site automatically adjusts based on system preferences, here's how both themes look side by side.

Light Theme

Main Heading

Secondary text in accent color

Content area with subtle background

Background

Foreground

Accent

Hover

Subtle

Teal

Coral

Dark Theme

Main Heading

Secondary text in accent color

Content area with subtle background

Background

Foreground

Accent

Hover

Subtle

Teal

Coral