# Baubap — Design System
> A Mexican fintech platform offering fast, accessible micro-loans via mobile app without credit bureau checks.
- **Canonical:** https://uiuxskills.com/library/baubap
- **Source:** https://www.baubap.com/
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-19T19:15:10.465Z

---

---
version: alpha
name: Baubap
description: >-
  A Mexican fintech platform offering fast, accessible micro-loans via mobile app without credit
  bureau checks.
tone: Modern, empathetic, transparent, and encouraging.
color-scheme: light
colors:
  primary: "#975CFF"
  secondary: "#404164"
  surface: "#FFFFFF"
  surface-container: "#F2F2F8"
  on-primary: "#FFFFFF"
  on-surface: "#333333"
  error: "#FF6347"
  outline: "#EAEAF0"
  focus-ring: "#975CFF"
  success: "#28A745"
typography:
  display-lg:
    fontFamily: Onest
    fontSize: 42px
    fontWeight: 700
  display-md:
    fontFamily: Onest
    fontSize: 32px
    fontWeight: 700
  headline-lg:
    fontFamily: Onest
    fontSize: 24px
    fontWeight: 700
  body-md:
    fontFamily: Onest
    fontSize: 18px
    fontWeight: 400
  body-sm:
    fontFamily: Onest
    fontSize: 14px
    fontWeight: 400
  label-md:
    fontFamily: Onest
    fontSize: 16px
    fontWeight: 600
  label-sm:
    fontFamily: Onest
    fontSize: 12px
    fontWeight: 500
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#7A4AD6"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    width: auto
  card:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.lg}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#7A4AD6"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.secondary}"
    typography: "{typography.body-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "#E6F4EA"
    textColor: "{colors.success}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-on-surface:
    backgroundColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1)
elevation:
  sm: 0 1px 3px rgba(0,0,0,0.1)
  md: 0 3px 6px rgba(0,0,0,0.15)
  lg: 0 10px 15px rgba(0,0,0,0.2)
---

## Overview

Baubap is a modern, accessible financial platform designed to be a supportive partner rather than a rigid institution. The visual language is clean, friendly, and approachable, using a vibrant purple-centric palette to build trust and signal transparency in the micro-loan space.

## Colors

The color palette is built for clarity and approachability, avoiding the sterile, cold blues often found in traditional finance.

