CodedDesign

Examples

Product screens built with CodedDesign, plus the copy you need to reconstruct them. The dashboard figures are demonstration data.

North studio

Savings targets

Sample

Active milestones for North studio. Figures are demonstration data.

Retirement

$420,000
65% · $273,000 saved

Real estate

$85,000
32% · $27,200 saved

Emergency

$12,000
88% · $10,560 saved

$1,211.29

Claimable balance. Once a bank is connected, amounts over $10 go out on the 15th.

Chat

C

CodedDesign

How can I help you today?
A

Ada

Show me a savings dashboard.
C

CodedDesign

North studio is on the left. Sign-in, invite, and profile live on the Forms page.

Message scroller

tsx

import { Message, MessageScroller } from "@kenselasie/codeddesign";

<MessageScroller>
  <Message from="assistant" name="CodedDesign">
    How can I help you today?
  </Message>
  <Message from="user" name="Ada">
    Show me a savings dashboard.
  </Message>
</MessageScroller>

Profile form

Working sign-in, invite, and profile screens are on Forms.

tsx

import { Form, TextField, Button } from "@kenselasie/codeddesign";

<Form onSubmit={save}>
  <TextField label="Display name" name="name" />
  <Button variant="primary">Save profile</Button>
</Form>