Feanix Biotechnology · default theme

Feanix Biotechnology — component kit

Every component below is colored only by var(--brand-*) custom properties derived from one seed.

Buttons

Five types across three sizes.

Primary Default Dashed Text Link
Small Medium Large

Form controls

Inputs, selects, textareas, checkboxes and switches share control height, radius and focus ring.

Notifications Public profile

Navigation

Tabs, breadcrumbs, pagination and steps for app shells and flows.

OverviewAnalyticsReportsSettings
‹12345›
✓
Connect
Point at a source
2
Derive
Seed to tokens
3
Ship
Export everywhere

Cards

Elevated content surfaces with optional header & footer.

Overview
Cards group related content on an elevated surface. Radius, border and shadow all read from the derived tokens.
Usage
Drop the same component into a dark or compact theme and it re-skins automatically — no per-variant markup.
A bodyonly card. live beta

Data display

Tables, stats, avatars and a no-JS accordion for structured content.

TokenRoleValue
colorPrimaryBrand accentseed
fontSizeBody type basederived
borderRadiusCorner roundingderived
10k+
Teams onboard
99.9%
Uptime SLA
4.9/5
Average rating
FB AL TB design ops
What is a seed token?+
The ~20-field input every other token is derived from. Change one field and the whole system follows.
Can I theme dark mode separately?+
No need — dark is the same seed run through a different algorithm, so it can never drift from the light theme.

Marketing blocks

Testimonials and pricing compose the primitives — landing pages are these in the right order.

“We replaced three hand-maintained style guides with one generated system.”

AL
Ada Lovelace
Design lead
Pro Most popular

For growing teams.

$29 / mo
  • ✓Unlimited brands
  • ✓Dark & compact themes
  • ✓Priority support
Composable
Marketing blocks (testimonials, pricing, stats) compose the same primitives — so a landing page is just kit pieces in the right order.

Tags

Compact labels keyed to functional colors.

Primary Success Warning Error Info

Alerts & progress

Semantic feedback states.

✓
Brand system generated
All design tokens were derived from a single seed color.
ℹ
Tokens map 1:1 onto CSS custom properties.
⚠
Wireframe mode is off
Filled surfaces are in use for this theme.
✕
Could not reach the source URL.
72%
✓

Color

The full derived palette and neutrals.

Primary palette
50
200
300
400
500
600
700
800
900
1050
Functional
primary
success
warning
error
info
Neutral text
text
text/2
text/3
text/4
Surfaces & borders
layout
container
elevated
border
border/2

Type scale

A modular ramp derived from the base font size.

Heading 1 · 38px The quick brown fox
Heading 2 · 32px The quick brown fox
Heading 3 · 26px The quick brown fox
Heading 4 · 22px The quick brown fox
Heading 5 · 18px The quick brown fox
Large · 18px The quick brown fox
Body · 14px The quick brown fox
Small · 12px The quick brown fox