Fey

Fey

Explore a new era of effortless financial research at your fingertips. Fey is meticulously crafted, empowering the modern investor with real-time market intelligence.

4.0
21
Visits
Visit

Available Pages

Version History

Design Analysis

Fey Home design analysis

Obsidian Analyst Glass is a dark luxury-product system for investment analysis and recap workflows. The page should feel like a premium terminal seen through softened glass: controlled, quiet, and information-dense witho...

Overview

Obsidian Analyst Glass is a dark luxury-product system for investment analysis and recap workflows. The page should feel like a premium terminal seen through softened glass: controlled, quiet, and information-dense without becoming visually noisy.

Image Direction

Use dark product panoramas, layered recap cards, charts, and softly lit city or market imagery. Visuals should feel dense and intelligent, with low ambient light and subtle metallic or glassy sheen.

Colors

Keep the system almost entirely in the black, graphite, white, and mist-silver family. A little cool-blue tint can appear in announcement or product highlights, but color should never overpower the dark luxury posture.

Typography

Use one premium grotesk across everything, but vary weight and highlight treatment aggressively. Large statements should feel polished and almost metallic. Supporting copy should remain small, steady, and low-drama.

Design.md

System Overview

Core identity and authoring metadata from the refto.one design model.

Obsidian Analyst Glass

A premium investing-product system built from near-black surfaces, silver-to-white type gradients, translucent glass pills, and dense terminal-like product panels.

quietly luxurious, analytical, and terminal-adjacent

Primary mode: darkinvestment analysis product marketingproduct-marketing

Theme

Fields outside the primary renderer remain visible here as structured fallback content.

Visual atmosphere
Summary
quietly luxurious, analytical, and terminal-adjacent
Density
3
Variance
3
Motion
2
Signals
obsidian field · silver-white headline gradient · glass capsule UI · dark data panels

Colors

Primitive palettes and resolved token colors for the active preview mode.

Palette colors
Obsidian
#050505
Graphite Panel
#141414
Mist Silver
#C8C8C8
Pure White
#FFFFFF
Soft Gray Pill
#E6E6E6
Sky Tint
#479FFA
Usage rules
Keep the page overwhelmingly dark and quiet.
Use silver or white text as the prestige signal instead of bright color.
Let light pill surfaces appear only as contained controls, not major cards.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
6px
sm
10px
md
16px
lg
24px
section
96px

Token Radii

Corner radii tokens with a live surface sample.

sm
8px
md
20px
lg
28px
full
999px

Typography Families

Font families from the current design YAML, including fallback stacks and usage character.

Display
Calibre
smooth premium grotesk with strong weight transitions
Body
Calibre
quiet analytical UI voice
Mono
Calibre
minimal terminal-adjacent labeling without a separate mono family

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3rem, 6vw, 5rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
Body
1rem/—
Body
Caption
0.8125rem/—
Caption

Typography Rules

Fields outside the primary renderer remain visible here as structured fallback content.

Rules
Use large bold display copy with a silver-to-white or misted highlight treatment where appropriate. · Keep nav and supporting copy smaller and understated. · Let product panels and charts provide density while the page chrome remains sparse.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
180ms-280ms
Easing
cubic-bezier(.2,.8,.2,1)
Spring
stiffness 105, damping 18

Motion

Resolved motion token values.

PropertyValue
duration180ms-280ms
easingcubic-bezier(.2,.8,.2,1)
springstiffness 105, damping 18

Layout Principles

Use large black fields punctuated by one dense product panorama or layered screen stack.
Cluster utility actions into floating pills instead of visible panels.
Let bottom dock elements and announcement capsules anchor the interface vocabulary.

Component Preview

Low-complexity component tokens rendered as design-system specimens.

Buttons primary
Base Attributes
Background
#E6E6E6
Text
#000000
Border
0px none #E6E6E6
Radius
999px
Padding
7px 16px
Min height
32px
Shadow
0 0 14px rgba(255,255,255,0.25)
Buttons secondary
Base Attributes
Background
rgba(255,255,255,0.08)
Text
#FFFFFF
Border
0px none rgba(255,255,255,0.08)
Radius
999px
Padding
0px 16px
Min height
44px
Buttons announcement
Base Attributes
Background
rgba(20,20,20,0.95)
Text
#FFFFFF
Border
1px solid rgba(255,255,255,0.12)
Radius
999px
Padding
7.5px 9px 7.5px 24px
Min height
47px
Shadow
0 30px 16px rgba(0,0,0,0.12), 0 15px 8px rgba(0,0,0,0.07)
Cards default
Feature Card
Component preview content
Base Attributes
Background
#141414
Text
#FFFFFF
Border
1px solid rgba(255,255,255,0.08)
Radius
20px
Padding
24px
Shadow
none
Cards glass
Feature Card
Component preview content
Base Attributes
Background
rgba(255,255,255,0.06)
Text
#FFFFFF
Border
1px solid rgba(255,255,255,0.12)
Radius
20px
Padding
20px
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#FFFFFF
Height
47px
Active text
#FFFFFF
Item padding
0px
Item radius
0px
Tabs dock
Base Attributes
Background
#141414
Text
#7D7D7D
Border
1px solid rgba(255,255,255,0.10)
Radius
16px
Padding
10px 14px
Min height
40px

Image direction

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Summary
Use dark terminal-like app panels, metallic chart surfaces, blurred city or market imagery, and subtle glass overlays.
Guidance
  • -
    Keep images dark, layered, and softly illuminated.
  • -
    Use soft highlight gradients and restrained blur rather than obvious neon glow.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No bright SaaS accent palette.
  • -
    No white cards dominating the experience.
  • -
    No playful motion or emoji-like product cues.
  • -
    No harsh blue enterprise chrome replacing the quiet luxury tone.