What a long-awaited sister reunion, a lovingly designed website, and an unexpected dark-mode surprise taught me about building digital experiences for real people.
It Started With a Countdown to a Hug
The first thing I created for our next sister reunion wasn't a packing list or an airline reservation.
It was a countdown.
My sister and I live in different states, and for years, much of our relationship has happened over the phone. We share stories, laugh together, catch up on life, and talk about all the things we want to do when we're finally together again.
But there's something about being in the same room that a phone call simply can't replace.
We've talked about having an entire week together for a long time. Not a hurried weekend or a visit squeezed between responsibilities. A real Sister Week, with time to explore, relax, laugh, and make memories.
Our next reunion is planned for April 2027. And although it's still months away, I wanted us to have something we could look forward to together. So I decided to surprise her with a website.
Not just a travel itinerary. A beautiful little digital home for our next adventure, something we could revisit, dream over, add to, and change as the trip grew closer.
At the top, I placed a countdown to our reunion. Underneath it, a message: “…every second closer to a sister hug ♥”
And then I began filling the pages with possibilities.
There were imagined photographs of the two of us living our best future Sister Week, little glimpses into moments we hadn't experienced yet. Soft cream backgrounds, warm coral accents, touches of pink, and beautiful images of gardens, ocean views, small towns, and scenic escapes.
I mapped out everything from her journey from Oregon to the Bay Area and my picking her up at the airport to our eventual goodbye hug. Perhaps we'd wander through peaceful Japanese gardens, shop for flowers and strawberries at a farmers market, catch a ferry across San Francisco Bay, or explore the waterfront. Maybe we'd head to Monterey and Carmel. Maybe we'd drive to Lake Tahoe, watch the sunset over the water, and find somewhere cozy to stay.
I created filters for distance, price, mood, and setting. There were free attractions, bigger adventures, reservations to plan for, and local places we might otherwise overlook. And I designed three different versions of our week: a balanced Bay Area itinerary, a Tahoe adventure, and a third option called “Low-Key & Lovely.”
That one might have been my favorite.
Because some of the memories I most look forward to making don't require tickets or reservations. I imagined coffee in pajamas, strawberry shortcake from the market haul, board games, a movie marathon, face masks, music, and conversations that could go on for hours. I even added an idea for us to print photographs, make a scrapbook, and write letters to open before our next reunion.
One of my favorite lines on the website was: “The house is also a destination.”
After spending so much time connecting from different states, simply being together would be enough.
I wasn't really building a travel website. I was building a place for us to hold our excitement until we could finally hold each other.
When I sent her the link, she was touched by the surprise and the thought behind it. Then I saw what the website actually looked like on her phone.
My Beautiful Pastels Had Turned Into Something Else
I had designed an airy, romantic experience with soft creams, peach, coral, and delicate pastels.
My sister was viewing it on a Samsung phone with dark mode enabled and an autumn-inspired device theme. On her screen, my dreamy springtime Sister Week had taken on a decidedly dark, fall-inspired personality.
Large sections appeared in deep browns. Some headings were difficult to read. Buttons blended into their surroundings. Parts of the page no longer looked anything like the experience I'd carefully designed.
It was almost comical. I imagined spring flowers, coastal sunsets, and leisurely afternoons. Her screen looked closer to a moody October evening.
I had spent so much time thinking about what I wanted her to see that I hadn't fully considered how she would actually see it.
Suddenly, a personal project became a lesson in dark mode website design, accessibility, and the limits of any one person's preview.
Same Website. Different Experience.
We tend to think of a website as a finished visual product. We choose the fonts, photographs, buttons, colors, and layout, then preview it on our own device. But the visitor's experience is shaped by more than the designer's choices.
A website passes through several layers: the operating system, browser and rendering engine, website CSS, display and accessibility settings, and sometimes automatic theme transformations.
An iPhone using Safari can display a page differently from a Samsung phone using Chrome or Samsung Internet. That doesn't make one device right and the other wrong; it means designers need to understand the combination of software and preferences involved.
Crucially, system dark mode, a dark browser interface, a website's own dark palette, and automatic browser darkening are different things.
Samsung's developer team has documented how its browser can transform website colors, sometimes making text over images or small icons difficult to distinguish. Samsung also recommends testing interfaces in both light and dark modes.
But there is an important detail in my own story: my sister's screenshot showed Chrome on Android, not Samsung Internet. Her autumn phone theme was part of her personalized experience, but a seasonal device theme does not automatically recolor every website. Without isolating the exact browser settings and CSS behavior, I cannot establish which mechanism caused each color change.
That distinction matters. Good troubleshooting starts with the actual device and evidence, not assumptions.
Dark Mode Is Not a Small Audience
Some useful research puts this issue into perspective.
In a February 2024 YouGov survey of 2,561 British adults, 29% preferred smartphone dark mode while 58% preferred light mode. This is a preference survey in Britain, not a global usage measurement, but it shows why designers shouldn't assume every visitor uses the same setting.
Statcounter's September 2026 U.S. mobile vendor measurements attributed 53.58% of mobile web activity to Apple and 28.11% to Samsung, or about 81.7% combined. These figures reflect measured web activity, not the number of smartphones Americans own. And even two people with the same model may use different browser and display settings.
Personalization goes beyond dark mode. In an April 2026 YouGov survey of 4,090 U.S. adults, 32% named autumn their favorite season. That does not tell us how many people apply autumn phone themes. It simply illustrates how different visual preferences can be.
A visitor may enlarge text, enable a high-contrast mode, choose color-correction settings, use a browser's darkening feature, or customize their device. They shouldn't have to abandon those preferences to use a website.
When Beautiful Becomes Unreadable
My sister's screenshot revealed something more serious than an unexpected palette. Some text lacked enough contrast against dark brown backgrounds, and some buttons lost their visual definition.
According to the World Wide Web Consortium's WCAG 2.2 contrast guidance, ordinary text generally needs a contrast ratio of at least 4.5:1 to meet Level AA. Large text has a 3:1 threshold; important non-text interface elements are covered by separate contrast requirements.
A soft pastel interface can fail those standards just as easily as a dark one. And a design that looks compliant in one mode may become difficult to use when its text, backgrounds, or overlays are transformed independently.
For a business, the consequences can go beyond aesthetics. Imagine someone trying to register for a webinar when the sign-up button blends into the page, or a shopper unable to read a price. A visitor doesn't need to know anything about CSS to know the experience isn't working.
When usability fails, accessibility, trust, and conversions can all suffer.
Seven Lessons Every Website Creator Should Learn
- Test real devices, not just your own preview. Open the site on iPhone Safari, Android Chrome, and Samsung Internet when possible. Responsive desktop simulations are helpful, but they cannot reproduce every real-device behavior.
- Test light mode and dark mode separately from automatic darkening. A dark browser toolbar doesn't necessarily mean the website itself has changed. Know which feature you're evaluating.
- Design foreground-and-background pairs. Treat headings, buttons, borders, icons, links, and their surfaces as a complete color system, not isolated attractive colors.
- Measure accessibility. Check contrast, focus indicators, zoom, large text, and keyboard navigation. Readability should be measurable as well as beautiful.
- Check real mobile interruptions. Floating chat icons, sticky Shopify navigation, picture-in-picture windows, mobile browser bars, and keyboards can obscure content regardless of theme.
- Use browser testing tools. Chrome DevTools' Rendering tools support testing color-scheme preferences and other display behaviors. Test the result rather than trusting what the code appears to intend.
- Ask someone else to open the finished experience. Choose someone with a different device or settings. Don't coach them. Ask what they notice, what they can read, and where they would click.
The seventh lesson may be the most revealing of all.
What AI Website Builders Need to Remember
AI can help transform an idea into an interactive digital experience remarkably quickly. That's part of what made this project so joyful: I could keep adding loving details without treating every new feature as a major development effort.
But AI-generated code isn't automatically well tested. CSS can look reasonable while behaving poorly when combined with an existing Shopify theme, third-party navigation, browser transformations, or accessibility preferences.
Developers can use the CSS prefers-color-scheme media feature to create intentional light and dark styles. A supported color-scheme declaration tells browsers what an interface can handle. In some cases, color-scheme: only light can prevent an unintended automatic transformation of a deliberately light interface. None of these is a universal accessibility fix.
A good implementation provides readable color pairs for every supported scheme, tests actual devices, respects appropriate user preferences, and verifies the final page after all hosting-platform components load.
I now see dark-mode and cross-device checks as part of the same release discipline as proofreading, links, forms, payments, performance, and analytics. It's also consistent with a lesson I explored in what rebuilding my own website taught me about brand architecture: good digital strategy demands looking beyond the visible surface.
A website isn't ready simply because it looks finished. It's ready when real people can use it.
The Best Design Lesson Came From Someone I Love
My sister and I still have months before our reunion. The countdown is still running. The adventures are still waiting. We can change our minds about Monterey, Tahoe, or San Francisco a dozen times before April arrives.
Maybe we'll choose a packed day of sightseeing. Maybe we'll spend an entire afternoon on the couch, drinking coffee, laughing, and remembering stories from years ago.
Either way, our little website gives us something to share while we're apart.
And now, when I think about what happened with her phone, I smile.
My sister didn't set out to teach me a lesson about cross-device testing, dark mode, or accessibility. She was simply opening a surprise from someone who loves her.
But she reminded me of something I should have considered all along: Sometimes the most important part of designing for someone isn't what you create. It's understanding how they'll experience what you've created.
I wanted her to feel the love I'd poured into every page. And even though her phone changed the colors, it didn't change the meaning.
The countdown is still counting.
And every day brings us a little closer to that sister hug. ♥
Field Notes is where Alicia Gonzalez shares real-world lessons from building with AI, creating digital experiences, and exploring the intersection of technology, business, and everyday life. Illustrations in this article are representative mockups, not screenshots of the private planning website.
