name: fey-design
version: alpha
description: >
  A cinematic, near-pure-black canvas (#000) with white text, built for a
  premium fintech feel. Type is Calibre — a clean geometric grotesque — with
  large, low-contrast GRAY display headlines (almost watermark-like) and white
  600-weight section heads. The brand voltage is a warm peach/orange
  (#FFA16C) used for mono-style eyebrows and gradient headlines ("Earnings in
  real time."), with a sky-blue (#479FFA) for links and a spring-green for
  "coming soon". Actions are soft off-white pills with a faint white glow.
  Surfaces are glassy translucent dark cards over moody product screenshots and
  a floating 3D rock. Geometry is fully pill/rounded; motion uses custom easings.
colors:
  # Brand / action
  primary: '#e6e6e6'          # off-white pill button surface
  on-primary: '#000000'
  accent: '#ffa16c'           # warm peach/orange — eyebrows + gradient headings
  link: '#479ffa'             # sky-blue links
  success: '#3ddc84'          # green "Coming soon" tag (approx)
  # Surface (dark cinematic)
  surface: '#000000'          # pure-black page
  surface-card: 'rgba(255,255,255,0.04)'  # glassy translucent dark cards
  surface-chip: 'rgba(255,255,255,0.08)'
  # Text
  on-surface: '#ffffff'
  on-surface-body: '#e6e6e6'  # body copy (slightly off-white)
  on-surface-muted: 'rgba(255,255,255,0.5)'  # subdued sub-heads
  on-surface-faint: 'rgba(255,255,255,0.05)' # giant low-contrast watermark headings
  # Data viz (in product mocks)
  chart-up: '#3ddc84'         # green portfolio line (approx)
  chart-down: '#ff5c5c'       # red (approx)
typography:
  font-sans: 'calibre, "calibre Fallback"'   # OSS sub: "Hanken Grotesk" / "Geist"
  display:                    # giant "Make better investments." (low-contrast gray)
    fontFamily: '{typography.font-sans}'
    fontSize: 48px            # scales up responsively
    fontWeight: 600
    lineHeight: 1.0
  section-title:              # white 600 section heads
    fontFamily: '{typography.font-sans}'
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.0
  accent-heading:             # gradient "Earnings in real time."
    fontFamily: '{typography.font-sans}'
    fontWeight: 600
    color: '{colors.accent}'
  eyebrow:                    # "Highlights" (mono-ish, orange)
    fontFamily: '{typography.font-sans}'
    fontSize: 18px
    fontWeight: 700
    color: '{colors.accent}'
  body:
    fontFamily: '{typography.font-sans}'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22.4px
  label:                      # dense UI labels
    fontFamily: '{typography.font-sans}'
    fontSize: 11px
    fontWeight: 600
    lineHeight: 14.96px
rounded:
  card: 16px                  # glassy cards (approx)
  pill: 99px                  # buttons / tags / chips
spacing:
  base: 8px
  scale: [4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px]
motion:
  ease-in: 'cubic-bezier(0.55,0.085,0.68,0.53)'
  ease-out: 'cubic-bezier(0.25,0.46,0.45,0.94)'
  ease-in-out: 'cubic-bezier(0.455,0.03,0.515,0.955)'
  # Plus a masked text-reveal (--mask-position) wipe on headings.
components:
  button-primary:             # "Get started" / "Try it free"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    fontWeight: 600
    rounded: '{rounded.pill}'
    padding: '7px 16px'
    shadow: '0 0 14px rgba(255,255,255,0.25)'  # faint white glow
  badge-news:                 # "Fey has joined Wealthsimple → Learn more"
    backgroundColor: '{colors.surface-chip}'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.pill}'
  tag-coming-soon:
    textColor: '{colors.success}'
    fontWeight: 700
    rounded: '{rounded.pill}'
  card-glass:                 # feature / news cards over product art
    backgroundColor: '{colors.surface-card}'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.card}'
    note: 'translucent dark, subtle 1px white-alpha border'
  link:
    textColor: '{colors.link}'
icons:
  style: outline
  stroke: ~1.5px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color-rules: 'Monoline white; used in the floating app dock (home/compass/calendar/bookmark/chart/telescope/hexagon). The flame "F" mark is the logo.'

Fey

fey-design — version alpha

Surfaces studied via Playwright (fey.com home): computed styles + a tiny :root (only easing curves and a --mask-position reveal token are exposed; the rest is read from computed values). High-confidence on type (Calibre), the black canvas, accent orange #FFA16C, link blue #479FFA, and the pill button with white glow; greens and chart hues are nearest-hex approximations.

Overview

