Claude Design · Export

SoiTarot — The Crescent Eye

The complete design system behind soitarot.vn — brand, color, iconography, components, motion, and the homepage directions explored before the build. Designed in Claude Design and shipped solo in roughly one week.

These are the actual working artifacts, not a cleaned-up portfolio reconstruction. Pages are in the project's native Vietnamese; CTA and favicon links point at the live site.

21 artifacts 5 categories Type · Fraunces / Inter / JetBrains Mono Palette · Navy · Gold · Lavender

01

Foundations

↗

Brand Guidelines

The Crescent Eye — positioning, voice, logo usage, do & don't.

↗

Color System

Core palette, semantic tokens, gradients and surface roles.

↗

Logo Directions

Mark explorations and lockups for the crescent-eye identity.

↗

Favicon & App Icons

Favicon set, touch icons and platform sizing.

02

Iconography

↗

Icon Set — Suits & Zodiac

Tarot suits and zodiac glyphs drawn as a cohesive set.

↗

Icon Style Sample

Stroke, weight and corner study for the icon language.

03

Components

↗

UI Components

Buttons, cards, inputs and the core component inventory.

↗

Patterns & Graphics

Celestial textures, motifs and decorative graphics.

↗

Sticky CTA Bar

Persistent conversion bar pattern and states.

↗

Loading Indicators

Spinners and progress treatments in-brand.

↗

Tarot Card Loaders

Card-flip and shuffle loaders for the draw flow.

04

Motion

↗

Motion Spec

Timing, easing curves and transition choreography.

05

Homepage & Hero

↗

Homepage Directions

Three full homepage concepts on an interactive canvas.

Interactive ↗

Tarot Fan Hero

The fanned-deck hero — chosen direction.

↗

Tarot Fan Hero v1

Earlier hero with the spread chooser.

↗

Tarot Fan Mobile

Mobile adaptation of the fan hero.