Styling Guide

Overview

Proyecto Renacer uses Tailwind CSS v4 with a custom design system built around the project’s unique color palette and typography. The styling approach combines Tailwind’s utility classes with custom CSS variables defined in the global stylesheet.

Tailwind CSS Configuration

Vite Integration

The project uses Tailwind CSS v4 integrated through Vite for optimal performance:

astro.config.mjs

import { defineConfig } from 'astro/config';
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
});

Dependencies

package.json

{
  "dependencies": {
    "@tailwindcss/vite": "^4.2.1",
    "tailwindcss": "^4.2.1"
  }
}

Tailwind CSS v4 uses a different approach than v3 - configuration is done through CSS using the @theme directive instead of a JavaScript config file.

CSS Structure

Global Stylesheet

All global styles are defined in src/styles/global.css. This file is imported in the main layout component:

src/layouts/Layout.astro

import "../styles/global.css";

Design System

Color Palette

The project uses a carefully selected color scheme that reflects the warmth and growth of the Renacer community:

src/styles/global.css

@theme {
  /* Colores */
  --color-primary: #c87a56;
  --color-secondary: #5a7a5c;
  --color-light: #f8f7f6;
  --color-dark: #1e1714;
}

Primary Color

#c87a56 - Warm terracotta used for primary actions and highlights

Secondary Color

#5a7a5c - Earthy green representing growth and community

Light Background

#f8f7f6 - Soft beige for light mode backgrounds

Dark Background

#1e1714 - Deep brown for dark mode backgrounds

Using Colors in Components

Colors are accessed through Tailwind utility classes:

Example Usage

<button class="bg-primary text-white hover:bg-primary/90">
  Click me
</button>

<div class="bg-secondary/10 text-secondary">
  Secondary accent
</div>

<div class="bg-light dark:bg-dark">
  Adapts to theme
</div>

Typography

The project uses Public Sans as the primary typeface:

src/styles/global.css

@theme {
  --font-display: "Public Sans", "Roboto", sans-serif;
}

The font is loaded from Google Fonts:

src/layouts/Layout.astro

<link
  href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700;800;900&display=swap"
  rel="stylesheet"
/>

Apply it using the font-display utility class:

<body class="font-display">
  <h1 class="text-4xl font-black">Título Principal</h1>
  <p class="text-lg font-medium">Body text</p>
</body>

Border Radius

Custom border radius values for consistent rounded corners:

src/styles/global.css

@theme {
  --radius: 0.25rem;      /* 4px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-full: 9999px;  /* Fully rounded */
}

Dark Mode Implementation

Dark mode is implemented using Tailwind’s dark: variant with automatic color adaptation:

Body Styling

src/layouts/Layout.astro

<body class="bg-light font-display text-slate-900 dark:text-slate-100 dark:bg-dark">
  <slot />
</body>

Component Examples

Text Colors
Backgrounds
Borders

<p class="text-slate-600 dark:text-slate-300">
  This text adapts to the theme
</p>

<h2 class="text-slate-900 dark:text-white">
  High contrast heading
</h2>

<section class="bg-white dark:bg-dark/50">
  Semi-transparent dark mode background
</section>

<div class="bg-light dark:bg-dark/80 border border-primary/20">
  Card with theme-aware styling
</div>

<div class="border-t border-primary/30">
  Subtle border with opacity
</div>

Real Component Examples

Button Component

The Button component demonstrates advanced styling with variants:

src/components/Button.astro

interface Props {
  type: "primary" | "secondary" | "dark" | "light" | "whatsapp" | "facebook";
  link?: string;
  rounded?: "plain" | "lg" | "full" | "pill";
}

const { type = "primary", link, rounded = "lg" } = Astro.props;

const buttonClass = {
  primary: "bg-primary text-white hover:bg-primary/90",
  secondary: "bg-secondary text-white hover:bg-secondary/90",
  dark: "bg-slate-900 dark:bg-slate-700 text-white hover:bg-slate-800",
  light: "bg-white border-2 border-primary/50 text-slate-800 hover:bg-light",
  whatsapp: "bg-emerald-600 text-white hover:bg-emerald-700",
  facebook: "bg-white border-2 border-primary/50 text-slate-800 hover:bg-light",
}[type];

const roundedClass = {
  plain: "rounded-xs",
  lg: "rounded-lg",
  full: "rounded-2xl",
  pill: "rounded-4xl",
}[rounded]
---

<a href={link}>
  <button
    class={buttonClass +
      " px-8 py-4 font-bold text-lg hover:scale-105 transition-transform flex items-center gap-2 " + 
      roundedClass}
  >
    <slot />
  </button>
</a>

Usage:

<Button type="primary" link="/proyecto">
  Solicita información
  <span class="material-symbols-outlined">arrow_forward</span>
