haupcar.com website design: fonts, colors and UI patterns

Overview

HAUPCAR presents itself as Thailand's largest carsharing community, with a visual system that balances corporate credibility with approachable mobility services. The design employs a predominantly white canvas with strategic blue-forward branding that anchors trust and technological reliability. The interface supports bilingual content in Thai and English, requiring a type system that remains legible across both scripts. The overall impression is clean, service-oriented, and structurally organized—prioritizing clear information hierarchy over decorative flourish. Photography receives distinctive color treatment through blue and teal duotone overlays that unify disparate imagery into a cohesive brand expression. The layout philosophy favors generous whitespace, clearly bounded content regions, and modular components that can accommodate varying content lengths across FAQ sections, partner recruitment, and comprehensive footer information.

Colors

The color system centers on a professional blue palette with supporting neutrals and functional accents. The primary action blue dominates headings, interactive elements, and brand moments, while a teal accent provides secondary energy in photographic treatments. Neutrals remain restrained to maintain focus on service content.

The interface operates in a light mode exclusively across visible surfaces. The action blue serves as the dominant chromatic element, appearing in the HAUP logo mark, section headings like "FAQs," active tab selection states, and inline link treatments. Photographic content receives heavy color grading: partner recruitment imagery shows pronounced blue duotone overlays, while some lifestyle photography shifts toward teal-green tinting. This creates visual continuity across disparate photo sources while reinforcing brand presence. The near-black ink provides maximum readability for Thai script at smaller sizes, while muted-ink softens footer descriptions and secondary information without receding to full gray. White canvas backgrounds dominate, with subtle surface gray available for section alternation if needed.

Typography

The type system combines Poppins for display and interface elements with Prompt for body content, supporting both Latin and Thai scripts. Questrial appears in the font stack but serves no visible typographic role in the captured interface.

Poppins, designed by Jonny Pinhorn and distributed by Indian Type Foundry, provides the geometric sans-serif character for brand-forward display text. Its medium weight carries sufficient presence for Thai script headlines without becoming heavy. Prompt handles extended reading in both English and Thai, with its slightly more open proportions supporting the 1.6 line height for body comfort. The type scale builds from a 0.25rem relative unit, with display sizes at 12× and 10× unit multiples, body at 4×, and small text at 3× and 2× respectively. Verify licensing for these families before production use.

Layout

The page structure follows a centered, contained model with clear section demarcation. Maximum content width appears constrained to approximately 1200px, with generous horizontal padding that expands on wider viewports. Sections stack vertically with substantial vertical rhythm—approximately 5rem between major content regions—to prevent visual crowding of service information.

The FAQ section demonstrates a focused single-column layout with internal complexity: a centered heading, right-aligned search affordance, horizontal tab row for category filtering, and stacked expandable items with full-width dividers. Each FAQ item carries a left-aligned question in bold weight with a right-aligned collapse indicator, followed by revealed answer text beneath. This creates a clear scan pattern for users seeking specific information.

The partner recruitment section breaks from strict linearity with an asymmetric photo collage. A tall central card anchors the composition, flanked by smaller rectangular images in an irregular grid. This masonry-like arrangement creates visual interest while the consistent rounded corners and color overlays maintain system coherence. Below the imagery, two community entry points sit centered with icon-and-text pairings.

The footer expands to a multi-column grid on wider screens. Four distinct content zones—brand description with social links, location listings, service links, and enquiry contacts—distribute evenly with consistent vertical alignment. App store badges occupy a prominent position in the enquiries column, sized for immediate recognition.

Visual language

Photography treatment defines much of HAUPCAR's distinctive character. Rather than presenting raw lifestyle imagery, the system applies consistent color overlays that shift images toward blue or teal-green palettes. This technique unifies disparate photographic sources—driver portraits, vehicle details, mobile app interfaces, customer interactions—into a coherent brand world. The overlays appear as full-bleed tints within rounded containers, not as subtle filters, creating bold color blocks that compete with white space for attention.

Iconography remains minimal and functional. Social platform icons appear in their native brand colors—LinkedIn blue, Facebook blue, Instagram gradient, TikTok black, WhatsApp green, LINE green—providing immediate platform recognition against the neutral footer. Interface icons such as the FAQ search magnifier and information circle use simple line weights in the ink color, avoiding decorative embellishment.

The HAUP logo combines a geometric mark with wordmark. The mark suggests motion or connectivity through angled parallel strokes, rendered in the action blue. This appears consistently across header and footer contexts, establishing brand presence without demanding excessive space.

Rounded corners appear throughout at moderate radii—cards and images receive 1rem rounding, while buttons and smaller elements use tighter 0.5rem curves. This creates a friendly but not playful character appropriate to a transportation service.

Components

FAQ Section

