UI Components

​

Styling Guidelines

​

Card Components

​

Standard Card

<Card title="Card Title" icon="icon-name" href="/link">
  Card content goes here.
</Card>

​

Styled Card with Custom Background

<Card
  title="Styled Card"
  icon="icon-name"
  href="/link"
  style={{
    background: "linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)",
    border: "1px solid #72D400",
    borderRadius: "0.75rem",
  }}
>
  Card with custom styling.
</Card>

​

Card with Hover Effects

<Card
  title="Interactive Card"
  icon="icon-name"
  href="/link"
  style={{
    transition: "transform 0.2s ease-in-out",
    ":hover": { transform: "translateY(-4px)" },
  }}
>
  Card with hover animation.
</Card>

​

Callout Boxes

​

Primary Callout

​

Light Callout

​

Success Callout

​

Warning Callout

​

Error Callout

​

Button Styles

​

Primary Button

​

Secondary Button

​

Light Button

​

Gradient Backgrounds

​

Primary Gradient

​

Light Gradient

​

Subtle Gradient

​

Feature Lists

​

Bullet Points with Icons

• ✓ Feature item with icon
• ✓ Another feature item
• ✓ Third feature item

​

Code Styling

​

Inline Code

​

Code Blocks

// Example code block
function example() {
  console.log("Hello, Tenantum!");
}

​

Responsive Design

​

Mobile-First Approach

​

Color Palette

​

Primary Colors

• Primary Green: #72D400
• Primary Dark: #5AB800 (for gradients and hover states)
• Text Primary: #374151
• Text Secondary: #6c757d

​

Background Colors

• Background Light: #ffffff
• Background Gray: #f8f9fa
• Border Light: #e9ecef

​

Accent Colors (for specific use cases only)

• Success Green: #4caf50 (for success states)
• Warning Orange: #ff9800 (for warnings)
• Error Pink: #e91e63 (for errors)

​

Light Mode Only

​

Benefits of Light Mode Only:

• Consistent Branding: Maintains your green (#72D400) brand color visibility
• Better Readability: High contrast text on light backgrounds
• Simplified Maintenance: No need to maintain dark mode styles
• Professional Appearance: Clean, modern look that matches your brand