Wandor

01Colors

• Paper white#FFFFFFBackground · 82.1% · WhitePage background of both versions. The post sets them on a #F5F5F5 gray canvas.
• Warm ink#1E1D1BText · BlackHeadlines and strong text in both. Non-designer serif measures #1E1D1B; Designer headings read slightly cooler, about #11191C on the sky.
• Stone gray#646462Muted text · 1.2% · GrayNon-designer body copy (≈5.9:1 on white). Designer body is lighter, about #747474, and its section subheads about #878787.
• Lagoon teal#44B0A4CTA · 1.1% · TealNon-designer flat “Plan my trip” pills (the hero one with a teal glow), plus step-number circles, tags and map pins.
• Glossy mint teal#6DC4BACTA · 1.7% · TealDesigner button gradient, #6DC4BA at the top to #42ACA3 at the bottom, so the shared teal looks raised and glossy.
• Persimmon#E44E01Accent · RedNon-designer only: eyebrow dashes and labels, the thick vertical rule in How it works, route end pins and berries.
• Oat cream#F3EDE3Surface · 4.3% · Beige & creamNon-designer chips and day tabs; the app sidebar (#F5EEE1) and itinerary cards (#FBF7EE) are near variants. Pastel tag tints sit beside it: teal #D3ECE9, lavender #E4DCF3, peach #FDE4D4, mint #E4F5EC.
• Espresso charcoal#22211DSurface · 4.9% · BlackNon-designer inset dark panel “Same city. Four completely different trips.”; persona cards inside it are #2B2A26.
• Lavender violet#8268C1Accent · PurpleNon-designer illustration accent (pagoda roofs, hotel, postcard stamp, persona tile). Designer uses a softer #8877BE for its third eyebrow.
• Painted sky#BBE6EDBackground · 2.8% · TealDesigner hero sky, fading from #E6F5FA under the nav to #B0E2EE at the horizon, with painted cream clouds.
• Coral#F9865DAccent · RedDesigner product UI only: Search and Book buttons, the “Alex” highlight, active Chat pill. Its first eyebrow uses a deeper burnt orange (≈#CD601B).
• Terracotta#E69565Image · 0.8% · OrangeDesigner landmark painting: Great Wall, Colosseum and Chichen Itza stone, with pine greens (#2C5330), deep teal mountains (#205C69) and sand (#DEB17F) around it.
• Pistachio#B8CC99Image · 1.1% · GreenNon-designer flat map island and hill bands; darker sage #708B6A for mountains and the outer hills.

Both versions share white pages, warm ink text and a teal CTA, so the brand reads as the same product. The Non-designer palette lives in the UI: warm cream neutrals, one rationed persimmon accent for eyebrows and the timeline rule, lavender and sage in flat illustrations, pastel tag tints, and one dark espresso panel for contrast. The Designer palette lives in the art: the page itself is white and gray, and color arrives through the painted sky, terracotta landmarks, pine greens and flowers; UI accents are the glossy teal button, coral in the app screenshots and color-coded eyebrows (orange, teal, violet). Both are warm, multi-color and low in saturation.

02Typography

Specimens use a stand-in face of the same class and weight.

Pairing

Non-designer: a semibold soft serif for headlines over Inter body, plus a Caveat-like handwriting on the postcard. It is the classic editorial serif/sans contrast and reads literary and warm, but it is also the most common pairing in AI-generated pages. Designer: one grotesk does headings and body, separated only by size and weight, and the character is handed to the typewriter wordmark and the illustrations. Moving from serif to sans is the biggest typographic change between the two: the Non-designer page reads like a travel magazine, the Designer page like an app.

Hierarchy

Non-designer: ≈64px serif hero vs ≈15px body (about 4:1), ≈32px serif H2s, ≈18px serif step titles and 10px tracked caps, a steady conventional ladder. Designer: ≈36px medium hero, ≈20–24px section heads, 13–14px body; the type is deliberately quiet and the illustrations carry the hierarchy. Line lengths: Non-designer 45–60 characters left-aligned; Designer mostly centered two-line subheads of about 55 characters.

03Layout

