An ambient study system for professionals preparing for financial certification exams.
One question at a time. Spaced across your day.
Scroll
02 / The mark
Still
A filled circle sits above an elliptical ripple, based on a stone approaching water.
At 16px the ripple simplifies to a line so the mark stays legible.
Dark
Brand
Light
Mono
03 / Scale
Every size, still legible
At small sizes the ripple simplifies to a single stroke. At 16px it's a dot above a dash.
At 96px every curve in the ripple is visible. The mark never needs a container.
16px
24px
32px
48px
64px
96px
04 / Construction
Geometry
The mark uses a 64-unit grid. Fixed proportions keep the circle and ripple consistent at each size.
A
Circle radius: 9.5 units. Center at (31.5, 23). The half-unit leftward offset creates an optical centering effect against the wider ripple.
B
The circle and ripple overlap vertically, but the ripple curves away to leave visible space between them.
C
The ripple uses a custom cubic path instead of a geometric <ellipse>. This gives the sides more visual weight than the top and bottom.
D
The ripple center is at y=42 and the circle center is at y=23 on the 64-unit grid.
E
Ripple rx=22, ry=10.5. The 2.1:1 aspect ratio reads as "water surface in perspective" without feeling squashed.
05 / Lockups
Mark + wordmark
The mark sits to the left of "ping" in Satoshi 900 at -0.04em tracking.
The wordmark baseline aligns with the ripple's vertical center.
16px minimum clearance on all sides.
Dark
ping
Brand
ping
Light
ping
Mono
ping
06 / Usage rules
Keep the proportions
Use the approved proportions, clearance, colors, and small-size variant.
Do
Use the mark at approved sizes with proper clearance. Minimum clear space equals the circle's diameter on all sides.
Don't
Never rotate the mark. The circle must always float directly above the ripple. Rotation breaks the water metaphor.
Don't
Never apply unapproved colors to the mark. Use only the defined palette variations. No gradients, no shadows, no glow.
Don't
Never reduce opacity below readable thresholds. The circle must always be fully opaque. Only the ripple carries transparency.
Don't
Keep the specified gap between the circle and ripple so both shapes remain distinct.
Do
At small sizes (below 24px), simplify the ripple to a single stroke. The mark adapts to its context.
07 / Color palettes
Six palette options
Each palette uses the same mark with a different accent and neutral range.
Select a palette to preview it across the page.
Active
Neon Izakaya
Primary palette with a rose accent on warm black.
Active
Firewatch
Warm amber accent with brown and cream neutrals.
Active
Midnight
Cool blue accent on a deep navy background.
Active
Kiln
Muted clay tones with a warm off-white foreground.
Active
Sumi
Soft green accent on a near-black background.
Active
Dusk
Violet accent with charcoal and pale gray neutrals.
08 / Typography
Type system
Satoshi is used for display text, DM Sans for body copy, and Geist Mono for labels and data.
Hero
Satoshi 900 / clamp(3.5rem, 7vw, 6rem) / -0.04em
Study without sitting down
Heading
Satoshi 900 / 1.75rem / -0.04em
Your weakest topics this week
Body
DM Sans 400 / 1.05rem / 1.7
A fiduciary is required to act in the best interest of their client. Under the Uniform Securities Act, this duty applies to investment advisers but not broker-dealers acting in a principal capacity.
Label
Geist Mono 400 / 0.65rem / 0.15em / uppercase
Series 65 / Topic mastery / Last 7 days
Data
Geist Mono 600 / 2rem / tabular-nums
87.4% retention
Code
JetBrains Mono 400 / 0.85rem
POST /admin/generate-math {"count": 50, "exam": "series65"}
09 / Components
The building blocks
Every component follows the same rules: 2px radius, warm stone backgrounds, accent for primary actions, explicit transitions.
Buttons
Inputs
Alerts
New questions available for Investment Vehicles.
Day streak: 12 days. Keep it up.
Exam in 6 days. Ethics retention at 62%.
Stat readouts
847answeredAll time
78.2%accuracyLast 7 days
14day streakPersonal best
10 / Product
In context
Examples of the design system applied to a quiz question and weak-topic analysis.
Quiz / Series 65
Question 34 of 65 / Ethics & Fiduciary
An investment adviser representative discovers that a client's stated net worth was significantly overstated on their new account form. The IAR should:
AContinue managing the account as originally agreed
BUpdate the client profile and reassess suitability
CReport the discrepancy to the state administrator
DLiquidate the account immediately
52% complete
Weak topics /weak
Bottom 5 by mastery / Last 30 days
Options pricing
34%
Municipal bonds
41%
Tax-loss harvest
48%
Margin accounts
52%
Economic indicators
58%
50 questions · bottom 20%
11 / Animations
Five ways to move
Each animation is assigned to a specific interface state such as loading, confirmation, or a milestone.
Breathe
A slow opacity pulse for idle and loading states.
Expand
The ripple expands and fades after a send action.
Drop
The circle drops and rebounds on page load.
Splash
The ripple appears when an answer is submitted.
Resonance
Two pulse rates mark a streak milestone.
12 / Spacing & radius
The grid beneath
8px base unit. Comfortable density. 2px border-radius everywhere except the brand circle.
Spacing scale
4
6
8
12
16
20
24
32
48
64
80
Border radius
0px
2px default
50% brand dot
13 / Motion
Motion timing
The system uses three durations and explicit transition properties. Hover each bar to compare them.