*   Primary (#975CFF): The brand's signature vibrant purple for primary CTAs and key highlights.
*   Secondary (#404164): Deep indigo for secondary text and structural elements.
*   Surface (#FFFFFF): The primary background for the application and website.
*   Surface-container (#F2F2F8): A light grey-blue used for section backgrounds and card containers.
*   On-surface (#333333): Dark grey for primary body content and headings.
*   Error (inferred) (#FF6347): Used for alerts and warnings.
*   Success (inferred) (#28A745): Positive status indicators like loan approval badges.
*   Outline (inferred) (#EAEAF0): Subtle border color for dividers and input fields.
*   Focus-ring (inferred) (#975CFF): Brand primary used for focus states.

## Typography

The typography relies on the "Onest" font family to maintain a clean, modern, and highly readable interface. Hierarchy is established through size and weight rather than color variation.

*   Display-lg (inferred): Hero section headlines.
*   Display-md (inferred): Section titles.
*   Headline-lg (inferred): Feature sub-headings.
*   Body-md: Primary body text for readability.
*   Body-sm: Secondary text and captions.
*   Label-md (inferred): Button labels and navigation items.
*   Label-sm (inferred): Small UI labels and footer text.

## Layout

The layout follows a centered container pattern with a maximum width of 1200px, ensuring content remains focused. Spacing is governed by a 4px base unit, with consistent margins and padding applied throughout. The grid is responsive, collapsing into a single-column layout on mobile devices to prioritize readability and ease of interaction.

## Elevation & Depth

Elevation is used sparingly to create a subtle sense of depth, distinguishing interactive elements from the background.

*   Elevation.sm: Card lift and subtle separation.
*   Elevation.md: Dropdown or popover elements.
*   Elevation.lg: Modal or drawer overlays.

## Shapes

The brand prioritizes a friendly, accessible aesthetic through a generous use of rounded corners. Containers and cards typically use a 12px-16px radius, while smaller interactive elements like buttons and badges often utilize a fully rounded (pill) shape.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations. For production use, add a deep reference to each component pointing to its authoritative source (Storybook story, metadata file, or component spec).

### Button Primary
Uses `{colors.primary}` for the background and `{typography.label-md}` for the label. These buttons are the primary action drivers and should always be highly visible.

### Card
Uses `{colors.surface-container}` as a base with `{rounded.lg}` corners. These are used for grouping related content and should be paired with `{elevation.sm}` for subtle separation.

### Input Field
Features a clean `{colors.surface}` background with a `{colors.outline}` border. On focus, the border transitions to `{colors.primary}` to provide clear feedback.

### Badge
Small, rounded containers using `{colors.surface-container}` for background and `{typography.body-sm}` for text. Used for status indicators or category labels.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Use `{colors.error}` for non-critical information. |
| Apply `{rounded.lg}` to all card containers. | Use sharp corners on `{components.card}`. |
| Use `{typography.display-lg}` for hero headlines only. | Mix `{typography.display-lg}` with body text styles. |
| Maintain `{spacing.md}` between content blocks. | Exceed `{spacing.2xl}` for section margins. |
| Use `{colors.on-surface}` for body text. | Use `{colors.primary}` text on `{colors.surface-container}` without contrast checks. |
| Apply `{elevation.sm}` to cards for subtle depth. | Use `{elevation.lg}` on small UI elements. |
| Use `{rounded.full}` for secondary buttons. | Use square buttons for secondary actions. |
| Use `{colors.success}` for positive status badges. | Use `{colors.primary}` for success states. |

## Content Style

CTA style: Use imperative, action-oriented verbs in Spanish (e.g., "Obtén el tuyo ahora"). Keep labels concise.

Heading tone: Direct, benefit-focused, and reassuring. Headlines should clearly communicate value to the user.

Copy density: Keep paragraphs short and scannable. Use bullet points frequently to break up information and improve readability.

## Imagery & Icons

The imagery style is mixed, combining high-quality lifestyle photography with clean, rounded-corner illustrations. Icons are simple, stroke-based, and maintain a minimal aesthetic to match the brand's accessible tone.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Baubap, a modern empathetic fintech brand with a clean, accessible, and encouraging tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.lg}` — never hardcode hex values, font sizes, or pixel measurements.
2. Render only the components listed under `components:` (`button-primary`, `card`, `input-field`, `badge`, etc.). Do not invent variants the spec does not define.
3. Apply `{rounded.lg}` to all card containers and `{rounded.full}` to badges and pill-style secondary buttons, per the Shapes notes. Never use sharp corners on cards.
4. Follow the Layout notes: center content within a ~1200px max-width container, use `{spacing.md}` between content blocks, and collapse to single-column on mobile (one breakpoint at 768px).
5. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it — for example, applying `{colors.primary}` text on `{colors.surface-container}` without a contrast check — surface the conflict before proceeding.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Include hover, focus, and disabled states for any interactive component the spec defines (`button-primary-hover`, `input-field-focus`, `link-hover`, `swatch-focus-ring`).
- Apply `{colors.focus-ring}` as the focus indicator on all interactive elements.
- Use `{spacing.xs}` through `{spacing.2xl}` exclusively for all padding, margin, and gap values.
- Write CTAs using imperative Spanish verbs per the Content Style section (e.g., "Obtén el tuyo ahora").

**Must NOT:**
- Invent colors, font families, radii, or spacing values absent from the spec.
- Use generic utility defaults when a brand token exists.
- Add emoji, filler text, or unsolicited marketing copy.
- Use `{colors.error}` for non-critical information.
- Rewrite, replace, or invent page copy, headings, or navigation items.
- Alter navigation structure or page sections as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask the product team before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for text on those backgrounds, use `{colors.on-surface}`.
- Tokens noted as inferred are visual approximations; if an authoritative theme file exists, it takes precedence.
- If a request would violate a Don't, flag the conflict explicitly rather than silently overriding it.