Fey's canvas is cinematic and near-pure-black ({colors.surface} #000) with white text — a premium, high-end fintech feel. Type is Calibre, a clean geometric grotesque, used in two distinct registers: giant, low-contrast GRAY display headlines ("Make better investments.", "From overwhelming to effortless.") that read almost like a watermark, and crisp white 600-weight section heads ("Complex data, simplified.", "At your command."). The brand voltage is a warm peach/orange {colors.accent} (#FFA16C) used for mono-style eyebrows ("Highlights") and gradient headlines ("Earnings in real time."), with a sky-blue {colors.link} (#479FFA) for links and a spring-green for "Coming soon". Actions are soft off-white pills carrying a faint white glow. Surfaces are glassy translucent dark cards floating over moody product screenshots (dark portfolio/stock UIs) and a floating 3D rock. Geometry is fully pill/rounded, and motion runs on custom easing curves plus a masked text-reveal wipe.

Colors

• Off-white action — {colors.primary} #e6e6e6. Primary buttons ("Get started", "Try it free") are soft off-white pills with black text and a white glow shadow (0 0 14px rgba(255,255,255,0.25)).
• Peach accent — {colors.accent} #FFA16C. The signature warm hue: eyebrows ("Highlights"), the gradient display headline ("Earnings in real time." fading orange→deep rust), and the "7-day free trial" line. Used sparingly for emphasis.
• Link blue — {colors.link} #479FFA. Inline links.
• Success green — {colors.success} ~#3ddc84. The "Coming soon" tag (and the up-trend chart line in mocks).
• Ink. White {colors.on-surface} for section heads; off-white {colors.on-surface-body} #e6e6e6 for body; {colors.on-surface-muted} (white@50%) for sub-heads; and the dramatic {colors.on-surface-faint} (white@~5%) for the giant watermark display headings.
• Surfaces. Pure-black page; glassy translucent cards {colors.surface-card} (white@4%) with a faint white-alpha border; chips at white@8%.

Typography

• Calibre — the only family, a geometric grotesque. Closest open-source substitute: Hanken Grotesk or Geist. The defining move is the two-register display: huge near-invisible gray headings vs. crisp white 600 heads.

Token	Size	Weight	Line-height	Color	Usage
display (watermark)	48px+	600	1.0	white @5%	Giant low-contrast headings
section-title	26px	600	1.0	white	Section heads
accent-heading	large	600	—	#FFA16C	Gradient headline
eyebrow	18px	700	—	#FFA16C	"Highlights"
body	16px	400	22.4px	#e6e6e6	Body copy
label	11px	600	14.96px	—	Dense UI labels

Layout

Base 8px. The page is a sequence of centered, full-bleed black sections, each pairing a heading with a dark product mockup (portfolio dashboard, stock/ETF page, news breakdown, ⌘K command palette) or the floating 3D rock + app dock. A pill news badge ("Fey has joined Wealthsimple → Learn more") sits in the nav. Whitespace is vast and the mood is moody/premium — lots of black, sparse bright accents.

Elevation & Depth

Depth is atmospheric and photographic: moody dark product screenshots, a 3D-rendered rock lit dramatically, glassy translucent cards with thin white-alpha borders, and the white-glow on primary buttons. There's no flat card-shadow ladder; the cinematics do the work. Faint hairline dividers separate some sections.

Shapes

Fully rounded: 99px pills ({rounded.pill}) for buttons, tags, chips and the news badge; ~16px glassy cards. Soft corners throughout reinforce the polished, app-like feel.

Components

• Primary button {components.button-primary} — off-white pill, black label, faint white glow ("Get started", "Try it free").
• News badge {components.badge-news} — translucent pill with text + "Learn more".
• Coming-soon tag {components.tag-coming-soon} — green pill label.
• Glass card {components.card-glass} — translucent dark, thin white-alpha border, ~16px radius; holds news recaps, summaries, charts.
• Link {components.link} — sky-blue inline text.
• App dock — a floating rounded bar of monoline icons demoing the product nav.

Motion

Custom-tuned: {motion.ease-out} / {motion.ease-in-out} curves drive section and card reveals, and a masked text-reveal (--mask-position) wipes headings into view. The 3D rock and product mockups animate subtly. Polished and smooth — never bouncy.

Iconography

Thin outline monoline icons, white, most visible in the floating app dock (home, compass, calendar, bookmark, chart, telescope, hexagon/settings). The logo is a flame-like "F" mark. Sizes 16/20/24px.

Do's and Don'ts

• Do keep the canvas pure black with white/off-white text.
• Do use Calibre, contrasting giant low-contrast gray watermark headings with crisp white 600 section heads.
• Do reserve peach #FFA16C for eyebrows and the occasional gradient headline; blue #479FFA for links.
• Do make primary buttons off-white pills with a faint white glow.
• Do lean on cinematic dark product mockups, the 3D rock, and glassy cards.
• Don't put accent orange on body text or buttons.
• Don't flatten to plain dark panels — the cinematics/glass/glow are the brand.
• Don't square the corners; everything is pill/rounded.

Known Gaps

• Only easing + mask tokens are exposed in :root; greens, chart hues, and exact card alpha are nearest-hex approximations.
• The hero display scales via responsive sizing; the 48px figure is the captured base.