Back to Homepage
Website Style Guide
A visual reference for the color palette, typography, and common UI elements that define the YGDesign aesthetic. Toggle between light and dark themes to see how styles adapt.

Color Palette

The core color variables that define the light and dark themes. Swatches dynamically update with theme changes.

hsl(var(--background))

Background

--background

Main page background.

hsl(var(--foreground))

Foreground

--foreground

Primary text color.

hsl(var(--card))

Card

--card

Card component background.

hsl(var(--card-foreground))

Card Foreground

--card-foreground

Text color for cards.

hsl(var(--popover))

Popover

--popover

Popover component background.

hsl(var(--popover-foreground))

Popover Foreground

--popover-foreground

Text color for popovers.

hsl(var(--primary))

Primary

--primary

Main interactive color.

hsl(var(--primary-foreground))

Primary Foreground

--primary-foreground

Text on primary backgrounds.

hsl(var(--secondary))

Secondary

--secondary

Secondary elements/backgrounds.

hsl(var(--secondary-foreground))

Secondary Foreground

--secondary-foreground

Text on secondary backgrounds.

hsl(var(--muted))

Muted

--muted

Muted backgrounds/elements.

hsl(var(--muted-foreground))

Muted Foreground

--muted-foreground

Muted text color.

hsl(var(--accent))

Accent

--accent

Accent color for highlights.

hsl(var(--accent-foreground))

Accent Foreground

--accent-foreground

Text on accent backgrounds.

hsl(var(--destructive))

Destructive

--destructive

Error/destructive actions.

hsl(var(--destructive-foreground))

Destructive Foreground

--destructive-foreground

Text on destructive backgrounds.

hsl(var(--border))

Border

--border

Default border color.

hsl(var(--input))

Input

--input

Input field border/background.

hsl(var(--ring))

Ring

--ring

Focus ring color.

Chart Colors

hsl(var(--chart-1))

Chart 1

--chart-1

Chart color 1

hsl(var(--chart-2))

Chart 2

--chart-2

Chart color 2

hsl(var(--chart-3))

Chart 3

--chart-3

Chart color 3

hsl(var(--chart-4))

Chart 4

--chart-4

Chart color 4

hsl(var(--chart-5))

Chart 5

--chart-5

Chart color 5

Typography

Headings (Roboto Flex - `font-sans`)

H1: The Quick Brown Fox

H2: Jumps Over The Lazy Dog

H3: A Symphony of Styles

H4: Exploring Typographic Nuances

H5: Detail and Precision
H6: Subtle Elegance
Body Text (Roboto Flex - `font-sans`)

This is a standard paragraph, demonstrating the default body text style. It uses Roboto Flex for optimal readability and a modern feel. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This text is strong (bolded). This text is emphasized (italic).And here is a sample link to demonstrate hyperlink styling.

This is a blockquote. It's typically used for highlighting a significant passage, a direct quote, or an important note. The styling should make it distinct yet harmonious with the surrounding content.
  • List item one, showcasing an unordered list.
  • List item two, with some more text.
    • Nested list item 2.1.
    • Nested list item 2.2.
  • List item three.
  1. Ordered list item one.
  2. Ordered list item two.
  3. Ordered list item three.
Monospace (Roboto Mono)

This text employs Roboto Mono. Ideal for `code snippets`, technical labels, or any content requiring a fixed-width typeface.
Example: `console.log("Hello, Mono!");`

Serif (Roboto Serif)

Roboto Serif offers a classic, more formal appearance. It can be suitable for extended reading or when a traditional typographic feel is desired.

Slab (Roboto Slab - Bold)

Roboto Slab (font-weight: 700) brings a strong, contemporary, and impactful character, excellent for bold headlines or display text.

Interactive Elements

Buttons
Alerts

Border Radii

Radius Examples
Visualizing the `--radius` variable and its derivatives.
Small (sm)

rounded-sm

(calc(var(--radius) - 4px))

Default (md)

rounded-md

(calc(var(--radius) - 2px))

Large (lg)

rounded-lg

(var(--radius))

Full

rounded-full

(9999px)