Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Niurka77/tf-app/llms.txt

Use this file to discover all available pages before exploring further.

TF-App’s visual identity is defined by four collaborating layers: Tailwind CSS utility classes set the color palette and spacing, CSS custom properties and scoped <style> blocks control structural elements like wave containers, Google Fonts supplies the typeface, and inline SVG <linearGradient> definitions drive the branded wave decorations. Because none of these layers depend on a compiled design token system, rebranding the app is a matter of targeted find-and-replace across the view files — no build configuration changes required.

​
Color Scheme

The current palette is built on Tailwind’s green scale. Every interactive surface — input backgrounds, icon colors, buttons, and the modal’s heading — uses a shade from green-100 through green-700. To rebrand to a different hue, replace the Tailwind color tokens across all HTML view files: 
bg-green-100   →  bg-blue-100    (input field backgrounds)
text-green-700 →  text-blue-700  (icon colors, labels, links)
bg-green-700   →  bg-blue-700    (primary buttons, modal heading)
placeholder-green-400 → placeholder-blue-400  (input placeholder text)
text-green-800 →  text-blue-800  (input typed text)
The SVG wave gradients are not driven by Tailwind — they use literal hex values inside the <linearGradient> elements. Update those in tandem: 
stop-color="#22C55E"  →  stop-color="#3B82F6"   (primary gradient stop)
stop-color="#16A34A"  →  stop-color="#1D4ED8"   (primary gradient end)
stop-color="#4ADE80"  →  stop-color="#60A5FA"   (secondary gradient stop)
stop-color="#15803D"  →  stop-color="#1E40AF"   (secondary gradient end)
Run a find-and-replace across dist/index.html, dist/dashboard.html, and dist/cargando.html to apply the change everywhere at once. Note that the files under src/views/ are currently empty placeholders — all active view content lives in dist/.
TF-App loads Tailwind from the CDN script (cdn.tailwindcss.com), which includes every utility class and does not tree-shake unused styles. For production, consider switching to the Tailwind PostCSS plugin, which generates a minimal CSS file containing only the classes your views actually use — significantly reducing the CSS payload on mobile connections.
The company logo is a PNG image referenced in dist/index.html. After a Vite build the path is hashed (e.g., /assets/logo-tf-LZ8NebR2.png), but in the source files it lives in src/assets/: 
<img
  src="/assets/logo-tf-LZ8NebR2.png"
  alt="Logo de la empresa logo-tf"
  class="h-48 w-auto object-contain"
  onerror="this.onerror=null; this.src='https://placehold.co/300x150/E0F2F7/000000?text=logo-tf';"
/>
To replace it with your own brand mark:
  1. Export your logo as a PNG or SVG. For best results on high-density Android screens, use a PNG at 2× or 3× the intended display size.
  2. Place the file in src/assets/ so Vite includes it in the build output with a hashed filename.
  3. Update the src attribute in each view’s source file before rebuilding:
<!-- PNG replacement -->
<img src="/src/assets/your-brand-logo.png" alt="Your Brand" class="h-48 w-auto object-contain" />

<!-- SVG replacement -->
<img src="/src/assets/your-brand-logo.svg" alt="Your Brand" class="h-48 w-auto object-contain" />
The onerror fallback on the existing <img> element loads a placeholder image from placehold.co if the file is missing — remove that attribute once your logo file is in place to avoid any unintended fallback in production.

​
Typography

TF-App uses Montserrat at weights 500 and 700. To swap it for a different Google Font, replace the <link> tag in the <head> of each view and update the font-family declaration in the view’s <style> block. For example, to use Inter: 
<!-- Replace in <head> of each view: -->
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap"
  rel="stylesheet"
/>

body {
  font-family: "Inter", sans-serif;
}
Browse available fonts at fonts.google.com. When selecting weights, note that TF-App uses font-bold (700) for headings and button labels, and font-semibold (600) for secondary text — ensure your chosen font includes those weights to avoid synthetic bolding.

