[ Principles ]

Color is function,
not decoration.

Inspired by Dieter Rams: good design is as little design as possible. The base is warm and achromatic; the signal accent appears alone, rarely, only on operational controls — rarity is what gives the signal its strength.

[ Color ]

Tokens

Accent rule

Signal Red means action. It appears in isolation, on a single functional control at a time — never as ornament. On the site it lives only in the menu CTA hover.

[ Typography ]

Aeonik scale

Display · 700

Heading · 500

Body · 400 — the portfolio's long-form text uses Aeonik Regular with generous breathing room.

Meta · 500 uppercase · tracking 0.14em

[ Grid · Space · Motion ]

Structure

Animations respect prefers-reduced-motion.

[ Components ]

Catalog

Menu call to action

Navigation menu

Let’s talk

Tag

Cases, articles and dates

UX · AccessibilityWebApp · AI-assisted dev

Card with solid shadow

Article covers and carousel slides

Creeta Saúde Respiratória

Sitecreeta.com.br
Phone(48) 3234-9919

Pill

Double Diamond nodes and card buttons

The right problemDirections

Progress bar

Article carousel: shows how much is left to scroll

Outline button

Summary PDF download

Download the summary (PDF)

Call-to-action block

End of every article

Want a site that works for you?

WhatsApp (opens in a new tab)How I work

Previous and next

End of every article

PreviousArticle titleTopicNextArticle titleTopic

External link

Project mentioned in text: arrow for sighted users, notice for screen readers

leandroboeira.com (opens in a new tab)

Double Diamond

Home and process page; horizontal on wide screens, vertical on phones

The process on the Double DiamondTwo diamonds in sequence. In the first, understand and analyse, then decide what to do: it goes from your pain to the right problem. In the second, a clickable prototype, then test and adjust: it goes from the right problem to the live site. Around each diamond, a larger dashed outline shows what AI widens.DISCOVERUnderstandand analyseDEFINEDecidewhat to doDEVELOPClickableprototypeDELIVERTestand adjustYour painThe right problemSite is liveThe process on the Double DiamondTwo diamonds in sequence. In the first, understand and analyse, then decide what to do: it goes from your pain to the right problem. In the second, a clickable prototype, then test and adjust: it goes from the right problem to the live site. Around each diamond, a larger dashed outline shows what AI widens.DISCOVERUnderstand and analyseDEFINEDecide what to doDEVELOPClickable prototypeDELIVERTest and adjustYour painThe right problemSite is live

The usual Double Diamond: open up, choose, open up again, deliver.

What AI widens: more paths explored and tested in the same time.

[ Content ]

Article kit

The system doesn’t stop at the site. Every article ships with three pieces in the same design, generated from a single file: what goes to Instagram is the same thing shown on the page.

Animated cover

1600 × 900 · 8 s looping video

The static image is the search and sharing version; the video plays on top and stays off with reduced motion.

Carousel slide

1080 × 1350 · nothing below 24 px

One subject per slide. Every slide has alt text on the page.

PDF

Summary PDF

One slide per page

Real text, selectable and tagged for screen readers.

[ Accessibility ]

Contrast & focus

ParTokensRatioWCAG

Every focusable element has a visible focus ring (press Tab to see).

On dark surfaces the focus ring is light, so it doesn’t disappear.