Design System

Renan Crociari Design System

This design system defines the visual language of the project. Always adhere to these tokens and components when creating or modifying UI elements.

1. Design Tokens

Colors

Use CSS variables or their hex values if variables are unavailable in context.

Typography

Fonts

• Display: Degular, sans-serif (--font-display) - Used for Headings
• Paragraph: Source Serif, Georgia, serif (--font-paragraph) - Used for Body text

Scale & Line Height

Helper Classes

• .t-regular: font-weight 400
• .t-semibold: font-weight 600
• .t-bold: font-weight 700
• .t-gray-200: Color Gray 200
• .t-white: Color White
• .t-green-light: Color Green Light

Spacing

Consistent spacing scale for margins and paddings.

• --spacing-xxxs: 4px
• --spacing-xxs: 8px
• --spacing-xs: 16px
• --spacing-md: 24px
• --spacing-lg: 32px
• --spacing-xl: 48px
• --spacing-xxl: 64px
• --spacing-xxxl: 80px
• --spacing-xxxxl: 128px

Border Radius

• --br-xxxs: 4px
• --br-xxs: 8px
• --br-xs: 16px
• --br-md: 24px

2. Components

Buttons (.btn)

Base class .btn creates a flex container with consistent gap.

Variants

• Green Button (.btn-green):
  • Text gradient: #25D16A to #9EE825
  • Hover: Opacity change on text/icon
  • Icon: SVG arrow fills with --typography-green-light
• White Button (.btn-white):
  • White text
  • Icon: White fill
• Gray Button (.btn-gray-200):
  • Dark gray text (#222)

Iconography in Buttons Buttons typically include an SVG arrow.

• Standard: Arrow on right
• Backwards: Add .btn-arrow-left to reverse arrow direction and placement.
• Animation: On hover, arrow translates x-axis by 2px (or -2px for left arrow).

Inputs

• Base Style:
  • Padding: 24px 24px 24px 24px (Right padding 80px for icons)
  • Border: 2px solid #AEB5C7
  • Transition: border 0.4s ease-in-out
• States:
  • Focus: Border color --typography-green-light
  • Invalid: Border color --border-red
  • Placeholder: Color #B6B6B6

Cards (.project-card)

Used for showcasing projects.

• Base: Height 800px, relative positioning, transition 0.6s.
• Content: .project-card-content with significant padding (top 100px).
• Variants:
  • .card-1 to .card-5: Specific background colors and images.
  • Hover: Background color shifts to a darker/richer shade.

Dialog / Modal (.dialog)

• Structure: <dialog class="dialog">
• Styles:
  • Fixed full screen (when open).
  • Background: White.
  • Signature Border: 16px solid with gradient from #C8F686 to #75EF81.
• Animation: Fade in (0.8s).

3. Utility Classes

Margins

Format: .{property}-{size}

• Property: mt (top), mb (bottom), ml (left), mr (right), my (vertical), mx (horizontal).
• Size: matches spacing tokens (xxxs to xxxxl).
• Example: .mt-xl adds 48px top margin.

Paddings

Format: .{property}-{size}

• Property: pt, pb, pl, pr, py, vertical, px (horizontal).
• Size: matches spacing tokens.
• Example: .py-md adds 24px vertical padding.

Layout

• .wrapper: Max-width 1344px, centered, 32px padding on sides.
• .visually-hidden: Standard accessible hiding pattern.

4. Global CSS Reset & Globals

• box-sizing: border-box is applied generally (via normalization).
• body: It has a distinctive 16px solid gradient border acting as a page frame.
• a: Links default to --typography-green-light and have a transparent text-clip hover effect.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.