@fractio/design-system

Premium Minimal SaaS design system for Next.js and React applications.

Philosophy: 95% monochrome (gray canvas + white cards + black type) + 5% accent (green for positive data, tenant color for subtle accents).

Inspired by: Stripe, Linear, Mercury, and Vercel aesthetics.

View Live Examples — Interactive component showcase

Installation

# Using npm
npm install @fractio/design-system

# Using yarn
yarn add @fractio/design-system

# Using pnpm
pnpm add @fractio/design-system

Peer Dependencies

Make sure you have these installed:

npm install react react-dom @ant-design/icons

Quick Start

import { Button, Card, DashboardStatCard } from '@fractio/design-system'
import { ArrowRightOutlined } from '@ant-design/icons'

function MyComponent() {
  return (
    <div className="bg-zinc-100 p-6">
      <Card variant="standard" hover>
        <h2 className="text-xl font-semibold mb-4">Welcome</h2>
        <p className="text-zinc-600 mb-6">Premium minimal design system.</p>
        <Button variant="primary" icon={<ArrowRightOutlined />}>
          Get Started
        </Button>
      </Card>
    </div>
  )
}

Components

Button

52px tall pill-shaped buttons with multiple variants.

import { Button } from '@fractio/design-system'
import { ArrowRightOutlined } from '@ant-design/icons'

<Button variant="primary" icon={<ArrowRightOutlined />}>
  Comenzar
</Button>

<Button variant="secondary">Cancelar</Button>
<Button variant="fractio">Fractio Action</Button>
<Button variant="primary" loading>Procesando...</Button>

Variants:

• primary - Black background (default CTA)
• secondary - White with border
• fractio - Fractio blue (only for / landing)
• ghost - Transparent

Card

White cards with large border radius (24px standard, 32px bento).

import { Card } from '@fractio/design-system'

// Standard card with tenant accent
<Card variant="standard" hover tenantAccent="#F18A23">
  <h3>Card Title</h3>
  <p>Card content...</p>
</Card>

// Inset (nested inside another card)
<Card variant="inset">
  <p>Nested content</p>
</Card>

// Dark card
<Card variant="dark">
  <p>White text on dark background</p>
</Card>

// Bento cell (32px radius)
<Card variant="bento">
  <h2>Bento Panel</h2>
</Card>

Variants:

• standard - White card with 24px radius
• inset - Zinc-50 bg for nested content
• dark - Black background with white text
• bento - 32px radius, larger padding

Badges & Pills

Eyebrow Pill

28px height pill with optional status dot.

import { EyebrowPill, StatusDot } from '@fractio/design-system'

<EyebrowPill statusDot="success" pulse>Disponible</EyebrowPill>
<EyebrowPill>En proceso</EyebrowPill>

// Standalone status dot
<StatusDot color="success" pulse />

Delta Pill

22px height pill showing percentage change.

import { DeltaPill } from '@fractio/design-system'

<DeltaPill type="positive" value={7.5} />  // ↑+7.5%
<DeltaPill type="negative" value={-11} />  // ↓11%

Tag Pill

26px height tag for secondary labels.

import { TagPill } from '@fractio/design-system'

<TagPill>Premium</TagPill>
<TagPill>Verificado</TagPill>

Dashboard Stat Card

Complete stat card with label, value, delta, and optional spark chart.

import { DashboardStatCard } from '@fractio/design-system'

<DashboardStatCard
  label="Saldo disponible"
  value="$1,234,567"
  delta={{ type: 'positive', value: 7.5 }}
  statusDot="success"
  tenantAccent="#F18A23"
  link={{ href: '/wallet' }}
/>

Icon Tile

40px × 40px colored icon containers.

import { IconTile } from '@fractio/design-system'
import { WalletOutlined } from '@ant-design/icons'

// Pastel palettes
<IconTile palette="indigo" icon={<WalletOutlined />} />
<IconTile palette="green" icon={<CheckOutlined />} />

// Tenant color (95/5 rule)
<IconTile palette="tenant" tenantColor="#F18A23" icon={<BankOutlined />} />

// Dark tile (section headers)
<IconTile palette="dark" tenantColor="#F18A23" icon={<DashboardOutlined />} />

Palettes: indigo, green, amber, rose, zinc, tenant, dark

Pill Nav

Horizontal pill-shaped tabs navigation.

import { PillNav } from '@fractio/design-system'
import { DashboardOutlined, WalletOutlined } from '@ant-design/icons'

const [activeTab, setActiveTab] = useState('dashboard')

<PillNav
  items={[
    { key: 'dashboard', label: 'Dashboard', icon: <DashboardOutlined /> },
    { key: 'wallet', label: 'Cartera', icon: <WalletOutlined /> },
    { key: 'market', label: 'Mercado' }
  ]}
  activeKey={activeTab}
  onChange={setActiveTab}
