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

Quiet defaults, precise decisions.

01

Neutral first, color as signal

Charcoal, slate, and quiet surfaces carry most of the interface. Green appears as a deliberate cue.

02

Soft surfaces, sharp hierarchy

Depth is subtle. Type, spacing, and edges define priority before decoration enters the composition.

03

Calm by default

The default state should feel resolved: readable, stable, and ready for repeated product work.

04

Precise interaction states

Hover, focus, selected, disabled, and invalid states are restrained but unmistakable.

05

Accessible and scalable foundations

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

Token foundation

A restrained system beneath 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

Display56--fd-font-size-display
H144--fd-font-size-h1
H232--fd-font-size-h2
Body16--fd-font-size-body
Label14--fd-font-size-label

Spacing

4px
8px
16px
24px
40px

Radius & shadow

Rounded enough to feel modern, restrained enough to stay product focused.

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

Product UI without ornamental noise.

Workspace release

Structured surface, quiet hierarchy.

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.

Start small

Build product UI from one calm foundation.

Start with EnterUI when you need components. Start with tokens when you need to align an existing product surface.

Explore EnterUIReview tokens
© 2026 FroggDesign. All rights reserved.