Buttons

Our buttons have a playful, tactile feel with a 3D depth effect that makes them feel pressable. Use uppercase text with letter spacing for clarity.

Primary Button

Use primary buttons for the main action on a page. The Tide color with a darker bottom border creates a satisfying "pushable" appearance.

className="px-8 py-3 rounded-2xl bg-tide border-b-4 border-[#0369c1] text-white font-bold uppercase tracking-wide"

Secondary Button

Use secondary buttons for alternative actions. The outline style with a thicker bottom border maintains the 3D effect while being visually lighter.

className="px-8 py-3 rounded-2xl bg-white border-2 border-border border-b-4 text-tide font-bold uppercase tracking-wide"

Accent Button

Use accent buttons to draw extra attention, typically for promotional CTAs or celebratory moments.

className="px-8 py-3 rounded-2xl bg-sunshine border-b-4 border-[#d4a90e] text-abyss font-bold uppercase tracking-wide"

Ghost Button

Use ghost buttons on dark backgrounds. They maintain the pill shape but use a subtle border treatment.

className="px-8 py-3 rounded-2xl border-2 border-white/40 border-b-4 text-white font-bold uppercase tracking-wide"

Sizes

Use different sizes based on context. Small for dense UIs, large for hero CTAs.

Small

px-5 py-2 text-sm rounded-2xl border-b-[3px]

Medium (default)

px-8 py-3 rounded-2xl border-b-4

Large

px-10 py-4 text-lg rounded-2xl border-b-[5px]

Icon Buttons

Use icon buttons for common actions. The circular shape maintains the playful feel while staying compact.

className="w-12 h-12 rounded-2xl bg-tide border-b-4 border-[#0369c1] text-white flex items-center justify-center"

Button with Icon

Pair icons with text to add visual cues. Icons should match the button's visual weight.

Full Width

Use full-width buttons in mobile layouts, modals, and forms where the button should span the container.

Button Group

Group related actions together. Maintain the 3D style but adjust spacing for visual harmony.

Inline Actions

Segmented Control

Selected: day

Interaction States

The 3D effect responds to interaction. On press, the bottom border disappears and the button shifts down, creating a satisfying tactile feedback.

Default

Hover

Pressed

Usage Guidelines

Do
  • • Use one primary button per view
  • • Use short, clear action verbs in uppercase
  • • Maintain consistent sizing within button groups
  • • Include loading states for async actions
  • • Use the 3D press effect for interactive feedback
  • • Use full-width buttons on mobile
Don't
  • • Use multiple primary buttons together
  • • Use long sentences as button labels
  • • Mix button styles inconsistently
  • • Remove the 3D depth effect (it's core to our brand)
  • • Use buttons for navigation (use links instead)
  • • Disable buttons without explaining why