Fintech / Production-ready / Design handoff

Finlens
Design system.

The production-ready design system behind Finlens. Clear financial signals, reusable research components and specifications that connect product design to implementation.

Explore the components

Finlens / A connected design language

Stock research / Verdict card

One clear view.

BuyConfidence
High

<Component variant="default" />

Accessibility / Design & developer handoff

Built around WCAG 2.2 AA.

WCAG 2.2 Level AA guides the design and implementation requirements. Recommendations, risk and price changes pair color with labels, signs and values. Charts need a readable summary and an equivalent data view; hover alone must never hide essential research.

Readable, beyond color

Text contrast: at least 4.5:1, or 3:1 for large text. Essential control boundaries and state indicators: 3:1. Labels and symbols carry meaning alongside color.

1.4.1 · 1.4.3 · 1.4.11

Keyboard & focus

Every action works by keyboard, with visible focus that stays in view. Dialogs contain focus, support Escape and return focus to the trigger. Web targets meet the 24 × 24 CSS px minimum or its spacing exception.

2.1.1 · 2.1.2 · 2.4.7 · 2.4.11 · 2.5.8

Clear names & feedback

Controls expose their name, role and state. Inputs have persistent labels and linked error messages. Async results use status announcements without moving focus.

1.3.1 · 3.3.1 · 3.3.2 · 4.1.2 · 4.1.3

Adaptable layouts

Support text resizing to 200% and reflow at 320 CSS px without losing controls or content. Respect reduced-motion preferences and provide text alternatives for meaningful graphics.

1.1.1 · 1.4.4 · 1.4.10 · Motion preference

Release checklist: test every state with keyboard and screen readers, zoom and narrow layouts; measure actual foreground/background pairs. Static product screens document visual intent and do not establish app conformance. View the WCAG 2.2 requirements ↗

FoundationsComponents & statesSpecificationsDeveloper handoff

←Back to Finlens case study

Finlens Design System Storybook

Try Finlens App

atoms/button

Canvas:

Button Component

Primary CTA, Secondary Button, and Tertiary Ghost variants.

Purpose & Usage Guidelines

Primary interaction trigger for requesting AI stock verdicts and submitting high-intent user actions.

When & Where to Use: Use Primary Button for the single key action per surface ('Get AI Verdict', 'Try App'). Use Secondary Button for secondary actions ('Add to Watchlist'). Use Tertiary Button for inline text actions.

Best Practices & Guidelines

DO'S (Recommended)

Pair primary CTA with an icon (Sparkles or Arrow) to reinforce AI and movement.
Provide smooth hover (#CDFFAD), pressed (#8ED960), and focus outline states.
Maintain minimum 44px height for touch targets.

DON'TS (Avoid)

Do NOT place multiple Primary Buttons side by side.
Do NOT use primary lime background for destructive actions.

Finlens / FinlensButton

Button

Primary interaction trigger for requesting AI stock verdicts and submitting high-intent user actions.

Next.js App Router / TypeScript

The complete example for Button, with the imports and state it uses. It matches the component preview.

Download .tsx

"use client";
// Next.js App Router / components/finlens/button.tsx
// TSX + Tailwind CSS. Preview data is illustrative; connect real app data and actions.
import React from "react";
import { ArrowRight, Sparkles, Plus } from "lucide-react";
export default function FinlensButton() {
    return (<div className="space-y-6 max-w-lg mx-auto text-center">
            <div>
              <h3 className="text-lg font-bold text-[#0E0F0C]">Button Component</h3>
              <p className="text-xs text-[#454745] mt-1">Primary CTA, Secondary Button, and Tertiary Ghost variants.</p>
            </div>
            <div className="flex flex-wrap items-center justify-center gap-4">
              {/* Primary CTA */}
              <button className="inline-flex items-center gap-2 rounded-xl bg-[#9FE870] px-5 py-2.5 font-semibold text-sm text-[#0E0F0C] shadow transition-all hover:bg-[#CDFFAD] hover:scale-105 active:scale-95 focus-visible:ring-2 focus-visible:ring-[#163300]">
                <span>Get AI Verdict</span>
                <Sparkles className="h-4 w-4"/>
              </button>
              {/* Secondary */}
              <button className="inline-flex items-center gap-2 rounded-xl border border-[#0E0F0C]/20 bg-white px-5 py-2.5 font-semibold text-sm text-[#0E0F0C] transition-all hover:bg-[#E8EBE6] hover:border-[#0E0F0C] hover:scale-105 active:scale-95">
                <span>Add to Watchlist</span>
                <Plus className="h-4 w-4"/>
              </button>
              {/* Tertiary */}
              <button className="inline-flex items-center gap-1.5 font-semibold text-sm text-[#0E0F0C] hover:text-[#2EAD4B] transition-all hover:translate-x-1">
                <span>View Full Report</span>
                <ArrowRight className="h-4 w-4"/>
              </button>
            </div>
          </div>);
}

Use in app/page.tsx

import FinlensButton from "@/components/finlens/button";

export default function Page() {
  return <FinlensButton />;
}

Use this client component in a Next.js App Router project with Tailwind CSS and lucide-react. Sample data and placeholder actions need your app's data and callbacks.

Download shared foundation tokens Next.js integration notes