</Button>

<Button type="whatsapp" rounded="full" link="https://wa.me/593999730617">
  <span class="material-symbols-outlined">chat</span>
  Contáctanos por WhatsApp
</Button>

Hero Section Styling

Example from the homepage showing gradient text and responsive design:

src/pages/index.astro

<h1 class="text-4xl md:text-6xl font-black leading-[1.1] tracking-tight text-slate-900 dark:text-white">
  Tu casa propia en Ambato
  <span class="text-primary">empieza aquí</span>
</h1>

<p class="text-lg text-slate-600 dark:text-slate-300 max-w-xl">
  Proyecto de Vivienda Social en Ambato con 4 años de historia y
  respaldo de MIDUVI.
</p>

Card with Icon

<div class="w-14 h-14 rounded-xl bg-primary/10 text-primary flex items-center justify-center mb-6">
  <span class="material-symbols-outlined text-3xl">real_estate_agent</span>
</div>

Utility Patterns

Spacing

<!-- Padding -->
<section class="px-4 md:px-20 lg:px-40 py-12 md:py-20">

<!-- Gap -->
<div class="flex flex-col gap-8">

<!-- Space between -->
<div class="flex -space-x-3">

Responsive Design

<!-- Mobile first approach -->
<div class="text-4xl md:text-6xl">

<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">

<!-- Flex direction -->
<div class="flex flex-col lg:flex-row items-center gap-12">

Opacity and Transparency

<!-- Background opacity -->
<div class="bg-primary/10">
<div class="bg-secondary/20">

<!-- Hover states -->
<button class="hover:bg-primary/90">

<!-- Dark mode with opacity -->
<section class="bg-white dark:bg-dark/50">

Icons

The project uses Material Symbols Outlined for all icons:

src/layouts/Layout.astro

<link
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&display=swap"
  rel="stylesheet"
/>

Icon styling:

src/layouts/Layout.astro

.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

Usage in components:

<span class="material-symbols-outlined text-secondary">eco</span>
<span class="material-symbols-outlined text-3xl">groups</span>

Best Practices

Use Semantic Color Names

Use text-primary, bg-secondary instead of hardcoded colors. This maintains consistency and makes theme updates easier.

Mobile-First Responsive Design

Always start with mobile styles and add breakpoints with md:, lg: prefixes:

<div class="text-4xl md:text-6xl">

Dark Mode Considerations

Always test components in both light and dark modes. Use the dark: variant for all color-related utilities:

<p class="text-slate-600 dark:text-slate-300">

Consistent Spacing

Use Tailwind’s spacing scale (4, 8, 12, 16, 20, etc.) for consistency across the design.

Additional Resources

Tailwind CSS v4 Docs

Official Tailwind CSS documentation

Material Symbols

Browse available icons

Astro Styling

Learn about styling in Astro

Public Sans Font

Typography reference

Get Started

Project Structure

Guides

Overview

Tailwind CSS Configuration

Vite Integration

Dependencies

CSS Structure

Global Stylesheet

Design System

Color Palette

Primary Color

Secondary Color

Light Background

Dark Background

Using Colors in Components

Typography

Border Radius

Dark Mode Implementation

Body Styling

Component Examples

Real Component Examples

Button Component

Hero Section Styling

Card with Icon

Utility Patterns

Spacing

Responsive Design

Opacity and Transparency

Icons

Best Practices

Additional Resources

Tailwind CSS v4 Docs

Material Symbols

Astro Styling

Public Sans Font

Build docs developers (and LLMs) love

Get Started

Project Structure

Guides

Documentation Index

​Overview

​Tailwind CSS Configuration

​Vite Integration

​Dependencies

​CSS Structure

​Global Stylesheet

​Design System

​Color Palette

Primary Color

Secondary Color

Light Background

Dark Background

​Using Colors in Components

​Typography

​Border Radius

​Dark Mode Implementation

​Body Styling

​Component Examples

​Real Component Examples

​Button Component

​Hero Section Styling

​Card with Icon

​Utility Patterns

​Spacing

​Responsive Design

​Opacity and Transparency

​Icons

​Best Practices

​Additional Resources

Tailwind CSS v4 Docs

Material Symbols

Astro Styling

Public Sans Font

Build docs developers (and LLMs) love

Overview

Tailwind CSS Configuration

Vite Integration

Dependencies

CSS Structure

Global Stylesheet

Design System

Color Palette

Using Colors in Components

Typography

Border Radius

Dark Mode Implementation

Body Styling

Component Examples

Real Component Examples

Button Component

Hero Section Styling

Card with Icon

Utility Patterns

Spacing

Responsive Design

Opacity and Transparency

Icons

Best Practices

Additional Resources