CSS Styling

Overview

The stylesheet uses CSS custom properties, BEM naming conventions, and a mobile-first responsive approach. The design system includes a comprehensive color palette, typography scale, and spacing system.

CSS Custom Properties

All design tokens are defined as CSS variables in the :root selector for consistent theming.

Color Variables
Spacing System

:root {
  --white: hsl(0, 100%, 100%);
  --black: hsl(0, 0%, 0%);

  --navy-200: hsl(236, 100%, 87%);
  --navy-800: hsl(235, 41%, 34%);
  --navy-900: hsl(235, 46%, 20%);
  --navy-950: hsl(226, 43%, 10%);

  --orange: hsl(15, 100%, 70%);

  --purple-500: hsl(235, 45%, 61%);
  --purple-600: hsl(246, 80%, 60%);
  --purple-700: hsl(264, 64%, 52%);

  --blue: hsl(195, 74%, 62%);

  --pink: hsl(348, 100%, 68%);

  --green: hsl(145, 58%, 55%);

  --yellow: hsl(43, 84%, 65%);

  --grey: hsl(0, 0%, 85%);
}

Reference: styles.css:25-48

:root {
  --spacing-100: 0.8rem;
  --spacing-200: 1.6rem;
  --spacing-300: 2.4rem;
  --spacing-400: 3.2rem;
  --spacing-500: 4.0rem;
}

The spacing scale follows an 8-point grid system (0.8rem increments).Reference: styles.css:50-55

Color Palette

The dashboard uses a vibrant color scheme with navy blues as the base and bright accent colors for activity categories.

Navy Shades

Variable	HSL Value	Usage
`--navy-200`	hsl(236, 100%, 87%)	Light text on dark backgrounds
`--navy-800`	hsl(235, 41%, 34%)	Hover state for cards
`--navy-900`	hsl(235, 46%, 20%)	Card backgrounds
`--navy-950`	hsl(226, 43%, 10%)	Body background

Reference: styles.css:29-32

Activity Category Colors

Category	Variable	HSL Value
Work	`--orange`	hsl(15, 100%, 70%)
Play	`--blue`	hsl(195, 74%, 62%)
Study	`--pink`	hsl(348, 100%, 68%)
Exercise	`--green`	hsl(145, 58%, 55%)
Social	`--purple-700`	hsl(264, 64%, 52%)
Self Care	`--yellow`	hsl(43, 84%, 65%)

Reference: styles.css:34, 40, 42, 44, 46

Purple Shades

Variable	Usage
`--purple-500`	Button default state
`--purple-600`	Profile card background
`--purple-700`	Social activity background

Reference: styles.css:36-38

Typography System

The project uses the Rubik font family with three weights: Light (300), Regular (400), and Medium (500).

Font Face Declarations

@font-face {
    font-family: 'Rubik';
    src: url('../assets/fonts/Rubik-Light.woff2') format('woff2');
    font-weight: 300;
}

@font-face {
    font-family: 'Rubik';
    src: url('../assets/fonts/Rubik-Regular.woff2') format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'Rubik';
    src: url('../assets/fonts/Rubik-Medium.woff2') format('woff2');
    font-weight: 500;
}

Reference: styles.css:4-20

Typography Utility Classes

Large Text Styles (p1-p4)

.text--p1 {
    font-family: 'Rubik', sans-serif;
    font-size: 5.6rem;
    line-height: 6.6rem;
    font-weight: 300;
}

.text--p2 {
    font-family: 'Rubik', sans-serif;
    font-size: 4.0rem;
    line-height: 4.7rem;
    font-weight: 300;
}

.text--p3 {
    font-family: 'Rubik', sans-serif;
    font-size: 3.2rem;
    line-height: 3.8rem;
    font-weight: 300;
}

.text--p4 {
    font-family: 'Rubik', sans-serif;
    font-size: 2.4rem;
    line-height: 2.8rem;
    font-weight: 300;
}

Reference: styles.css:125-151

Medium Text Styles (p5)

