firsty.app website design: fonts, colors and UI patterns

Overview

Firsty presents a travel eSIM service through a bold, high-energy visual system that balances playful color blocking with clean, functional typography. The design communicates ease and accessibility through stacked, color-coded feature cards that guide users through a four-step process. Large display headlines in a heavy sans-serif typeface dominate the visual hierarchy, while the interface relies on generous white space and rounded corners to soften the overall impression. The system uses a distinctive lime-green accent as its primary brand marker, appearing in the globe icon, action buttons, and QR code borders. Dark purple serves as a grounding neutral for high-contrast moments, while teal and magenta cards create visual rhythm across the feature sections. The overall effect is friendly, modern, and distinctly mobile-first—appropriate for a service targeting international travelers who need quick, clear information.

Colors

The color system operates on a principle of high contrast and emotional segmentation: white canvas for clarity, dark ink for readability, and three vibrant accent colors that differentiate product tiers or feature steps.

The interface uses a light-mode-only scheme with no dark mode visible. The lime green functions as the primary brand accent, drawing attention to interactive elements and the app icon. Teal and magenta serve as section differentiators in the stacked card system, allowing users to visually track their progress through the feature list. The dark purple provides necessary contrast for the middle tier and anchors the brand logo. Orange-gold stars in testimonials add warmth to the otherwise cool-leaning palette. All text on colored cards uses ink black for maximum legibility rather than white, which reinforces the bold, graphic quality of the design.

Typography

Three font families create a clear hierarchy: Avantt Trial for commanding display headlines, Inter Tight for all functional and body text, and Pp Right Slab for occasional accent moments in the app interface.

Avantt Trial appears exclusively in uppercase for headlines, giving the brand a confident, declarative voice. Inter Tight handles all reading tasks with its clean, open forms; the Semi Bold weight provides hierarchy without the heaviness of a true bold. Pp Right Slab appears sparingly inside phone mockups as a stylistic accent for premium tier labels. Verify licensing for these families before production use. Inter Tight is designed by Rasmus Andersson and available from Rsms.

Layout

The page follows a centered, single-column flow with full-width sections that contain constrained content widths. Feature cards stack vertically with slight horizontal offsets and overlapping edges, creating depth and suggesting a scrollable or expandable interface. Each card maintains consistent internal padding of approximately 2rem, with text aligned left and phone mockups positioned to the right.

The hero and feature sections use a maximum content width of roughly 1200px centered on the page. Cards within these sections extend nearly full-width of this container, leaving modest side margins. The testimonial section breaks into a horizontal carousel with four visible cards, each occupying roughly 25% of the container width minus gap spacing.

Footer layout distributes content across a multi-column grid: brand mark and social links on the left, four link columns in the center, and a QR code with legal text on the right. This creates an asymmetric but balanced composition that prioritizes scanability over strict symmetry.

Vertical rhythm relies on generous section spacing of approximately 6rem between major content blocks. Internal card spacing uses 1rem to 2rem gaps between text elements and mockups. The stacked feature cards appear to overlap by roughly 1rem vertically, creating a continuous ribbon effect that unifies the step-by-step narrative.

Visual language

The visual language combines friendly roundness with bold graphic confidence. Rounded corners appear everywhere—cards, buttons, pills, and icon containers—softening the digital interface into something more approachable. The 1.5rem card radius is substantial enough to feel intentional rather than default.

Step indicators use numbered circles with thin borders, creating a timeline-like progression without heavy connecting lines. The numbers sit inside small pills that feel like badges rather than formal steps.

Phone mockups appear consistently across feature cards, always positioned at the right edge and partially extending beyond the card boundary. This breaking of the container edge adds dynamism and suggests the app extends beyond the website frame. Mockups show realistic iPhone frames with notched displays, grounding the service in tangible hardware.

The lime-green globe icon serves as the primary brand mark—a simple, recognizable symbol that translates well to favicon and app icon scales. The wordmark "firsty" appears in a dark rounded pill, treating the brand name as a button-like element.

Photography and illustration are minimal; the design relies on color fields, typography, and device mockups to carry visual interest. When images do appear inside phone screens, they show soft gradients and travel-related iconography.

Components

Feature card

The core content unit of the marketing page. Each card presents a step in the user journey with a numbered indicator, headline, description, and phone mockup.

• Anatomy: Numbered step indicator (top left), headline (left-aligned, upper portion), body description (below headline, left-aligned), phone mockup (right side, partially extending beyond card edge)
• Surface: Solid fill in one of four accent colors—teal, lime, dark purple, or magenta
• Typography: Headline uses {typography.section-display} in ink color; description uses {typography.body-semibold} in ink color; step label uses {typography.label} in ink color
• Shape: 1.5rem border radius on all corners
• Spacing: 2rem internal padding; mockup bleeds right with negative margin effect
• Composition: Two-column internal layout with text on left (60%) and mockup on right (40%)
• Variants: Four color variants correspond to steps 1–4; dark purple variant uses white text for step indicator border and label

