Swim Diary
Design System
| -- | #1F3D1B | -- | |
| -- | #3A6B34 | -- | |
| -- | #5BA852 | -- | |
| -- | #A8D8A0 | -- | |
| -- | #EBF5E4 | -- | |
| -- | #E09020 | -- | |
| -- | #C8421A | -- | |
| -- | #6B63CC | -- | |
| Parchment | #F8F6F1 | App background |
DM Serif Display
36 / normal / −0.02em
36 / normal / −0.02em
Swim Diary app for swimmers
DM Serif Display
22 / normal / −0.01em
22 / normal / −0.01em
Insert your goals
DM Sans
17 / 500 / 0
17 / 500 / 0
Swimming is fun
DM Sans
15 / 400 / 1.65
15 / 400 / 1.65
Well done on completing you season best time
DM Sans
13 / 400 / secondary
13 / 400 / secondary
Season goal completed!
DM Mono
11 / 400 / 0.08em
11 / 400 / 0.08em
FOR ANY QUESTIONS EMAIL US
Spacing scale
4pxIcon gap
8pxChip gap
12pxButton row gap
16pxList item padding
24pxComponent gap
32pxScreen margins
48pxSection breaks
Border radius
4px — tags
8px — buttons
12px — cards
pill — chips
Buttons
Tags & chips
Sprint
Gym
Endurance
Completed
In progress
✦ AI suggested
Form input
User flow
1
Insert current times
2
Add goals
3
Scanning
4
Results
1 · Camera scan state
ANALYZING
Identifying your notebook
8 found
2 · Detected practice
Warm up
Skills
Sprint
Aerobic
Main stroke?
Date?
Solid = confirmed · Dashed = tap to verify
3 · Detected workout type
Sprint
94%
Aerobic
61%
Full stroke
48%
4 · AI loading skeleton
5 · AI uncertainty state
Not sure about last part
The corner of the image is blurry. Take a new picture so I can detect the full practice.
Tap to repeat6 · Empty / onboarding state
Take photo of you written practice
Point your camera at your notebook and I'll scan your practice.
7 · Success toast
Practice scanned and stored