.text--p5-regular {
    font-family: 'Rubik', sans-serif;
    font-size: 1.8rem;
    line-height: 2.1rem;
    font-weight: 400;
}

.text--p5-medium {
    font-family: 'Rubik', sans-serif;
    font-size: 1.8rem;
    line-height: 2.1rem;
    font-weight: 500;
}

Used for buttons and activity category headings.Reference: styles.css:153-165

Small Text Style (p6)

.text--p6 {
    font-family: 'Rubik', sans-serif;
    font-size: 1.5rem;
    line-height: 1.8rem;
    font-weight: 400;
}

Used for labels and previous period information.Reference: styles.css:167-172

Font Size Scale

Class	Font Size	Line Height	Weight	Usage
`.text--p1`	5.6rem (56px)	6.6rem	300	Large headings (desktop)
`.text--p2`	4.0rem (40px)	4.7rem	300	User name (desktop)
`.text--p3`	3.2rem (32px)	3.8rem	300	Activity hours
`.text--p4`	2.4rem (24px)	2.8rem	300	User name (mobile)
`.text--p5-regular`	1.8rem (18px)	2.1rem	400	Buttons
`.text--p5-medium`	1.8rem (18px)	2.1rem	500	Activity titles
`.text--p6`	1.5rem (15px)	1.8rem	400	Labels, secondary text

Note: The project uses font-size: 62.5% on the html element, making 1rem = 10px. Reference: styles.css:118-120

Grid Layouts

Mobile Layout (Default)

.dashboard {
  display: grid;
  gap: var(--spacing-300);
  width: 87%;
  max-width: 45.0rem;
}

Single column layout with 2.4rem gap between cards. Reference: styles.css:187-192

Tablet Layout (768px+)

@media (min-width: 768px) {
  .dashboard {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    max-width: 61.2rem;
  }

  .profile-card {
    grid-column: 1 / 4;
  }
}

3-column grid with profile card spanning all columns. Reference: styles.css:374-382

Desktop Layout (1440px+)

@media (min-width: 1440px) {
  .dashboard {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    max-width: 111.6rem;
  }
  
  .profile-card {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }
}

4-column grid with profile card spanning two rows in the first column. Reference: styles.css:412-421

Card Styling

Base Styles
Profile Picture
Buttons

.profile-card {
  background-color: var(--navy-900);
  border-radius: 1.5rem;
}

.profile-card__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300);
}

.profile-card__info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-300);
  padding: var(--spacing-400);
  background-color: var(--purple-600);
  border-radius: 1.5rem;
}

Reference: styles.css:194-213

.profile-card__picture{
  width: 6.4rem;
  height: 6.4rem;
  border: 3px solid var(--white);
  border-radius: 50%;
}

Circular profile image with white border.Reference: styles.css:215-220

.profile-card__option {
  border: none;
  padding: 0;
  color: var(--purple-500);
  background-color: transparent;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}

.profile-card__option--active,
.profile-card__option:hover {
  color: var(--white);
}

Buttons transition to white on hover or when active.Reference: styles.css:245-257

Activity Cards

Base Structure
Hover Effect
Category Colors

.activity-card {
  position: relative;
  overflow: hidden;
  padding-top: 4.5rem;
  border-radius: 1.5rem;
}

.activity-card__picture {
  position: absolute;
  top: -1rem;
  right: 1.5rem;
}

.activity-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-100);
  position: relative;
  z-index: 1;
  padding: var(--spacing-300);
  background-color: var(--navy-900);
  border-radius: 1.5rem;
  transition: background-color .2s ease-in;
}

Reference: styles.css:259-282

.activity-card__info:hover {
  background-color: var(--navy-800);
}

Cards lighten on hover for visual feedback.Reference: styles.css:284-286

.activity-card--work {
  background-color: var(--orange);
}

.activity-card--play {
  background-color: var(--blue);
}

.activity-card--study {
  background-color: var(--pink);
}

.activity-card--exercise {
  background-color: var(--green);
}