/>

Avatar Stack

Overlapping avatars with count indicator.

import { AvatarStack } from '@fractio/design-system'

<AvatarStack
  avatars={[
    { src: '/avatars/user1.jpg', alt: 'User 1' },
    { src: '/avatars/user2.jpg', alt: 'User 2' },
    { src: '/avatars/user3.jpg', alt: 'User 3' },
    { src: '/avatars/user4.jpg' },
    { src: '/avatars/user5.jpg' }
  ]}
  maxVisible={3}
  size={32}
/>

Floating Card

Lifted micro-card with subtle shadow.

import { FloatingCard } from '@fractio/design-system'
import { BellOutlined } from '@ant-design/icons'

<FloatingCard
  avatar="/avatars/user.jpg"
  title="María González"
  subtitle="hace 5 minutos"
>
  <p className="text-xs text-zinc-600 mt-1">Nueva oportunidad disponible</p>
</FloatingCard>

// With icon
<FloatingCard
  icon={<BellOutlined />}
  title="Notificación"
  subtitle="Sistema"
/>

Design Tokens

Colors

Brand:

• Action: #0A0A0A (black - primary CTA)
• Fractio: #0F71B8 (blue - only on / landing)
• Tenant Accent: Dynamic (5% usage only)

Neutral (Tailwind Zinc):

• zinc-50 to zinc-950
• Canvas: #F4F4F5 (zinc-100)
• Card: #FFFFFF

Status:

• Success: #16A34A (green)
• Warn: #EAB308 (amber)
• Danger: #D80000 (red)

Spacing

Consistent rhythm: Use gap-4 (16px) or gap-6 (24px)

Avoid: gap-2, gap-3, gap-5 (inconsistent)

Border Radius

• Cards: rounded-[24px] (24px)
• Bento: rounded-[32px] (32px)
• Pills/Buttons: rounded-full
• Icon Tiles: rounded-xl (12px)

Shadows

Minimal elevation:

• Flat: No shadow (default)
• Card: shadow-[0_1px_3px_0_rgb(0_0_0_/_0.05)]
• CTA: shadow-[0_4px_12px_-4px_rgba(0,0,0,0.25)]

Never use: shadow-lg, shadow-xl, shadow-2xl

Typography

Font: Geist (load via CDN in your app)

Scale:

• Display: 54px+ (page titles)
• Body: 16px/24px (main text)
• Small: 14px/20px (secondary)
• Micro: 11px/14px (uppercase pills, +0.06em tracking)

Tenant Accent (95/5 Rule)

Maintain 95% monochrome aesthetic. Use tenant color for 5% subtle accents only.

Example with Next.js + Redux:

import { useAppSelector } from '@/redux/hooks'
import { DashboardStatCard, IconTile } from '@fractio/design-system'

function Dashboard() {
  const tenantInfo = useAppSelector((state) => state.tenant.info)
  const primaryColor = tenantInfo?.primary_color || '#F18A23'

  return (
    <DashboardStatCard
      label="Saldo"
      value="$1,234,567"
      tenantAccent={primaryColor}
    />
  )
}

TypeScript

Full TypeScript support included. All components are fully typed.

import type {
  ButtonProps,
  CardProps,
  DashboardStatCardProps,
  IconTilePalette
} from '@fractio/design-system'

Next.js Setup

This package works seamlessly with Next.js 13+ (App Router or Pages Router).

// app/layout.tsx or pages/_app.tsx
import '@fractio/design-system/styles.css' // If CSS is needed

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  )
}

Tailwind CSS

Components use Tailwind utility classes. Make sure your project has:

// tailwind.config.js
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './node_modules/@fractio/design-system/**/*.{js,ts,jsx,tsx}' // Add this
  ],
  theme: {
    extend: {
      colors: {
        zinc: {
          50: '#FAFAFA',
          100: '#F4F4F5',
          200: '#E4E4E7',
          300: '#D4D4D8',
          400: '#A1A1AA',
          500: '#71717A',
          600: '#52525B',
          700: '#3F3F46',
          800: '#27272A',
          900: '#18181B',
          950: '#09090B'
        }
      }
    }
  }
}

Design Philosophy

Aesthetic: 95% monochrome + 5% accent

Inspiration:

• Stripe: Clean lists, subtle shadows
• Linear: Sharp typography, consistent spacing
• Mercury: Professional cards, organized layouts
• Vercel: Geometric sans, minimalist approach

Never:

• ❌ Heavy gradients, glassmorphism, decorative effects
• ❌ Exaggerated shadows (shadow-xl)
• ❌ Inconsistent spacing (gap-2, gap-3, gap-5)
• ❌ Emoji or unicode glyphs
• ❌ Spring animations or entrance effects

License

SEE LICENSE IN LICENSE - only for Fractio internal use.

Support

For issues or questions, contact the Fractio development team.