​
Wave Decorations

The top and bottom wave bands are inline SVGs whose shape and color are fully defined within the markup. The gradient is set inside a <defs> block at the bottom of each SVG element: 
<defs>
  <linearGradient id="paint0_linear" x1="720" y1="0" x2="720" y2="112" gradientUnits="userSpaceOnUse">
    <stop stop-color="#22C55E" />
    <stop offset="1" stop-color="#16A34A" />
  </linearGradient>
  <linearGradient id="paint1_linear" x1="720" y1="16" x2="720" y2="112" gradientUnits="userSpaceOnUse">
    <stop stop-color="#4ADE80" />
    <stop offset="1" stop-color="#15803D" />
  </linearGradient>
</defs>
To change the wave color, replace the stop-color hex values with your brand colors. For example, a blue gradient: 
<defs>
  <linearGradient id="paint0_linear" x1="720" y1="0" x2="720" y2="112" gradientUnits="userSpaceOnUse">
    <stop stop-color="#3B82F6" />
    <stop offset="1" stop-color="#1D4ED8" />
  </linearGradient>
  <linearGradient id="paint1_linear" x1="720" y1="16" x2="720" y2="112" gradientUnits="userSpaceOnUse">
    <stop stop-color="#60A5FA" />
    <stop offset="1" stop-color="#1E40AF" />
  </linearGradient>
</defs>
Each view contains two SVG elements (top and bottom wave) each with their own <defs> — update all four gradient blocks per view. The wave height is controlled by the .wave-container-top / .wave-container-bottom CSS classes (currently height: 112px). Adjust that value in the view’s <style> block to make the bands taller or shorter.

​
Splash Screen Branding

The splash screen that appears while Capacitor initializes is configured separately from the web views. See the Splash Screen configuration guide for full setup instructions. Key customization points:
  • capacitor.config.json — Set backgroundColor and webLinearGradient inside the SplashScreen plugin block to control the background shown before the WebView renders. The current project configuration uses a blue background (#1E88E5); replace that value with your brand color: 
    {
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 2000,
      "backgroundColor": "#1E88E5",
      "androidScaleType": "CENTER",
      "showSpinner": false,
      "splashFullScreen": true,
      "splashImmersive": true
    }
  }
}
  • Drawable resources — Replace the splash image files in the Android resource directories with your branded artwork. Provide one file per density bucket: 
    android/app/src/main/res/drawable/splash.png       (baseline)
android/app/src/main/res/drawable-hdpi/splash.png
android/app/src/main/res/drawable-xhdpi/splash.png
android/app/src/main/res/drawable-xxhdpi/splash.png
android/app/src/main/res/drawable-xxxhdpi/splash.png

​
App Name and ID

The application name and bundle identifier are set in two places. capacitor.config.json at the project root: 
{
  "appId": "com.yourcompany.yourapp",
  "appName": "Your App Name",
  "webDir": "dist"
}
appId must be a reverse-domain identifier unique to your app on the Google Play Store. appName is the label shown on the Android home screen. android/app/src/main/res/values/strings.xml — Android reads the display name from this file at build time. Update app_name to match: 
<resources>
  <string name="app_name">Your App Name</string>
  <string name="title_activity_main">Your App Name</string>
  <string name="package_name">com.yourcompany.yourapp</string>
  <string name="custom_url_scheme">com.yourcompany.yourapp</string>
</resources>
After changing the appId, run npx cap sync android to propagate the new identifier into the Android project files.
If TF-App’s design requirements grow beyond a handful of color swaps, consider adding a tailwind.config.js file and installing Tailwind as a PostCSS plugin. You can define a custom theme.extend.colors block with your brand palette tokens (e.g., brand-primary, brand-accent) and reference those tokens throughout your views instead of Tailwind’s default color names — making future rebrands a one-file change.

Build docs developers (and LLMs) love

Get started for freeTalk to us