# ANVL: Designing order into a complex tool.

> How we connected product structure, visual identity and a website around one daily workflow.

Page: https://jtstudio.design/work/anvl/

- Project: Product Design · Web Experience
- Category: Trading & Technology
- Services: Product design · Brand identity · Web experience
- Live website: https://anvl.trade/
- The Path: Product structure → Identity → Website
- The Work: Interface hierarchy, Visual language, Website design

## 01. A lot to hold. A clear order.

ANVL needed to bring checklists, preparation, trade entries, charts and review into one interface. The design challenge was to give that volume of information a clear order without making every element compete for attention.

We used the trading day as the structure: preparation above execution, then a separate place for review. That decision gave us a hierarchy for the product and a narrative for the website.

## 02. The hierarchy, screen by screen.

## 03. Restraint, with a purpose.

We used near-black surfaces and fine dividing rules to organize dense content without outlining everything in a heavy box. Blue identifies selected controls and key actions; quieter text lets supporting labels recede.

We carried the angular ANVL wordmark into a typographic system: Archivo for direct, prominent headlines and JetBrains Mono for compact labels. The website uses the same contrast at a larger, more editorial scale.

Typography: Archivo / Jetbrains Mono.

Palette: Canvas #08090C, Structure #242832, Signal #4D8DFF, Clarity #A8D2FF.

## 04. One language. Across the tool.

The playbook needed a different kind of reading: rules and annotated examples rather than rows of figures. We organized the content into named sections while retaining the same labels, accents and surface hierarchy as the journal.

Shared setup names connect the playbook with trade entry and review. Repeating that vocabulary keeps the relationship between those screens explicit, even when their layouts differ.

> Calendar for overview. Tables for comparison.

## 05. Make file ownership tangible.

Local file storage changes how someone starts using ANVL. Instead of a familiar account sign-up, they choose a folder. The website needed to explain that difference before asking them to open the tool.

We made the explanation concrete with a folder structure and plain-language copy. Showing where a day and its screenshots live makes the storage model visible without turning the page into technical documentation.

## 06. Show the work. Explain the why.

For the public website, we changed the pace. Large headlines introduce one idea at a time, and actual interface captures demonstrate the product. We led with the routine, followed with the workflow and file ownership, and kept the invitation to open the journal consistent. The page also states the tool’s desktop-first limitations.

## 07. One idea. Two experiences.

The completed work connects a dense working interface with a more spacious public website. Their layouts serve different purposes, but the hierarchy, typography, accents and routine-first story give them a shared identity.

Product screens display ANVL’s public sample data, not actual trading results.

[All case studies](https://jtstudio.design/work/) · [Book a discovery call](https://jtstudio.design/book/)