Remixes of www.travelpayouts.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
Travelpayouts' design system embodies a modern, professional SaaS aesthetic centered around trust, clarity, and conversion. The visual language combines a bold electric blue primary color with a clean, light neutral palette that conveys simplicity and accessibility. The design prioritizes clarity and action—prominent call-to-action buttons, spacious layouts, and high-contrast text ensure users can navigate and decide quickly. The atmosphere balances playfulness (through accent colors like the warm orange and vibrant green) with enterprise-grade professionalism, making the platform feel both approachable to individual creators and credible to business partners. Photography and imagery are featured prominently, reflecting the travel industry's aspirational nature.
Key Characteristics
#006DFF) commanding attention and trust#F2F8FF, #F6F8FF) reducing visual fatigue12px–14px) softening the modern aesthetic#FF521F, green #00B67A) for secondary actions and status indicators#006DFF): Primary action buttons, hero CTAs, and key interactive elements. High-visibility blue builds confidence in user actions.#CCE2FF): Light blue overlay, hover states, and secondary backgrounds. Creates visual hierarchy without overwhelming.#E5F0FF): Subtle background containers, input focus states, and accent backgrounds.#FF521F): Warning, critical updates, and high-priority notifications. Warm orange signals urgency without aggression.#00B67A): Positive confirmations, completed tasks, and success states. Trustworthy green indicates completion.#FFCE00): Secondary warnings, caution indicators, and field validation alerts.#DCDCE6): Disabled button states and inactive form fields. Muted gray signals unavailability.#667085): Secondary text and muted interaction states. Medium gray supports visual hierarchy.#101828): Primary body text and headings. Near-black ensures maximum readability.#000000): Emphasis text, critical labels, and high-priority information. Pure black for contrast.#FFFFFF): Text on dark/colored backgrounds. Essential for readable CTAs on primary blue.#F6F8FF): Navigation backgrounds, light container fills, and subtle section separators. Almost-white with cool tone.#F2F8FF): Alternate row backgrounds and gentle elevation. Maintains visual flow.#E7ECFE): Minimal dividers and subtle accent backgrounds.#EFEFEF): Light dividing lines and minimal borders. Nearly invisible for clean layouts.Primary: Inter (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif)
Secondary: Inter (same stack; system defaults for fallback)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | Inter | 64px | 700 | 73.6px | 0px | Maximum impact; h2 equivalent. Use sparingly for hero headlines. |
| Heading Large | Inter | 27px | 700 | 31.05px | 0px | h3 equivalent; section headers and major subsections. |
| Heading Medium | Inter | 18px | 700 | 24.3px | 0px | Inferred from body weight; strong subsection titles. |
| Heading Small | Inter | 15px | 400 | 23.25px | 0px | h4; small section headers and strong list items. |
| Body Regular | Inter | 18px | 400 | 24.3px | 0px | Default paragraph text; readable on light backgrounds. |
| Body Small | Inter | 16px | 400 | 24.8px | 0px | Secondary text and list items; accessible alternative. |
| Button / Span | Inter | 16px | 500 | 48px | 0px | Button labels and inline emphasis. Medium weight adds weight. |
| Button Large | Inter | 17px | 500 | 48px | 0px | Primary CTA button text; slightly larger for prominence. |
| Link | Inter | 17px | 400 | 26.35px | 0px | Hyperlinks and navigation text. Regular weight with underline or color cue. |
| Caption | Inter | 13px | 400 | 20px | 0px | Form hints, disclaimers, and metadata. Inferred secondary size. |
| Code / Mono | Inter | 14px | 400 | 21px | 0px | Monospace fallback; code blocks and technical text. |
4px base unit, creating consistent spacing throughout layouts.700) signal importance; smaller sizes in regular weight (400) support scanning.#006DFF#FFFFFF17px50048px0px 24px12px0px none48px#0052CC (darken by 15%), maintain text #FFFFFF#003F99 (darken by 30%), text #FFFFFF#DCDCE6, text #667085, cursor not-allowed#E5F0FF#006DFF16px40040px8px 16px8px1px solid #CCE2FF40px#CCE2FF, text #006DFF#B3D9FF, text #006DFF#EFEFEF, text #DCDCE6, border 1px solid #DCDCE6rgba(0, 0, 0, 0)#10182816px50048px0px 12px0px0px none48px#F6F8FF, text #101828#E5F0FF, text #006DFFtransparent, text #DCDCE6#EFEFEF#10182813px400normal9px 6px8px1px solid #DCDCE632px#E5F0FF, border 1px solid #CCE2FF, text #006DFF#CCE2FF, border 1px solid #006DFF, text #006DFF#FFFFFF8px24px1px solid #E7ECFErgba(46, 41, 51, 0.08) 0px 10px 15px -3px, rgba(71, 63, 79, 0.16) 0px 4px 6px -2px#10182816px24.8pxrgba(0, 51, 128, 0.08) 0px 6px 20px 0px, border 1px solid #CCE2FF#FFFFFF (top) to #F6F8FF (bottom)60px 40px0px0px none#101828#006DFF16px48px 40px0px none#FFFFFF18px24.3px#FFFFFF#10182816px40012px 16px1px solid #E7ECFE8px44px#6670851px solid #006DFF, box-shadow 0 0 0 3px #E5F0FF1px solid #CCE2FF#EFEFEF, border 1px solid #DCDCE6, text #DCDCE614px500#1018288px20px12px400#667085 (hint) / #FF521F (error)4px18px#FFFFFF16px 32px1px solid #F2F8FF64px)17px400#10182826.35px8px 12px#006DFF, underline 2px solid #006DFF#006DFF, underline 2px solid #006DFF#FFFFFF1px solid #E7ECFE8pxrgba(46, 41, 51, 0.08) 0px 10px 15px -3px, rgba(71, 63, 79, 0.16) 0px 4px 6px -2px8px 0px200px1016px#10182812px 16px24px#F6F8FF, color #006DFF#E5F0FF, color #006DFF, font-weight 500Base Unit: 4px
Spacing Scale:
4px – Extra-tight spacing; padding within buttons, icon spacing8px – Tight spacing; small component padding, list gaps12px – Comfortable spacing; form field padding, minor section gaps16px – Standard spacing; default padding, component separation20px – Generous spacing; medium container padding24px – Large spacing; card padding, significant section gaps32px – Extra-large spacing; between major sections40px – Spacious spacing; top-level container padding, page margins48px – Very large spacing; hero section padding, major breaks56px – Extra-spacious spacing; section separation on desktop60px – Hero vertical padding; large hero sections72px – Maximum spacing; between major content blocksUsage Context:
4px–8px): Button internals, icon spacing, list bullets12px–16px): Form fields, small components, component padding20px–24px): Card contents, subsection breaks32px–48px): Section separation, hero padding56px–72px): Page-level section breaks, hero to content transitionsMax Width: 1280px (desktop) — centered with 40px horizontal margins
Column Strategy: Responsive; 12-column grid on desktop, 6-column on tablet, 1-column on mobile
Section Patterns:
1280px inner)720px max) for text-heavy sections (blog, docs)Generous whitespace is a core principle. The design embraces negative space to reduce cognitive load and highlight key content. Section breaks use 56px–72px vertical gaps, creating clear visual chapters. Containers include minimum 24px internal padding to allow breathing room. Whitespace guides the eye progressively through the page, preventing overwhelming density and supporting rapid scanning. The light blue background (#F6F8FF) and near-white surfaces (#FFFFFF) maximize perceived space.
0px – No rounding; hero sections, full-width elements8px – Subtle rounding; form inputs, small buttons, cards, dropdowns12px – Moderate rounding; primary buttons, medium containers14px – Balanced rounding; secondary buttons, alternate card styles16px – Generous rounding; featured containers, accent sections50% – Full circles; avatar placeholders, circular badges, icon buttonsComponent Contexts:
8px (secondary), 12px (primary), 14px (alternate)8px (tight), 16px (featured)8px10px (dropdowns)0px (full-width), 16px (contained features)1px – Subtle dividers, input borders, light card borders, form field outlines2px – Focus states, active links, emphasized dividers4px – Focus rings, prominent accents (rare)Usage:
1px solid #E7ECFE2px solid #006DFF (or 0 0 0 3px #E5F0FF expanded)1px solid #F2F8FF (subtle divider)1px solid #006DFF (active state)| Level | Treatment | Use |
|---|---|---|
| Flat (0) | No shadow; box-shadow: none | Default cards, inputs, buttons on neutral backgrounds |
| Raised (1) | Small shadow; rgba(46, 41, 51, 0.08) 0px 10px 15px -3px, rgba(71, 63, 79, 0.16) 0px 4px 6px -2px | Floating cards, dropdown menus, hover states |
| Elevated (2) | Medium shadow; rgba(0, 51, 128, 0.08) 0px 6px 20px 0px | Featured sections, modals, overlay content |
| Floating (3) | Large shadow (custom, inferred) | Toast notifications, tooltips, layer peaks |
Shadow Philosophy: Shadows are minimal and sophisticated, using muted dark tones with low opacity rather than harsh black. The primary shadow (level 1) uses a dual-layer approach—a larger, softer shadow for depth and a tighter shadow for edge definition. This creates perceived elevation without appearing artificial. Blue-tinted shadows (level 2) on brand-colored elements reinforce the color system.
| Layer | Z-Index | Use |
|---|---|---|
| Base | 1 | Default content flow |
| Sticky Elements | 2 | Fixed headers, sticky sidebars |
| Hover States | 3 | Expanded cards, dropdown content |
| Modals / Overlays | 4 | Dialog boxes, full-screen overlays |
| Dropdown Menus | 10–11 | Navigation dropdowns, select menus |
| Toasts / Notifications | 99999999 | Always-on-top notifications |
#006DFF for primary CTAs – The electric blue builds trust and guides conversion. Reserve it for actions you want users to take (sign up, get started, apply).24px padding inside containers and 56px–72px between major sections to reduce cognitive load.64px, 27px) use weight 700; body text uses weight 400. This creates clear hierarchy without relying on color alone.8px for most interactive elements (inputs, secondary buttons, cards), 12px for primary buttons, and 0px for full-width sections.#101828) for body, secondary text (#667085) for muted info, and inverse text (#FFFFFF) only on colored backgrounds.#667085 text is only used on light backgrounds; always pair dark text with light surfaces.#E5F0FF, #F2F8FF, and #F6F8FF create visual separation without harsh borders. Use them for alternate rows, subtle callouts, and focus states.44px tall; aim for 48px on mobile. Padding around small elements (like icons) should be at least 8px.#006DFF (primary), #CCE2FF (tint), and #E5F0FF (deep tint). Additional blues create confusion.#667085 (secondary gray) for primary body text – Reserve it for captions, hints, and muted metadata. Primary body must use #101828 or #000000 for accessibility.1px border width on inputs and cards – Thin, subtle borders maintain the clean aesthetic. Thick borders make the interface feel heavy.#FF521F (orange) and #00B67A (green) are for status, alerts, and CTAs. Never use them for body text.12px for standard components – Minimum comfortable padding is 12px. Anything tighter feels cramped on mobile.4px (20px, 24px, 24.8px, 26.35px, etc.). Maintain this vertical rhythm for consistency.| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–479px | Single column, full-width containers, 20px side margins, button full-width, font size reduced by 2px |
| Small | 480px–767px | Single-column with wider margins, 24px side padding, buttons 50% width or flex-wrap |
| Tablet | 768px–1023px | Two-column grid (50/50), 32px side margins, navigation collapses to hamburger, three-column features become two-column |
| Desktop | 1024px–∞ | Full 12-column grid, max-width 1280px centered, three-column features, navigation horizontal, 40px side margins |
44px for all interactive elements on mobile and tablet (buttons, inputs, links)44px for icon buttons; full-width buttons on mobile8px between adjacent interactive elements12px clearance between buttons in a row for comfortable mouse interaction16px font size prevents iOS zoom on input focus64px on desktop → 36px on tablet → 28px on mobile (maintaining 700 weight)27px on desktop → 20px on tablet → 18px on mobile18px on desktop → 16px on tablet/mobile (maintained for readability)48px on desktop/tablet → 44px on mobile56px–72px on desktop → 40px on tablet → 24px on mobile40px on desktop → 32px on tablet → 20px on mobile280px)12px gutter margins#006DFF) – primary action buttons, hero CTAs#CCE2FF) – hover states, secondary backgrounds, overlays#E5F0FF) – focus states, input backgrounds, subtle callouts#FFFFFF) – card and content backgrounds#F6F8FF) – navigation, alternate sections#F2F8FF) – subtle dividers, alternate rows#101828) – body text, headings#000000) – emphasis, critical labels#FFFFFF) – text on colored backgrounds#667085) – captions, hints, muted info#FF521F) – error states, high-priority alerts#00B67A) – confirmations, positive states#FFCE00) – caution, secondary warnings#EFEFEF) – minimal dividers#E7ECFE) – input borders, card edges#DCDCE6) – disabled controls, inactive statesButton Pattern: All primary buttons follow #006DFF background with #FFFFFF text, 17px weight-500, 24px horizontal padding, 12px border-radius. Secondary buttons inverse: #E5F0FF background with #006DFF text, lighter styling.
Spacing Baseline: Use 4px units; all spacing is 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 60px, or 72px. Never invent intermediate values.
Typography Lock: Inter font only. Hierarchy: 64px/700 (display) → 27px/700 (h1) → 18px/700 (h2, inferred) → 18px/400 (body) → 16px/400 (small body, list) → 16px/500 (buttons) → 14px/400 (captions).
Containers: Default cards are 1px solid #E7ECFE border, 8px radius, 24px padding, no shadow. On hover, add rgba(46, 41, 51, 0.08) 0px 10px 15px -3px shadow and border becomes 1px solid #CCE2FF.
Color Contrast: Ensure WCAG AA compliance. Use #101828 or #000000 for body text on light backgrounds. Never put #667085 on anything lighter than #FFFFFF. White text only on #006DFF or darker colors.
Responsive Collapse: Hero headings drop from 64px → 36px on tablet → 28px on mobile. Section padding goes 56px–72px (desktop) → 40px (tablet) → 24px (mobile). Side margins: 40px (desktop) → 32px (tablet) → 20px (mobile).
Focus States: All interactive elements get focus ring 0 0 0 3px #E5F0FF with inner border 2px solid #006DFF. On dark backgrounds, invert to #CCE2FF ring with #FFFFFF border.
Z-Index Stack: Reserve 1–4 for content/hover, 10–11 for dropdowns, 99999999 for toast notifications. Never skip levels; always use this strict ordering to prevent overlap surprises.
Shadows Sparingly: Only three shadow levels exist. Default is no shadow. Raised (on hover/dropdown): rgba(46, 41, 51, 0.08) 0px 10px 15px -3px, rgba(71, 63, 79, 0.16) 0px 4px 6px -2px. Elevated (modal/featured): rgba(0, 51, 128, 0.08) 0px 6px 20px 0px. Never layer multiple shadows or invent custom values.