# perspectas.ch URL: https://sola.ysz.life/projects/perspectas > A consulting site built around one yellow dot - Type: Commercial project - Period: Sep 2026 - Live: https://www.perspectas.ch - Source: private - Stack: Next.js App Router, React, TypeScript, Tailwind CSS, shadcn/ui, Motion, Sanity, SEO, Base UI perspectas gmbh is a consulting and recruiting firm in Wetzikon, near Zürich, run by two partners. Its website is in German and speaks to two audiences at once: companies that need help with staffing, and people looking for their next role. ## Website for perspectas, a consulting and recruiting firm perspectas gmbh is a Swiss firm whose two partners advise companies on staffing, recruit for them and run projects such as succession planning. I designed and built their website, [www.perspectas.ch](https://www.perspectas.ch), and set it up so they can write and publish everything on it themselves. The site had three jobs: - **Explain the firm in a few screens.** What they do, how they work and who they've done it for. - **Make a first conversation easy to book.** Every page has a «Termin buchen» (book an appointment) button in the corner, with a booking calendar for each partner. - **Stay in their hands after launch.** Adding a project or rewording a paragraph shouldn't mean writing to a developer and waiting for a reply. ![The perspectas home page arriving: the headline perspectas gmbh – Partner für Personalfragen comes in word by word and its full stop springs in as a yellow dot, then the line Beratung. Recruiting. Projekte., a short intro and the buttons Termin buchen and Unsere Leistungen fade up beside the partners' blurred avatars](https://sola.ysz.life/projects/perspectas/home-desktop.webp) *The headline lands, and its full stop is the logo's yellow dot.* [Video](https://sola.ysz.life/projects/perspectas/home-desktop.mp4) ### The services The home page sets out the services as an accordion. Every title stays in view and the first one is open when you arrive, so it's clear the others hold more. Opening a service closes the one before it, and each lists what it includes, such as research, assessments or onboarding. A card under the list invites visitors to talk through their own situation. ![The Unsere Leistungen accordion: Nachfolge & Schlüsselpositionen is open with its text and a two-column list of the services it includes; Teamaufbau & Integration and then Consulting & Sparring für Führungskräfte & HR open in turn, each closing the one before](https://sola.ysz.life/projects/perspectas/services.webp) *One service open at a time.* [Video](https://sola.ysz.life/projects/perspectas/services.mp4) ### How they work, and the tagline Below the services, two cards say how the firm works and how it thinks about people. Then comes the question behind the tagline on the logo, «Design your talents». The heading flashes in the logo's yellow as it scrolls into view, and the answer beside it brightens word by word as you scroll, until the whole paragraph is lit. ![Scrolling past the cards So arbeiten wir and So denken wir to the heading Warum «Design your talents»?, which flashes yellow, while the paragraph beside it turns from pale to dark one word at a time](https://sola.ysz.life/projects/perspectas/statement.webp) *The answer lights up as it scrolls into place.* [Video](https://sola.ysz.life/projects/perspectas/statement.mp4) ### Testimonials Clients and candidates vouch for the firm in their own words. On the home page their quotes run in a slider, each cut to five lines, and «Weiterlesen» (read more) opens the full text over the page. A page of its own shows every testimonial in full. ![The slider under the heading Warum man auf uns zählen kann?: quote cards with company logos move along twice, then Weiterlesen opens one quote in full in a dialog over the dimmed page; the authors' names and photos are blurred](https://sola.ysz.life/projects/perspectas/testimonials.webp) *The slider, and one quote opened in full.* [Video](https://sola.ysz.life/projects/perspectas/testimonials.mp4) ### Projects and open positions Projects are the part of the site that grows. Each one starts as a card with a photo and a short summary. Once the partners write the longer text, it becomes a case-study page, with the key facts in a column beside the text and a way to book a call about it. ![A project page titled Nachfolge und Zukunftplanung: a blurred byline, a summary and a photo of circuit boards, beside a column listing Datum, Kunde, Leistung, Format and Dauer above two booking buttons](https://sola.ysz.life/projects/perspectas/project-page-desktop.webp) *A project page, with its facts beside the text.* The firm's job ads live on a Swiss job platform. Instead of copying each ad into the site, the page shows the platform's own list, restyled in the site's colours. When the partners post or close a position there, the site follows on its own. ![The aktuelle Stellen section: a short intro above a white card listing open positions, each with its title, workload, type of employment, employer and town](https://sola.ysz.life/projects/perspectas/jobs-desktop.webp) *The job list, embedded in the page.* ### Design, in light and dark The design takes one thing from the logo: the yellow dot. It's the only accent colour on the site, on an off-white page with the corporate grey for text, and it marks whatever needs marking, from the headline's full stop to the bullets in the service lists. The site follows the visitor's light or dark setting, and the button in the bottom corner switches by hand, with the new scheme opening as a circle from the button. ![The Projekte & Stellen page switching from light to dark and back, each time the new scheme spreading as a circle from the button in the bottom-right corner](https://sola.ysz.life/projects/perspectas/theme.webp) *The dark scheme opens from the corner button.* [Video](https://sola.ysz.life/projects/perspectas/theme.mp4) ### Editing without a developer The site is built with Next.js, and every text and picture on it lives in Sanity, a content editor the partners open in their browser. They edit the services, projects and testimonials there, and when they publish, the change is on the live site straight away. Anything they'd rather not show for now can be switched off instead of deleted. ![Projekte & Stellen in the dark scheme: the headline Aus unserer aktuellen Beratungs- & Projektarbeit and an intro above two project cards with photos](https://sola.ysz.life/projects/perspectas/projekte-dark.webp) *Projects in the dark scheme.* ![The home page on a phone: the headline with its yellow full stop, the tagline, the intro and the two buttons, with the partners' avatars blurred](https://sola.ysz.life/projects/perspectas/home-mobile.webp) *Home on a phone.* ![The services on a phone: Nachfolge & Schlüsselpositionen open, with its text and the list of services it includes in one column](https://sola.ysz.life/projects/perspectas/leistungen-mobile.webp) *The services on a phone.*