.activity-card--social {
  background-color: var(--purple-700);
}

.activity-card--self-care {
  background-color: var(--yellow);
}

Each category has a unique background color visible behind the card info.Reference: styles.css:312-356

Spacing System

The design uses a consistent spacing scale applied through CSS custom properties:

.dashboard {
  gap: var(--spacing-300);  /* 2.4rem */
}

.profile-card__info {
  padding: var(--spacing-400);  /* 3.2rem */
}

.activity-card__info {
  padding: var(--spacing-300);  /* 2.4rem */
  gap: var(--spacing-100);      /* 0.8rem */
}

Reference: styles.css:189, 210, 278, 275

Responsive Design Breakpoints

Tablet Breakpoint (768px)

@media (min-width: 768px) {
  .dashboard {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    max-width: 61.2rem;
  }

  .activity-card__time {
    flex-direction: column;
    gap: var(--spacing-100);
  }

  .activity-card__hours {
    font-size: 5.6rem;
    line-height: 6.6rem;
    font-weight: 300;
  }
}

At tablet size, activity time display switches from horizontal to vertical layout, and hours increase in size. Reference: styles.css:368-407

Desktop Breakpoint (1440px)

@media (min-width: 1440px) {
  .dashboard {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    max-width: 111.6rem;
  }
  
  .profile-card {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }

  .profile-card__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem;
  }

  .profile-card__picture {
    width: 7.8rem;
    height: 7.8rem;
  }

  .profile-card__name {
    font-size: 4.0rem;
    line-height: 4.7rem;
  }

  .profile-card__options {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.1rem;
    padding: 0 3.2rem;
    height: 10.6rem;
  }
}

Desktop layout transforms profile card to vertical orientation with larger profile image and text. Reference: styles.css:411-446

CSS Reset

The stylesheet includes a modern CSS reset for consistent cross-browser rendering:

View CSS Reset

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* 10. Create a root stacking context */
#root, #__next {
  isolation: isolate;
}

/* 11. 10 pixels = 1rem */
html {
  font-size: 62.5%;
}

Reference: styles.css:58-120

Base Body Styles

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 8rem 0;
  background-color: var(--navy-950);
  color: var(--white);
}

The body uses flexbox to center the dashboard and sets the dark background with white text. Reference: styles.css:177-185

Get Started

Features

Implementation

Customization

Overview

CSS Custom Properties

Color Palette

Navy Shades

Activity Category Colors

Purple Shades

Typography System

Font Face Declarations

Typography Utility Classes

Font Size Scale

Grid Layouts

Mobile Layout (Default)

Tablet Layout (768px+)

Desktop Layout (1440px+)

Card Styling

Profile Card

Activity Cards

Spacing System

Responsive Design Breakpoints

Tablet Breakpoint (768px)

Desktop Breakpoint (1440px)

CSS Reset

Base Body Styles

Get Started

Features

Implementation

Customization

Documentation Index

​Overview

​CSS Custom Properties

​Color Palette

​Navy Shades

​Activity Category Colors

​Purple Shades

​Typography System

​Font Face Declarations

​Typography Utility Classes

​Font Size Scale

​Grid Layouts

​Mobile Layout (Default)

​Tablet Layout (768px+)

​Desktop Layout (1440px+)

​Card Styling

​Profile Card

​Activity Cards

​Spacing System

​Responsive Design Breakpoints

​Tablet Breakpoint (768px)

​Desktop Breakpoint (1440px)

​CSS Reset

​Base Body Styles

Overview

CSS Custom Properties

Color Palette

Navy Shades

Activity Category Colors

Purple Shades

Typography System

Font Face Declarations

Typography Utility Classes

Font Size Scale

Grid Layouts

Mobile Layout (Default)

Tablet Layout (768px+)

Desktop Layout (1440px+)

Card Styling

Profile Card

Activity Cards

Spacing System

Responsive Design Breakpoints

Tablet Breakpoint (768px)

Desktop Breakpoint (1440px)

CSS Reset

Base Body Styles