Overview
- Lead with a strong cobalt hero block and bold accessible copy.
- Make the product feel friendly, energetic, and app-native.
- Keep the interface readable and light after the hero burst.
Bloom
Bloom offers zero-commission stock investing for young investors aged 13+. With built-in parental controls, education modules, fractional trading, and more, Bloom offers the safest way for teens to start building wealth early.
4.0
3
Visits
Categories
Sections
Available Pages
Version History
Workflow Collections
Design Analysis
Bloom Home design analysis
Lead with a strong cobalt hero block and bold accessible copy. Make the product feel friendly, energetic, and app-native. Keep the interface readable and light after the hero burst. Use phone screens as primary proof. Tr...
Key Takeaways
- Lead with a strong cobalt hero block and bold accessible copy.
- Make the product feel friendly, energetic, and app-native.
- Keep the interface readable and light after the hero burst.
- Use phone screens as primary proof.
- Treat stickers or bold labels as a typographic device, not as random decoration.
- Allow a dark secondary product mode in contained learning sections only.
Image Direction
- Use phone screens as primary proof.
- Treat stickers or bold labels as a typographic device, not as random decoration.
- Allow a dark secondary product mode in contained learning sections only.
Colors
- Cobalt is the hero engine.
- White should dominate the shell after the hero.
- Use black or midnight ink for CTAs and secondary product surfaces.
Typography
- Display type should feel loud and compressed.
- Body text should remain clean and neutral.
- Keep the educational tone accessible and energetic.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Electric Blue Investment Pop
A youth-oriented investing brand system built from vivid cobalt hero stages, bold sticker headlines, clean white feature cards, and app-first proof.
Energetic, beginner-friendly, and app-first.
Primary mode: lightconsumer investing educationui-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Energetic, beginner-friendly, and app-first.
Density
3
Variance
4
Motion
3
Signals
cobalt hero block · sticker-like labels · phone mockups · clean white feature cards
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Bloom Blue
#2451E6
Midnight Ink
#1C2329
Violet Pop
#7B38F5
Clean White
#FFFFFF
Soft Surface Gray
#F4F4F6
Usage rules
Let cobalt do the heavy lifting in the hero.
Use bright secondary accents only inside contained modules.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
0.5rem
sm
0.75rem
md
1rem
lg
1.5rem
xl
2.25rem
section_gap
clamp(4rem, 8vw, 7rem)
Token Radii
Corner radii tokens with a live surface sample.
control
999px
card
24px
panel
28px
full
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Inter Tight
bold compressed grotesk
Body
Inter
clean fintech-adjacent sans
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
clamp(2.8rem, 5.2vw, 4.6rem)/—
Display
H2
clamp(2rem, 3.8vw, 3.1rem)/—
H2
Body
1rem/—
Body
Label
0.86rem/—
Label
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use bold display moments to make investing feel accessible rather than intimidating. · Keep body copy clean and instructional.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
180ms-240ms
Easing
cubic-bezier(.22,1,.36,1)
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 180ms-240ms |
easing | cubic-bezier(.22,1,.36,1) |
Layout Principles
Keep the shell bright and uncluttered.
Use one loud hero zone, then settle into readable white cards and phone mockups.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#1C2329
Text
#FFFFFF
Border
none
Radius
999px
Padding
0.75rem 1rem
Min height
40px
Shadow
none
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#1C2329
Border
1px solid rgba(28,35,41,0.08)
Radius
999px
Padding
0.75rem 1rem
Min height
40px
Shadow
none
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#1C2329
Border
1px solid rgba(28,35,41,0.05)
Radius
24px
Padding
1.5rem
Shadow
none
Cards dark
Feature Card
Component preview content
Base Attributes
Background
#0C0D12
Text
#FFFFFF
Border
1px solid rgba(255,255,255,0.05)
Radius
18px
Padding
1rem
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#FFFFFF
Text
#4A4F54
Height
42px
Active text
#1C2329
Item padding
0.35rem 0.6rem
Item radius
999px
Inputs default
Base Attributes
Background
#FFFFFF
Text
#1C2329
Border
1px solid rgba(28,35,41,0.08)
Radius
999px
Padding
0.75rem 1rem
Min height
44px
Placeholder
rgba(28,35,41,0.45)
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
supportive
Media types
- -app mockup
- -bold sticker label
Subject patterns
- -phone UI as primary proof
- -one loud headline sticker per chapter
Composition logic
- -Keep cobalt as the big scene-setting color field.
- -Use dark cards only inside contained lesson or product zones.
Treatment rules
- -Preserve crisp app edges and strong contrast.
- -Keep the mood youthful, not childish.
Generation cues
- -Prompt for cobalt hero blocks, compact dark CTA pills, and investing app screens with clean contrast.
Avoid
- -No old-school bank imagery.
- -No beige financial advisor mood.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -No muted corporate finance beige.
- -No overly serious enterprise grids.
- -No decorative gradients that compete with the cobalt hero.