Skip to content
FroggDesign
SystemTokensEnterUIComponentsResources
Open EnterUI
Parent design system for product UI

FroggDesign

The visual language behind consistent product interfaces.

Explore EnterUIView Tokens
System previewToken driven
Background--fd-background
Foreground--fd-foreground
Muted text--fd-foreground-muted
Border--fd-border
Interface surfaceNeutral foundation, green cue.
System map

One visual language, clear product layers.

FroggDesign owns the foundation. EnterUI turns that foundation into shippable product components.

FroggDesign

Parent design system

The visual language behind consistent product interfaces, backed by tokens and theme rules.

EnterUI

Component system

React and SolidJS renderer packages built on top of FroggDesign variables.

@froggdesign/theme

Theme layer

CSS variables, semantic mappings, light mode, dark mode, and runtime theming hooks.

@froggdesign/tokens

Token source

The versioned primitive values for color, type, spacing, radius, shadow, and semantics.

Design principles

Consistent design. Predictable interactions.

01

Neutral first, color as signal

Neutral surfaces organize content. Color communicates status, selection, and actions.

02

Soft surfaces, sharp hierarchy

Typography, spacing, and borders make content hierarchy clear.

03

Built for everyday use

Readable text, consistent controls, and predictable layouts support everyday product workflows.

04

Precise interaction states

Clear hover, focus, selected, disabled, and error states help users understand every action.

05

Accessible and scalable foundations

The system favors semantic HTML, keyboard support, contrast, and tokenized decisions from the start.

Token foundation

Shared tokens for every interface.

Tokens describe visual roles instead of page decoration: surface, foreground, border, type, rhythm, radius, shadow, and state.

Color

BackgroundSlate 50--fd-background
ForegroundCharcoal--fd-foreground
Muted textGraphite--fd-foreground-muted
BorderSlate 200--fd-border
Brand cueSmall signal--fd-color-brand-green
InfoSemantic--fd-info

Typography

Display56px--fd-font-size-display
H144px--fd-font-size-h1
H232px--fd-font-size-h2
Body16px--fd-font-size-body
Label14px--fd-font-size-label

Spacing

4px
8px
16px
24px
40px

Radius & shadow

SmallSubtle corners
LargeSoft elevation
2XLRaised surface

Shared radius and shadow tokens keep cards, menus, and dialogs consistent.

Product library

EnterUI brings FroggDesign into production React interfaces.

Built with TypeScript, FroggDesign CSS variables, and class-based styling. Tailwind is optional, not required.

  • Beautiful by default, flexible by design.
  • Theme once through variables, then compose normally.
  • Product-oriented defaults for forms, overlays, tables, and shell UI.
Open EnterUI DocsInstall Package
pnpm add @froggdesign/enter-ui-react @froggdesign/theme
Import the theme once, then import EnterUI styles.
Component preview

Components for everyday product workflows.

Workspace release

Review, configure, and deploy from one workspace.

Token-driven by default

Surfaces, borders, focus, and states inherit FroggDesign variables.

Design system healthComponents · Tokens · Docs
Stable
105docs pages4packages100%typed
Resources

Everything points back to the same system.

Available

Tokens

Color, typography, spacing, radius, shadow, and semantic foundations.

Available

Theme

CSS variables and theming strategy for product teams.

Available

EnterUI

The component system for building consistent product interfaces.

Available

Guidelines

Accessibility, SSR, production readiness, and migration notes.

Available

Changelog

Package release history and migration context.

Build with FroggDesign

Build consistent product interfaces.

Use EnterUI components and shared design tokens to keep your product consistent across screens and themes.

Explore EnterUIExplore tokens
© 2026 FroggDesign. All rights reserved.