Step indicator

A small numbered badge that labels each feature card.

• Anatomy: Circular or pill-shaped container with number and text label
• Surface: Transparent background with 1px ink border on light cards; white border on dark purple card
• Typography: Number in {typography.label}, text label in {typography.label} to the right
• **Shape`: Pill or circle with 9999px radius
• Spacing: 0.5rem between number and label, 0.75rem internal horizontal padding

Primary button

Action elements inside app mockups and potentially on the live page.

• Anatomy: Text label centered within container
• Surface: {colors.accent-lime} background with ink text
• Typography: {typography.label} in ink color
• Shape: 0.75rem border radius
• Spacing: 1rem vertical padding, 2rem horizontal padding

Testimonial card

Social proof element with user review content.

• Anatomy: Five-star rating (top), username and timestamp, headline, body text
• Surface: {colors.surface} background
• Typography: Stars use star color; username and headline use {typography.body-semibold} in ink; body uses {typography.body} in muted ink; timestamp uses {typography.navigation} in muted ink
• Shape: 1.5rem border radius
• Spacing: 1.5rem internal padding; 0.75rem between rating and username, 0.5rem between username and headline, 0.5rem between headline and body
• Composition: Single column, left-aligned text

Footer

Multi-column site conclusion with navigation, social proof, and legal information.

• Anatomy: Brand mark (top left), social icon row, legal links, four link columns, QR code, trademark text
• Surface: White or very light gray background
• Typography: Column headers use {typography.label} in ink; links use {typography.navigation} in ink; legal text uses {typography.legal-copy} in muted ink
• Composition: Asymmetric grid with brand block left, link columns center, QR block right
• Elements: Globe icon in lime circle adjacent to "firsty" wordmark pill; social icons in circular containers; QR code with 0.5rem lime border

Responsive behavior

The design appears optimized for desktop viewing with substantial horizontal space for side-by-side card layouts and mockup positioning. At narrower viewports, the following adaptations should occur:

• Feature cards should stack vertically with full-width phone mockups moving below text content rather than beside it
• The four-column testimonial carousel should reduce to two columns on tablet and single column on mobile, maintaining card width and horizontal scroll if necessary
• Footer columns should collapse to two columns on tablet and stacked single column on mobile, with brand block remaining at top
• Hero headline should scale down to approximately 2.5rem on mobile to prevent overflow
• Card internal padding should reduce to 1.25rem on mobile to maximize content area

The stacked card effect with overlapping edges will likely flatten to simple vertical stacking below desktop breakpoints. Mockup images should maintain aspect ratio and center within their containers when repositioned.

Practical implementation guidance

### Preserve - The bold uppercase headline treatment in Avantt Trial; this is the brand's most distinctive voice - The four-color card sequence (teal, lime, dark purple, magenta) as a recognizable step pattern - The lime-green globe icon as the primary brand mark - Phone mockups breaking the right edge of cards for visual dynamism - Generous border radius on all containers—this friendly roundness is central to the brand feel

### Avoid - Adding drop shadows to cards; the design relies on flat color fields and overlap for depth - Using white text on colored cards; the system consistently uses black text for maximum boldness - Shrinking step indicators below 1.5rem touch target size - Introducing additional accent colors beyond the established four; the palette is intentionally constrained - Replacing the slab font for in-app badges with standard sans-serif; the slight serif character adds premium texture

### Recommended build order 1. Establish the type scale with Avantt Trial headlines and Inter Tight body text 2. Implement the four color tokens and apply to full-width feature card containers 3. Build the step indicator component with proper pill shaping and number styling 4. Add phone mockup positioning with right-edge bleed behavior 5. Construct the testimonial card with surface background and star ratings 6. Assemble the footer with multi-column link grid and QR code block 7. Polish with border radius consistency and spacing rhythm

### Accessibility - Ensure all text on colored cards meets WCAG AA contrast; black on teal, lime, and magenta should be verified programmatically as these combinations can be marginal - Provide aria-labels for step indicators that communicate progress ("Step 1 of 4: Choose Your Plan") - Make testimonial carousel keyboard-navigable with visible focus indicators - Add alt text to phone mockups describing the app interface shown rather than generic "phone image" - Maintain touch targets of at least 44px for all interactive elements including footer links and social icons

Scope note

This guide covers the marketing homepage visible in the supplied images, including the hero feature cards, testimonial section, and footer. Navigation header, pricing tables, checkout flows, and in-app interfaces beyond the mockups shown are not represented. Motion behavior, hover states, and mobile-specific layouts were not captured and should be designed as needed. Measurements are practical adaptation targets derived from visual inspection of the desktop presentation.

More website design guides

Browse website design guides by pattern and website.