Dating app
One to One
Building the brand, app and acquisition journey for a dating business.
- My scope
- Brand strategy, visual identity, UX/UI & development
- Built with
- React · JavaScript · CSS · MailerLite
- Current stage
- Brand system, interactive prototype & website
01 / The idea
A product rule became a visual language.
One to One starts with a deliberate membership model: balanced admissions, considered introductions and interest that becomes a connection when it is mutual. My work was to make that proposition understandable before someone joined, then carry it into the way the app behaves.
The central idea is “Rare Alignment.” Two crescents represent separate paths meeting at a shared point of light. That gives the identity a useful visual vocabulary: paired forms, soft light, orbital movement and space around each person.
02 / Color as a system
Purple connects the atmosphere to the interaction.
The near-black plum ground and lavender light create a quiet, nocturnal setting for the alignment idea. The palette moves from darkness to light, just as the symbol does. Purple connects the campaign imagery, the brand mark and the product.
#0B0712Page ground#170226Raised surfaces#2C1248Card surfaces#4A1D6BInterest actions#7950A8Selection & glow#BDA6D8Secondary text#F0EAF5Primary textAubergine is reserved for expressing interest. Opal carries primary text and key controls; lavender supports secondary information. Mint is a separate semantic accent for verification.
The token rules also set limits: ultraviolet is for selection and glow, not body text. Status always includes a label, so color is never the only way to understand it.
03 / Typography
An expressive voice. A readable interface.
The app pairs Cormorant Garamond with Jost. Cormorant’s fine strokes and contrasting forms give names and display lines a personal, editorial quality. Jost brings a steady geometric rhythm to instructions, navigation and controls. The contrast lets the brand feel distinctive while the interface stays familiar.
Some people
just align.
A little more context.
A more considered connection.
The system codifies size, weight, line height and tracking. Wide uppercase labels support the identity; sentence-case body copy stays quieter. The selected Google Fonts families translate the original visual direction into usable web type.
The public website uses Jost with Geist for its longer explanations. The shared palette and spacing keep the site and app related without forcing every surface to use the same type hierarchy.
04 / Product design
Make the introduction about a person.
The profile brings identity, a short biography, shared interests and recent moments into one view. Interest tags are entry points into what someone does, rather than decoration below a photo. This gives the next action a reason: there is something specific to respond to.
I kept the decision controls together and used one consistent treatment for verification. The crescent mark, lavender hairlines and pill-shaped controls carry the identity into everyday interactions, without competing with the person.
05 / Interaction logic
One decision, consistent everywhere.
Discovery uses recent posts and shared interests to make introductions more specific. In the React prototype, the feed, profile and post views all call the same expressInterest function. That keeps the behavior consistent whichever route someone takes.
If the other person has already expressed interest, the prototype records an alignment and opens the mutual moment. Otherwise, it records the interest as sent. Decisions also remove handled introductions from the active flow. The interaction is modeled in React state with sample members; a production matching service is a separate build phase.
06 / Under the interface
From brand rules to reusable React components.
I structured the interface as a token layer, a component library and composed screens. Named values for color, typography, spacing, radii and motion become CSS custom properties. A change to an action color or control height can then flow through the system instead of being repeated screen by screen.
The library contains 20 React components, with typed prop definitions and individual previews: buttons, form fields, profile cards, sheets, verification badges and navigation. Controls accept state and event handlers from the screen. Lucide provides the interface icons; the crescent remains a separate brand asset.
Design tokens
tokens.json → CSS custom properties
React primitives
Button · ProfileCard · VerificationBadge · TabBar
Screens & state
Discover → expressInterest() → Aligned
/* Button: shared visual rules */
background: var(--surface-accent);
border-radius: var(--radius-pill);
font: var(--text-label);07 / The public website
The website is the company’s first conversation.
The homepage brings the business proposition, membership rules and invitation to join into one narrative. The opening makes the benefit immediate; the following sections give it substance. The same identity connects a visitor’s first impression to the product they are being invited into.
I structured the journey around four questions: why this app, how membership works, what creates trust, and what happens after applying. Repeated waitlist invitations give readers a next step at different levels of readiness. Each supporting page provides a deeper explanation and a route back to the application.
Positioning & membership
Give the promise a visible mechanism.
The ratio section connects the name to an admissions rule. Paired counters and a balanced bar turn an abstract promise into something a visitor can understand at a glance. The explanation then covers the consequence: one side may need to wait.
This is a qualification step in the funnel. It sets expectations before the form and gives the waiting period a reason. The dedicated Ratio article expands the city-by-city model and distinguishes membership balance from the number of people online at any moment.
Trust & product education
Explain what sits behind the badge.
The website separates human approval from identity verification, giving each a visual process and a plain-language explanation. This makes the intended membership standard understandable before asking someone to share their information.
Verification, Standards and Safety then address different concerns: how identity is checked, what behavior is expected, and how members can seek help. These pages document the product’s intended operating model; the case study does not treat those policies as proof of a launched verification service.
Journey & conversion
Make the next step predictable.
The joining sequence gives the visitor a route from the waitlist to admission, application, verification and their first introductions. Showing the sequence helps explain why joining a list does not mean immediate access to the app.
The homepage also connects product previews, the founding-members offer, community standards and frequently asked questions. Together, they address the experience, the commitment and the remaining uncertainty before the final invitation. These are distinct parts of one acquisition journey.
Content & discoverability
A useful page for each important question.
I extended the homepage into seven focused articles. Each uses the same reading layout, an on-page contents list and related links. Visitors can enter through a specific question and still find their way to the wider product story and waitlist.
- The Ratio
- Explains paired admissions, local balance, waiting and the limits of the promise.
- Verification
- Separates approval from identity checks and explains the intended handling of verification data.
- How It Works
- Connects the joining steps, expressions of interest, conversations and membership expectations.
- Standards
- Defines conduct, authenticity and enforcement as part of the community proposition.
- Safety
- Organizes guidance on blocking, reporting, meeting someone and recognizing scams.
- FAQ
- Groups practical objections around the ratio, privacy, using the app and managing an account.
- About
- Explains Rare Alignment, the reason for building the business and its product tradeoffs.
The site implementation includes clean routes, canonical URLs, social preview metadata, structured data, a sitemap and internal links between related topics. These provide a discoverable content structure; search rankings are not claimed as an outcome.
Privacy and Terms pages sit alongside the product articles and are linked from the application’s consent statement. That keeps the practical and policy details accessible at the point where someone decides to join.
08 / The application funnel
Build the path from interest to a waitlist.
The public site is built with HTML, CSS and JavaScript. It explains the membership model before asking someone to apply. Self-hosted Jost and Geist fonts, responsive layouts, reduced-motion rules and dedicated pages for the product’s core questions support a consistent experience beyond the homepage.
The waitlist endpoint is implemented as a Vercel serverless function. It validates email, age, required fields and consent on the server, then creates or updates the subscriber in MailerLite and assigns the appropriate group. Credentials stay on the server. An optional Telegram notification is isolated so its failure does not invalidate a successful signup.
Lead capture & qualification
Collect context the business can use.
The form asks for location, age and relationship intent alongside contact details. Those fields support the membership proposition and the city-based admissions model. Instagram and a short motivation are optional, so visitors can add context without every detail becoming a requirement.
Client-side validation provides immediate feedback; the server checks the submission again. MailerLite stores the subscriber and group for follow-up. The confirmation state explains what comes next, and failed requests offer a way to try again. This establishes the capture and segmentation foundation for the business’s email funnel.
- ApplicationForm + consent
- ValidationServer-side checks
- MailerLiteSubscriber + group
- ConfirmationSuccess or retry
09 / What this work produced
One concept, carried through the build.
The result is a connected foundation for the business: a recognizable identity, documented interface rules, an interactive product prototype and a website with a waitlist integration. Each layer makes the original idea more concrete.
- Brand
- Crescent identity, seven-color palette, typography, imagery and voice.
- System
- Design tokens, 20 React components and documented interaction states.
- Product
- Connected discovery, profile, interest and alignment flows in the prototype.
- Website & content
- Homepage, seven supporting articles, policy pages and a connected reading journey.
- Acquisition
- Application design, qualification fields, consent and a server-side MailerLite integration.
The app screens show a prototype with sample content. Identity verification, subscriptions and production member data are not presented here as launched services.