Two full-length pages side by side on a light gray canvas, each in a white column under a large serif label. Non-designer: split hero (copy and prompt card left, flat map illustration with floating cards right), How it works as a two-column zigzag along a thick persimmon vertical rule, a product section with a full desktop app mockup on illustrated hills, an inset dark rounded persona panel, and a split final CTA (the image ends there). Designer: centered hero over a painted sky with a landmark panorama cut by a scalloped edge, a one-line split intro, three zigzag feature rows (text on one side, portrait screenshot on a painted backdrop on the other), a centered desktop shot inside a flower wreath, two centered illustration beats (airplane window, pagoda roof), the prompt box again, and a footer ending in a full-width landmark sticker collage.

Alignment

mixed

Density

balanced

Width

contained

Corners

rounded

Depth

soft-shadow

Grid

Non-designer: about 12 columns; 50/50 hero split; two-column zigzag with a centered rule; three-pane app window (sidebar / itinerary / map and hotel); 40/60 split inside the dark panel. Designer: one centered column for hero, wreath and closing beats; zigzag rows with text at about 45% and a portrait screenshot card at about 30% of the width; brand block plus three link columns in the footer.

Spacing

Non-designer: even rhythm with roughly 120px between sections at this scale, cards padded 16–20px, floating cards and toasts overlapping the art with soft shadows. Designer: looser and less even, with large empty areas beside the feature screenshots, big gaps between the illustration beats and generous padding inside the prompt box (≈24px radius).

04Sections 15

1. 01
   Comparison

   Post frame: #F5F5F5 canvas with two white page columns titled “Non-designer” and “Designer” in a large serif. Same product, same “Plan my trip” CTA, same teal; different art direction, type and layout.

2. 02
   Navbar (Non-designer)

   Bold serif “wandor” left, centered sentence-case links (Discover, Pricing, FAQ), “Log in” text link and a small teal “Plan my trip” pill right. No bar, border or background.

3. 03
   Hero (Non-designer)

   Left: persimmon eyebrow TRIP PLANNING, PERSONAL, three-line serif headline, gray body, a white prompt card (“Ten days in Portugal in May. Slow mornings, good coffee, tile-covered streets, and one day by the sea…”, cream chips “Kyoto in autumn” and “Highlands road trip”, teal “Plan my trip →” with a glow), an outlined “See how it works” pill beside “Free to start · no card needed”, then a proof row: four colored avatar dots, “Trips planned by travelers in 140+ countries” and a quote. Right: tilted flat-vector map with a dotted route and three floating cards (Casa Pilar, hillside stay; Day 4 · Sunrise hike; Lunch by the harbour).

4. 04
   How it works (Non-designer)

   Eyebrow HOW IT WORKS, serif H2 “From a half-formed idea to a trip you can actually take.”, then four circled serif steps (01 Start with a feeling, not a form. 02 Find places that fit you, with the reason attached. 03 Watch it become days. 04 Then just go.) zigzagging across a thick persimmon vertical rule. Each step has a UI vignette: handwritten postcard, stacked place cards with reason tags, a timed day schedule with day tabs, a LIS ➤ NAP ticket with a dark delay toast.

5. 05
   Product mockup (Non-designer)

   Eyebrow THE PRODUCT, serif H2 “One place for the whole trip, from first idea to last dinner.” left, three teal-numbered points right. Below: a large desktop app window (cream sidebar, “Kyoto & Osaka” itinerary with day tabs and timed stops with tags, map with a dotted route, hotel card “The Celestine Kyoto Gion”) on flat rolling hills, with a “Reservation confirmed” toast and a “Why this order?” explainer card overlapping its edges, grass sprigs and two birds.

6. 06
   Use cases (Non-designer)

   Inset dark rounded panel. Eyebrow TRAVEL IS PERSONAL, serif H2 “Same city. Four completely different trips.”, body, and four persona cards with illustrated icon tiles (The slow traveler active with teal border and arrow, The explorer, The culture seeker, The comfort traveler). Right: cream “Lisbon, slowly” itinerary card under a flat illustration of a Lisbon street with a yellow tram.

7. 07
   CTA (Non-designer)

   Arched-window illustration (sun, lavender hills, sailboat, orange berry vine) on a cream card left; eyebrow READY WHEN YOU ARE, serif H2 “Your next adventure is waiting.”, body and a prompt input (“A week somewhere I can swim in the morning and eat well at night…”) right. The image is cropped here, so no footer is visible.

