Readable Layout - Clear Separation

Top-right: dot + text (text right-aligned) | Bottom-right: icon (separate, no overlap)

1. Base (10px, Weight 600)

Standard size and weight, clear readable text

Done
✓

Genetic Counseling

Initial consultation and family history review completed.

Active
→

Screening Schedule

Annual MRI completed. Clinical breast exam scheduled.

Pending
⏱

Insurance Coverage

Review your insurance coverage for preventive screenings.

2. Lighter Text (Weight 500)

More delicate text weight

Done
✓

Genetic Counseling

Initial consultation and family history review completed.

Active
→

Screening Schedule

Annual MRI completed. Clinical breast exam scheduled.

3. Bolder Text (Weight 700)

Stronger text presence

Done
✓

Genetic Counseling

Initial consultation and family history review completed.

Active
→

Screening Schedule

Annual MRI completed. Clinical breast exam scheduled.

4. Larger Text (11px)

More readable, prominent text

Done
✓

Genetic Counseling

Initial consultation and family history review completed.

Active
→

Screening Schedule

Annual MRI completed. Clinical breast exam scheduled.

5. Smaller Text (9px)

More compact, subtle

Done
✓

Genetic Counseling

Initial consultation and family history review completed.

Active
→

Screening Schedule

Annual MRI completed. Clinical breast exam scheduled.

6. Smaller Dot (8px)

More subtle dot indicator

Done
✓

Genetic Counseling

Initial consultation and family history review completed.

Active
→

Screening Schedule

Annual MRI completed. Clinical breast exam scheduled.

7. Larger Dot (12px)

More prominent dot indicator

Done
✓

Genetic Counseling

Initial consultation and family history review completed.

Active
→

Screening Schedule

Annual MRI completed. Clinical breast exam scheduled.

8. Subtle Icon (Opacity 0.12)

Lighter background icon

Done
✓

Genetic Counseling

Initial consultation and family history review completed.

Active
→

Screening Schedule

Annual MRI completed. Clinical breast exam scheduled.

9. Bolder Icon (Opacity 0.25)

Stronger background icon

Done
✓

Genetic Counseling

Initial consultation and family history review completed.

Active
→

Screening Schedule

Annual MRI completed. Clinical breast exam scheduled.

10. Smaller Icon (50px)

Compact icon size

Done
✓

Genetic Counseling

Initial consultation and family history review completed.

Active
→

Screening Schedule

Annual MRI completed. Clinical breast exam scheduled.

11. Larger Icon (70px)

More prominent icon

Done
✓

Genetic Counseling

Initial consultation and family history review completed.

Active
→

Screening Schedule

Annual MRI completed. Clinical breast exam scheduled.

12. Lighter Text Color

Text matches icon/dot color

Done
✓

Genetic Counseling

Initial consultation and family history review completed.

Active
→

Screening Schedule

Annual MRI completed. Clinical breast exam scheduled.

13. More Spacing (8px gap)

Larger gap between dot and text

Done
✓

Genetic Counseling

Initial consultation and family history review completed.

Active
→

Screening Schedule

Annual MRI completed. Clinical breast exam scheduled.

14. Less Spacing (4px gap)

Tighter gap between dot and text

Done
✓

Genetic Counseling

Initial consultation and family history review completed.

Active
→

Screening Schedule

Annual MRI completed. Clinical breast exam scheduled.

15. Text Only (No Dot)

Just text label, no dot indicator

Done
✓

Genetic Counseling

Initial consultation and family history review completed.

Active
→

Screening Schedule

Annual MRI completed. Clinical breast exam scheduled.