Skip to content

Components

Buttons

Primary Button

Spotify Green background with white text. Pill-shaped.

ft.ElevatedButton(
    text="Continue",
    style=ft.ButtonStyle(
        bgcolor=ft.Colors.PRIMARY,
        color=ft.Colors.ON_PRIMARY,
        shape=ft.RoundedRectangleBorder(radius=999),
    ),
)

Secondary Button

Transparent background with border color stroke.

ft.OutlinedButton(
    text="Cancel",
    style=ft.ButtonStyle(
        shape=ft.RoundedRectangleBorder(radius=12),
    ),
)

FAB (Floating Action Button)

Primary Green with white icon, elevated with shadow.

ft.FloatingActionButton(
    icon=ft.Icons.ADD,
    bgcolor=ft.Colors.PRIMARY,
    foreground_color=ft.Colors.ON_PRIMARY,
)

Cards

Package Card

16px radius with header for Status (using status colors), body for route info, and footer for price/date.

┌─────────────────────────────┐
│ ● TRK-A1B2C3D4              │
│ ──────────────────────────── │
│ Juan Pérez                   │
│ Madrid → Lima                │
│ 2.5 kg  $45.00 ● PAID      │
└─────────────────────────────┘

Shadow

Use only "Ambient" soft shadows:

Container(
    shadow=ft.BoxShadow(
        color=ft.Colors.SURFACE_CONTAINER,
        blur_radius=12,
        offset=ft.Offset(0, 4),
    ),
)

Inputs

TextField

  • 12px padding
  • 8px radius
  • Surface Variant background
  • Border highlights in Primary Green on focus
ft.TextField(
    label="Email",
    border_color=ft.Colors.OUTLINE_VARIANT,
    focused_border_color=ft.Colors.PRIMARY,
    border_radius=8,
)

Language Toggle

Segmented control [ES | EN] in the Top AppBar.

Bottom Navigation Bar

Blurred background (Glassmorphism) allowing content to scroll behind while maintaining legibility.

ft.NavigationBar(
    destinations=[
        ft.NavigationDestination(icon=ft.Icons.HOME, label="Home"),
        ft.NavigationDestination(icon=ft.Icons.INBOX, label="Shipments"),
        ft.NavigationDestination(icon=ft.Icons.PERSON, label="Profile"),
    ],
)

Collapsible with 24px icons and 14px Medium Inter labels.

  • Expanded: 280px
  • Collapsed: 80px

Lists

Use "Inset Grouped" list styles for settings and profile sections, consistent with iOS system patterns.

Shapes

Element Radius
Primary Cards 16px
Nested Items 12px
Buttons (Primary) Pill (9999px)
Buttons (Secondary) 12px
Inputs 8px

Touch Targets

All interactive elements must maintain a minimum of 44x44pt to comply with HIG accessibility standards.

Elevation

Level Usage Shadow/Border
Level 0 Background Base canvas
Level 1 Cards, Surface Subtle shadow (light) / 1px border (dark)
Level 2 Modals, Overlays More pronounced shadow
Interactive Buttons, FABs "Lift" effect on hover