FroggDesign
Get Started
Visual language · Design system

FroggDesign

Visual language for calm, precise product interfaces.

FroggDesign provides the tokens, theme, interaction patterns, and visual foundation behind EnterUI — helping teams build consistent React and Next.js interfaces without starting from scratch.

Explore Design SystemView EnterUI
Design tokens
120+
Components
51
Themes
Light · Dark
What's inside

Foundation for product systems

Six layers that make FroggDesign more than a token file — shared, versioned, and composable across every surface.

Tokens

Color, typography, spacing, radius, and shadow values published as a versioned, shareable source.

Theme

CSS variables for light and dark modes that map primitives to semantic surfaces.

Components

EnterUI consumes the tokens to ship production-ready React primitives.

Accessibility

Focus states, keyboard support, contrast, and ARIA semantics are built in, not bolted on.

Documentation

Guides for installation, theming, SSR, accessibility, and migration alongside every component.

Product UI patterns

Form, table, dialog, and shell patterns that match how teams actually compose product surfaces.

Design direction

Principles

Less green, more precision. Six rules guide how FroggDesign and EnterUI behave together.

  1. 01

    Neutral first, color as signal

    Charcoal and slate carry hierarchy. Green appears only where it earns attention — selected states, primary actions, signals.

  2. 02

    Soft surfaces, sharp hierarchy

    Borders are quiet, type does the work. Elevation is reserved for moments where depth is meaningful.

  3. 03

    Beautiful by default, flexible by design

    Defaults ship production-ready. Every visual decision is reachable through CSS variables when a product needs to deviate.

  4. 04

    Accessible interaction states

    Hover, focus-visible, disabled, selected, and loading states are designed alongside the resting style — not afterwards.

  5. 05

    Token-driven theming

    Components never hard-code colors or sizes. Tokens are the single source of truth across light, dark, and bespoke brand themes.

  6. 06

    Built for product teams

    Optimised for dashboards, SaaS interfaces, and internal tools — not landing pages or marketing campaigns.

Tokens

A design system in CSS variables

Every token below ships under --fd-* in @froggdesign/theme. EnterUI components read them through their own --eui-* aliases.

Color · brand and neutral
Primary green#5EC551--fd-color-brand-green
Lime#91D851--fd-color-brand-lime
Aqua mint#78D7CC--fd-color-brand-aqua
Charcoal#111827--fd-color-neutral-charcoal
Slate#1F2937--fd-color-neutral-slate
Blue gray#334155--fd-color-neutral-blue-gray
Cool gray#CBD5E1--fd-color-neutral-cool-gray
Cream#FAF7EF--fd-color-neutral-cream
Almost white#F8FAF7--fd-color-neutral-almost-white
Pale green#ECFDF5--fd-color-neutral-pale-green
Color · semantic states
Success#2F9E44--fd-success
Warning#B7791F--fd-warning
Error#DC143C--fd-error
Info#0E7490--fd-info
Typography scale
  • AaDisplay / 56--fd-font-size-display
  • AaHeading 1 / 44--fd-font-size-h1
  • AaHeading 2 / 32--fd-font-size-h2
  • AaHeading 3 / 22--fd-font-size-h3
  • AaBody / 16--fd-font-size-body
  • AaLabel / 14--fd-font-size-label
Spacing & radius
  • 1 · 4px
  • 2 · 8px
  • 3 · 12px
  • 4 · 16px
  • 6 · 24px
  • 8 · 32px
  • 12 · 48px
sm · 4
md · 8
lg · 10
xl · 14
2xl · 20
Component library

EnterUI is FroggDesign in code.

EnterUI is the React and TypeScript component library built with FroggDesign tokens, theme variables, and accessible defaults. Drop it into a Next.js or React app and ship product-ready surfaces.

Open EnterUIInstallation guide
Components
51
Public exports
200+
CSS files
4
Themes
Light · Dark
Install
pnpm install @froggdesign/enter-ui @froggdesign/theme
app/layout.tsx
import "@froggdesign/theme/styles.css";
import "@froggdesign/enter-ui/styles.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en" data-theme="light">
      <body>{children}</body>
    </html>
  );
}
Components

Real components, ready to ship.

Live previews — every element below renders the actual EnterUI component reading from the FroggDesign theme.

ActionsButton · Badge
StableBeta
CardCard

Component coverage

Tracking the EnterUI surface and tokens it consumes.

Stable
Form fieldField · Input

Used as the npm scope for published packages.

SelectionCheckbox · Switch
FeedbackAlert

Token-driven by default

Every component reads color, radius, and spacing from FroggDesign theme variables.

Accessibility built in

Focus-visible, keyboard support, and ARIA semantics are part of the default API.

DataTable
PackageStatusCoverage
@froggdesign/tokensStable120+ tokens
@froggdesign/themeStable4 CSS entry points
@froggdesign/enter-uiActive51 components
DialogDialog · static preview
Resources

Continue from here.

Documentation, references, and patterns for both FroggDesign and EnterUI.

Design System Guide

Start with the package model, theming layers, and styling philosophy.

Token Reference

Every color, typography, spacing, radius, and shadow token in one place.

Theming

Override CSS variables at any level — scope, app, or token foundation.

Accessibility

Focus management, keyboard support, color contrast, and ARIA notes.

EnterUI Docs

Component reference with previews, props, and copy-pasteable examples.

Production checklist

SSR, hydration, bundle size, and theming considerations before shipping.

Build product UI with a calm, consistent foundation.

FroggDesign tokens and EnterUI components ship as public npm packages. Pull them in, and your team starts shipping with the visual language already decided.

View EnterUIRead installation guide