8. 08
   Navbar (Designer)

   Typewriter-mono “wandor” left, small uppercase DISCOVER, PRICING, FAQS centered, LOGIN and a teal gradient “Plan my trip” button right, all on the pale top of the sky.

9. 09
   Hero (Designer)

   Centered “Where will you go next?”, two-line subhead and a large white rounded prompt box (pre-filled “I’m planning a 7-day trip to Japan in October. I love food, hidden cafés, scenic hikes, and want to avoid crowds....”, upload icon, teal “Plan my trip”). Behind it: painted sky and clouds over a panorama of landmarks (Great Wall, Colosseum, Chichen Itza, mountains, Taj Mahal, Christ the Redeemer) whose bottom edge is cut into a scalloped wave.

10. 10
    Features intro (Designer)

    “A better way to plan a trip” left, “Wandor takes what you want from your trip and turns it into a plan you can actually follow.” right. A plain split line with no visual.

11. 11
    Features (Designer)

    Three zigzag rows, each a color-coded eyebrow and two-line body beside a portrait app screenshot inset on a painted landscape card: PLAN AROUND YOU with the chat start screen (“Where to today, Alex?”), YOUR TRIP, FIGURED OUT with a Venice itinerary chat, LESS PLANNING. MORE WANDERING with the “Ultimate Venice Trip Guide” list on a cherry-blossom temple scene.

12. 12
    Product mockup (Designer)

    “Your Journey Partner” and a centered subhead, then a desktop screenshot (Venice hotel search grid plus a Hotel Danieli detail panel with photos and a Book button) framed by a painted wreath of lavender, daisies, sunflowers and poppies, followed by a centered teal “Plan my trip”.

13. 13
    Brand statement (Designer)

    Painted airplane window looking down on a coastline, then centered “Travel is personal” and a paragraph with three small emoji-style icons placed inside the sentence.

