A multi-platform design system for the Khipu payment platform.

Storybook: design.khipu.com

npm install @khipu/design-system

// build.gradle.kts
dependencies {
    implementation("com.khipu:design-system:0.1.0-alpha.6")
}

# Podfile
pod 'KhipuDesignSystem'

• Node.js >= 18.0.0
• React >= 17.0.0

import { Button, TextField, Card } from '@khipu/design-system';

function App() {
  return (
    <Card>
      <TextField label="Email" placeholder="Enter your email" />
      <Button variant="contained" color="primary">
        Submit
      </Button>
    </Card>
  );
}

Access design tokens for consistent styling:

import { tokens, colors, spacing, typography } from '@khipu/design-system';

const styles = {
  color: colors.primary.main,        // '#8347AD'
  padding: spacing[4],               // '16px'
  fontFamily: typography.body1.fontFamily,
};

import '@khipu/design-system/css';

# Clone the repository
git clone [email protected]:khipu/design-system.git
cd design-system

# Install dependencies
npm install

Sync design tokens from Figma to code:

Setup required:

export FIGMA_PERSONAL_ACCESS_TOKEN="your_token_here"
npm run sync:figma

See scripts/README.md for detailed documentation.

View and interact with components in isolation:

npm run storybook

Open http://localhost:6006 in your browser to explore the component library.

Foundational UI primitives:

Khipu-specific components for the payment platform:

Comprehensive tokens extracted from Figma (Pagos Automáticos - MUI v610):

• Colors - Primary (purple #8347AD), secondary, semantic (success, warning, error, info)
• Typography - Font families (Public Sans, Roboto), sizes, weights, presets
• Spacing - Consistent spacing scale (4px base unit)
• Border Radius - From sm (4px) to full (pill shape)
• Shadows - MUI-compatible elevation system (elevation1-24)
• Transitions - Duration and easing values
• Breakpoints - Responsive design breakpoints (xs, sm, md, lg, xl)

This design system supports exporting tokens to Android/Kotlin for use with Jetpack Compose, ensuring visual consistency across web and mobile platforms.

Tokens are defined in src/tokens/tokens.json and can be exported to:

• TypeScript (web) - src/tokens/index.ts
• Kotlin (Android) - DesignTokens.kt

# Generate to dist/DesignTokens.kt
npm run generate:tokens

# Generate directly to Android project
npm run generate:tokens:android

import com.khipu.client.ui.theme.KdsColors
import com.khipu.client.ui.theme.KdsSpacing
import com.khipu.client.ui.theme.KdsBorderRadius

@Composable
fun PaymentCard() {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = KdsColors.backgroundPaper
        ),
        shape = RoundedCornerShape(KdsBorderRadius.radiusCard),
        modifier = Modifier.padding(KdsSpacing.space4)
    ) {
        Text(
            text = "Payment",
            color = KdsColors.textPrimary
        )
        Button(
            colors = ButtonDefaults.buttonColors(
                containerColor = KdsColors.primaryMain
            )
        ) {
            Text("Pay Now")
        }
    }
}

1. Update tokens in src/tokens/tokens.json
2. Run npm run generate:tokens:android
3. Commit both tokens.json and the generated DesignTokens.kt

All components are fully typed. Import types alongside components:

import {
  Button,
  type ButtonProps,
  type ButtonVariant,
  type ButtonColor
} from '@khipu/design-system';

src/
├── index.ts              # Main entry point
├── tokens/
│   ├── index.ts          # Design tokens
│   └── css-variables.css # CSS custom properties
└── components/
    ├── core/             # Core UI components
    │   ├── Button/
    │   ├── TextField/
    │   ├── Checkbox/
    │   ├── Select/
    │   ├── Modal/
    │   ├── Card/
    │   └── Spinner/
    └── domain/           # Domain-specific components
        ├── BankSelector/
        ├── PaymentStepper/
        ├── MandateStatusBadge/
        ├── PayoutSummaryCard/
        └── EmptyState/

MIT