• Anatomy: Centered heading, optional search icon, horizontal category tab row, stacked expandable question items with divider lines
• Surface and text color: Canvas background, action blue heading, ink for questions and answers, action blue for active tab underline
• Typography: Section-display for heading, body for questions (bold weight), body-small for revealed answers
• Shape and border: Full-width bottom borders on tabs and items at 1px using border color; active tab receives 2px action blue bottom border
• Spacing: Approximately 2rem below heading, 1.5rem between tabs, 1.25rem internal item padding
• Composition: Single column with full-width items; expand/collapse indicator right-aligned
• Variants: Tab categories include Tools, Fuel, Traffic, Payment, Others; collapsed and expanded states visible

Partner Recruitment Collage

• Anatomy: Section heading, asymmetric image grid with 5-6 photographs, central tall card with text overlay, bottom community links
• Surface and text color: White heading text on photographic overlays; blue and teal duotone treatments on all imagery
• Typography: Hero-display for Thai headline; body-small for central card description
• Shape and border: 1rem rounded corners on all image containers; consistent gap of approximately 1rem
• Composition: CSS Grid or similar with varying cell spans; central card spans multiple rows
• Variants: Image treatments shift between blue-dominant and teal-dominant overlays

Footer

• Anatomy: Logo and description block, social icon row, three or four link columns, contact information with messaging app details, app store badges
• Surface and text color: Canvas background throughout; ink for column headings; muted-ink for body descriptions and links
• Typography: Label weight for column headings; body-small for link lists and contact details; legal-copy for fine print
• Shape and border: No visible borders between columns; subtle top border possible for section separation
• Spacing: Generous internal padding, approximately 3rem vertical; consistent column gutters
• Composition: Responsive grid collapsing to stacked on narrow viewports; left-aligned content within each column
• Variants: Expanded version shows full location list, services, and multiple contact channels including WhatsApp, WeChat, hotline, and email addresses

Social Icon Row

• Anatomy: Circular containers with platform-native iconography
• Surface and text color: Transparent or white background; platform brand colors for icon fills
• Shape and border: 9999px full circle; consistent 2rem diameter
• Spacing: Approximately 0.75rem between icons
• Composition: Horizontal flex arrangement, left-aligned in footer context

App Store Badges

• Anatomy: Apple App Store and Google Play download buttons
• Surface and text color: Native badge styling with platform-standard colors
• Shape and border: Approximately 0.5rem rounded corners; 2.5rem height
• Spacing: Side-by-side with small gap; positioned prominently in enquiries column

Responsive behavior

The layout appears optimized for desktop presentation with substantial horizontal space. The footer four-column arrangement would require significant reorganization for narrow viewports, likely stacking to single-column with the brand description and social links first, followed by collapsed or simplified link lists. The partner collage's asymmetric grid would compress to a single column or 2×2 grid on tablets, losing the dramatic height variation that creates visual interest at full width.

FAQ tabs may require horizontal scrolling or transformation to a dropdown selector when viewport width cannot accommodate the full tab row. The search icon positioned at the right edge of the FAQ heading would maintain relative position but may require adjustment to prevent collision with long headings on narrow screens.

Typography should maintain readability across scripts: Thai script at body-small sizes benefits from the generous 1.5 line height and open Prompt proportions. Display headings in Thai may require slight size reduction compared to English equivalents to maintain comfortable line lengths.

Practical implementation guidance

Preserve - The distinctive blue and teal photographic overlays that unify brand imagery - Generous section spacing that prevents information density from overwhelming users - Clear typographic hierarchy between Poppins display and Prompt body - Platform-native social icon colors for immediate recognition - Rounded container treatment on all photographic content

Avoid - Adding decorative elements that compete with service photography - Reducing footer column spacing to the point that Thai script becomes cramped - Applying the blue overlay so heavily that photographic subject matter becomes unrecognizable - Using ink color for large background areas—maintain white dominance - Introducing additional accent colors beyond the established blue-teal-green system

Recommended build order 1. Establish color tokens and typographic scale with Poppins/Prompt pairing 2. Build footer grid as the most structurally complex component, ensuring link lists render correctly in Thai 3. Implement FAQ section with functional tab switching and expand/collapse behavior 4. Create image overlay system for partner recruitment collage 5. Add social icons and app badges with proper platform styling 6. Polish spacing and responsive breakpoints

Accessibility - Ensure action blue (#1565C0) on white meets WCAG AA contrast for body text; verify for smaller sizes - Provide visible focus indicators on FAQ tabs and expand controls - Include aria-expanded state on FAQ items for screen reader users - Maintain touch targets of at least 44×44 CSS pixels for social icons and tab controls - Consider Thai script rendering: test line breaking behavior and ensure proper font subsetting

Scope note

This guide covers the homepage and footer surfaces visible in the supplied captures, including FAQ interactions, partner recruitment presentation, and comprehensive contact footer. Mobile layouts, navigation header behavior, form interactions, booking flows, and motion or hover states are not represented. Measurements are practical adaptation targets derived from visible proportions.

Related design patterns

• Home page
• Travel and hospitality
• Marketplace
• Normal state
• Photography
• Physical product
• Professional service
• Article page

More website design guides

Browse website design guides by pattern and website.