Note: This page is only visible in non-production environments. It serves as a reference for all design tokens and components used across the marketing site.

Colors

Dark

brand-dark

#1E1F1F

White

brand-white

#FAFAFA

Cream

brand-cream

#F0EEE9

Stone

brand-stone

#E0DCD3

Lime

brand-lime

#EBFD90

Typography

The quick brown fox jumps

The quick brown fox jumps over the lazy dog

P1 (Large Body)

PHAiTO reduces editing time by up to 90% while maintaining your unique style. Built for professional photographers who value their time.

P2 (Body)

PHAiTO is an AI-powered photo editing tool designed specifically for professional photographers. It learns your editing style and applies it consistently across entire shoots.

P3 (Small / Editorial)

Credits have an expiry date based on when they were purchased. Visit our pricing page for full details on plans and credit packages.

Buttons

Primary

Start Free Trial

Secondary

Learn More

Accent

Selector

Monthly

Selector Accent

Annual

Section Label

Getting Started

Section labels are used to introduce groups of content, such as FAQ categories or feature sections.

FAQ Accordion

This is an example of the FAQ accordion component. It displays a question that can be expanded to reveal the answer. The component uses Alpine.js for toggle behavior and smooth transitions.

Yes, the accordion content slot accepts any HTML or Blade content, so you can include lists, links, images, or other components inside the answer area.

Process Step

First Step

This is an example of the process step component. It shows a numbered step with a title and description.

Second Step

Process steps are typically used in groups of three to illustrate a workflow or sequence of actions.

Third Step

Each step has a prominent number, a bold title, and supporting description text.

CTA Block

This is a CTA block

CTA blocks appear at the bottom of pages to drive conversions with a clear call to action.

Example Button