14. 14
    CTA (Designer)

    Painted Chinese pagoda roof, “Let’s make this trip yours” and the hero prompt box repeated on a light gray (#F9F8F6) fill.

15. 15
    Footer (Designer)

    Typewriter wordmark and “Travel planning, made personal.”, three link columns (EXPLORE: Plan a trip, Features, Destinations; COMPANY: About Wandor, Contact, Instagram; LEGAL: Privacy, Terms, Trust Center), a bottom line “wandor. © 2026” / “Made for curious travelers.”, then a full-width sticker collage of landmarks with white die-cut outlines (Sagrada Família, Sydney Opera House, Eiffel Tower, Big Ben, pyramids, Colosseum, Gateway of India, Santorini, a domed mosque).

05Components 23

• Primary button (Non-designer)

  Flat teal (#44B0A4) pill, white medium label, optional → arrow. The hero instance has a soft teal glow shadow; the nav instance is small.

• Primary button (Designer)

  Teal vertical gradient (#6DC4BA to #42ACA3) rounded rectangle, about 10px radius, white label and a faint top highlight. Same “Plan my trip” label in nav, hero, wreath section and closing box.

• Ghost button (Non-designer)

  White pill with a hairline gray border (“See how it works”), followed by gray microcopy.

• Nav links

  Non-designer: sentence case, regular, dark gray. Designer: about 11px uppercase medium, with LOGIN as a plain text link.

• Prompt card (Non-designer)

  White card, about 12px radius, soft shadow; placeholder text on top, a row of cream suggestion chips and the teal pill underneath.

• Prompt box (Designer)

  Large white box with about 24px radius over the illustration; two-line placeholder, upload icon in a small circle bottom-left, teal button bottom-right. Repeated on light gray as the final CTA.

• Suggestion chips

  Non-designer only: cream (#F3EDE3) pills with small dark labels (Kyoto in autumn, Highlands road trip).

• Eyebrows

  Non-designer: short persimmon dash plus 10px tracked caps. Designer: 13px caps, normal tracking, each in a different accent (orange, teal, violet).

• Step markers (Non-designer)

  Circled serif numerals 01–04 in a thin dark ring on a cream fill, stacked above serif step titles.

• Place cards (Non-designer)

  White rows with a small illustrated thumbnail, bold title, gray subline and a pastel reason tag on the right (quiet, good food, slow), stacked with offsets.

• Day tabs (Non-designer)

  Row of cream pills (Thu 8, Sat 10, Sun 11) with one black active pill (Fri 9, Mon 13).

• Tags (Non-designer)

  Small pastel pills keyed by type: teal (Hike · 2h, Slow · 1.5h), cream (Free, Coffee, Food, From Maya), peach (Your Maps pin), lavender (Saved from Instagram), mint (Confirmed, Reserved).

• Toasts and explainer (Non-designer)

  Dark toast with a teal dot (“Bus 5041 is 10 min late. Lunch moved to 12:45.”), white “Reservation confirmed” toast with a check circle, white “Why this order?” card with a lavender plus icon and a reasoned answer.

• Floating info cards (Non-designer)

  White rounded cards over the hero map: bold title, gray subline, a teal dot or lavender swatch, soft shadow.

• Persona selector (Non-designer)

  Dark cards on the espresso panel, each with an illustrated square icon tile, serif name and gray tagline; the active card gets a teal border and arrow.

• Numbered list (Non-designer)

  Teal-tint circles with teal digits 1–3 beside short gray lines.

• Avatar stack (Non-designer)

  Four overlapping solid-color dots (orange, teal, lavender, tan) used as placeholder traveler avatars.

• Ticket card (Non-designer)

  Boarding-pass card: LIS ➤ NAP in serif with a teal arrow, small field labels (Date, Departs, Traveler), cream stub with Trip and Seat.

• App window (Non-designer)

  Rounded window with a cream sidebar (outline icons, counts, active item in teal tint), itinerary column with times and tags, map panel with dotted route, hotel card with an illustrated building and a Confirmed tag.

• Screenshot cards (Designer)

  Portrait rounded cards (about 20px radius) filled with a painted landscape, the app UI inset with even margins; alternate left and right.

• Flower wreath frame (Designer)

  Painted wildflowers wrapped around all four edges of the desktop screenshot, overlapping it slightly.

• Designer app UI

  Inside the screenshots: coral primary buttons, tab bars with a coral underline, Chat / Search / Saved pill switcher, hotel photo cards with heart and plus buttons, star ratings, a teal-tint “Add to trip” button, an iOS promo card and an “AS” user row.

• Footer columns (Designer)

  Small uppercase headings (EXPLORE, COMPANY, LEGAL) over gray 11px links; bottom row of tiny copyright and sign-off text.

06Graphics 11/14

• Dashboard / product UI

  Both, built differently. Non-designer draws its own UI vignettes: floating info cards, place cards with reason tags, a day schedule, a LIS ➤ NAP ticket, a full desktop app (sidebar, Kyoto & Osaka itinerary, map, hotel card) and a Lisbon itinerary card. Designer uses real-looking app screenshots: chat start (“Where to today, Alex?”), a Venice itinerary chat, the “Ultimate Venice Trip Guide” list, and a desktop hotel search with a Hotel Danieli detail panel.

• Photography

  Designer only, inside the product screenshots: Venice hotel photos (Ca’ di Dio, The Gritti Palace, Aman Venice, Hotel Danieli) and itinerary thumbnails. The Non-designer page has no photography.

• Illustration

  The core difference. Non-designer: flat vector with simple shapes and pastel fills (tilted map with mountains, pagoda, lighthouse and balloon; postcard; rolling hill bands; grass sprigs with berries; purple house; Lisbon street with tram; persona icon tiles; arched window with sun and sailboat). Designer: painterly gouache-style art (landmark panorama with a scalloped edge, painted landscapes behind each screenshot, wildflower wreath, airplane window, pagoda roof, die-cut sticker collage of world landmarks in the footer).

• 3D renders

  Only three small glossy emoji-style icons inside the Designer “Travel is personal” paragraph (Colosseum, globe with pin, camera). No 3D renders otherwise.

• Icons

  Lucide-style 1.5px outline icons in both app UIs. Non-designer: sidebar (Overview, Itinerary, Map, Saved, Bookings), arrow in the CTA, check and plus circles in toasts. Designer: app nav (Chats, Explore, Saved, Trips, Updates, Inspiration, Create), upload arrow in the prompt box, heart and plus buttons on hotel photos, star ratings.

• Avatars / people

  Non-designer: four overlapping solid-color dots standing in for traveler avatars in the hero proof row. Designer: an “AS” initials avatar for Alex Smith inside the app screenshot. No faces.

• Gradients

  Designer: the hero sky fades from near-white under the nav to light blue at the horizon, and the CTA button has a vertical teal gradient. Non-designer: flat fills, apart from a faint teal-to-white wash on the highlighted itinerary row.

• Texture, grain or pixel

  Designer illustrations carry visible painted grain and brush texture (gouache on paper feel). The Non-designer art is perfectly flat.

• Grid lines / patterns

  Non-designer only: faint contour lines on the hero map, dotted route lines with ring pins on both maps, ruled address lines on the postcard. The Designer page has none.

• Device or browser frames

  No browser chrome or device bezels in either. Designer insets screenshots on rounded painted-landscape cards (wallpaper-style framing) and puts the desktop shot inside a flower wreath; Non-designer uses a plain rounded app window with a soft shadow.

• Maps

  Non-designer only: the illustrated hero map with a dotted route and pins, and the product map panel with a teal dotted route (Fushimi Inari, Weekenders, Nishiki, Gion Karyo). The Designer page shows only an address pin in the hotel panel.

Not usedCharts & data viz · Logo cloud · Cursors / pointers

07Motion

SubtleFrom stills; motion is inferred from cues

• implied
  Typewriter placeholder

  Both heroes show a filled example prompt ending in an ellipsis (the Designer one even ends “crowds....”), which suggests example trips typing out and cycling in the input.

• implied
  Floating cards

  Non-designer: the three cards around the hero map and the toasts around the app window are offset and shadowed like elements meant to float or slide in.

• implied
  Route draw-in

  Non-designer: dotted routes with ring pins on the hero map and the product map read as paths that draw in stop by stop.

• implied
  Persona switcher

  Non-designer: the active persona card with an arrow implies clicking a persona swaps the “Lisbon, slowly” itinerary on the right.

• implied
  Live update toast

  Non-designer: “Bus 5041 is 10 min late. Lunch moved to 12:45.” and “Reservation confirmed” are notification states, likely animated in.

• implied
  Drag to reorder

  Non-designer copy says “Drag anything. It re-flows.”, implying a reordering demo in the day schedule.

• implied
  Scroll reveal

  Designer: the spaced zigzag feature rows and isolated illustration beats suit staggered fade-ins, but nothing in the still proves it.

08Copy

Non-designer: “Turn travel ideas into real trips.” / Designer: “Where will you go next?”

Non-designer: “Tell Wandor where you want to go, what you love, and how you like to travel. It turns all of that into a trip worth taking.” / Designer: “Tell our AI where you’re going and what you love. We’ll create a personalized itinerary for you.”

Tone

Non-designer: warm, specific and slightly literary (“a feeling first, then places, then days, then the door closing behind you”), with concrete examples in every block and microcopy like “Free to start · no card needed”. Designer: shorter and more generic (“A better way to plan a trip”, “Your Journey Partner”), naming the AI outright (“Tell our AI…”) and leaving the emotion to the images. Both share “Plan my trip” as the only CTA label.

09Style

The same warm travel promise told two ways: the Non-designer page is a tidy editorial product tour in flat vector, the Designer page is a storybook of painted destinations with the product kept in the background.

Accessibility

Both use white text on mid teal for the main CTA, which fails AA: #44B0A4 is about 2.6:1 (Non-designer) and the Designer gradient runs about 2.0–2.7:1. Non-designer eyebrows are about 10px tracked caps in persimmon (≈3.9:1), below AA for text that small, and mockup text is 8–10px with light gray sublines (#9B9A97, ≈2.8:1). Designer body gray #747474 passes (≈4.7:1), but section subheads (#878787, ≈3.6:1) and the teal eyebrow (≈3:1) do not; the hero subhead on the painted sky is about 4.7:1. Designer screenshots are shrunk until unreadable and only work as pictures. The emoji in “Travel is personal” will be read aloud mid-sentence by screen readers unless marked decorative. The Non-designer dark panel has excellent contrast (≈15:1). No focus states are shown.

10Takeaways