Felipe Cesar Flores

Product design and front-end engineering

São Paulo, Brazilfelipecesarrf@gmail.comGitHub
Full-Stack EngineerFront-End SpecialistProduct Design EngineerAI Engineer

Sierra and Memobook design systems

Sierra

English conversation with in-message feedback.

Sierra

Tell me about something that happened at work yesterday. Keep it simple—we can polish it together.

Yesterday I have a meeting with my team. We talked about the next release.

Good. Your meaning is clear. Because the meeting finished yesterday, use had instead of have.

Try “Polish my English” below the message. Text stays in this local preview; voice and sources are not connected.

Conversation

Unboxed answers and a secondary surface for learner messages.

Message feedback

Corrections, practice tips and alternatives in the message’s own popover.

Composer

A fixed place to reply while the conversation scrolls.

Starting a conversation

The same composer, with more room for the first prompt. The conversation uses its compact variant.

Enter sends. Shift + Enter adds a line.

Shared controls

The buttons, fields and status labels used across Sierra. Hover or focus the samples to inspect their states.

The dialog is local. No session will be changed.

Buttons

Visual samples. These buttons do not submit an action.

Editable field with supporting text.

Enter a notebook name.

Status

DraftActiveReadyNearly fullNeeds attention

Souvenir

Practice with Sierra

Today’s conversation

Tell me what you want to say. We can make it sound more natural together.

Conversation · a moment ago

Text size

The account setting, previewed on this type sample.

Theme-aware tokens · select a color to copy

Spacing
A 4px base rhythm. Controls use tight 8px gaps; conversation turns have 32px of room.
Shape & depth
6px buttons, 8px fields, 16px dialogs. Static surfaces stay flat; elevation belongs to overlays.
Interaction
Visible keyboard focus, labelled fields and restrained 150ms control transitions. Escape dismisses the dialog.

Memobook

Personal notebooks for English practice.

What do you need to say?

Start with the real moment. Memobook turns it into something you can rehearse.

Conversations at workB1Target outcomeExplain your ideas, ask for clarity, and keep a conversation going with your team.Conversations at work
A weekend awayA2Target outcomeMake plans, ask for directions, and share what you enjoyed about a trip.A weekend away
Tell your storyB2Target outcomeDescribe a meaningful experience with a clear sequence and natural detail.Tell your story

Write a situation to add a sample notebook. Creation is local; no AI service or account is connected.

Notebook creation

One prompt adds a notebook to the shelf. Covers stay fixed-size as the shelf scrolls.

Notebook details

The information button reveals the level and learning outcome beside the cover.

Notebook states

Ready, new and preparing keep the same cover dimensions and paper stack.

Conversations at workB1Target outcomeExplain an idea, ask for clarity, and keep a conversation going with your team.Conversations at work
Ready
New
Preparing

Answer, then compare

The exercise commits one answer before revealing the model. A different answer stays visible, without turning the feedback into another card.

Sample exercise · no learning record is saved.

Which sentence would you use to agree with a colleague?

Choose an answer to see the feedback.

Souvenir + Comme

What do you need to say out loud?

Conversations at work

Practice plan · Ready to speak

B1 · 15 minute session

Souvenir for the prompt · Comme for the interface

Theme-aware tokens · select a color to copy

Layout
16px composer padding. Fixed 164px notebook covers retain their shape while the shelf scrolls.
Surfaces
Paper sits on the dotted ground. Selected answers use the accent surface; quiet details use softer ink.
Interaction
Choice rows keep a visible selected state. Notebook information appears on demand; controls retain their position.