Polymeric Design

A minimal, chemistry-inspired component design system

Definition

Polymeric Design is a UI design methodology that simplifies component classification using a concept inspired by polymer chemistry. Components are divided based on dependency and internal state:

Monomer: Stateless, reusable components with no external dependencies. Ideal for foundational building blocks like buttons and icons. Styling via scoped CSS or styled-components is permitted.
Polymer: Composite components that depend on Monomers or include state or business logic.
Page-Scoped: A directory for placing components that are only used within a specific page. These are considered an exception and are not reused elsewhere.

Examples (React)

Monomer

Stateless, no dependencies

// IconButton.tsx
import styled from 'styled-components';

const Button = styled.button`
background: transparent;
border: none;
`;

export const IconButton = ({ icon, onClick }) => (
<Button onClick={onClick}>
  <img src={icon} alt="icon" />
</Button>
);

Polymer

Uses state and Monomer (IconButton)

// LikeButton.tsx
import { useState } from 'react';
import { IconButton } from '../monomers/IconButton';

export const LikeButton = () => {
const [liked, setLiked] = useState(false);
const icon = liked ? '/liked.svg' : '/like.svg';

return (
  <IconButton icon={icon} onClick={() => setLiked(!liked)} />
);
};

Page-Scoped

Used only on one page

// Pages/Profile/ProfileCard.tsx
export const ProfileCard = ({ user }) => (
<div className="profile-card">
  <img src={user.avatar} alt="avatar" />
  <h2>{user.name}</h2>
</div>
);

Directory Structure Example

A recommended directory layout when applying Polymeric Design in a project:

src/
├── components/
│   ├── monomers/
│   │   └── IconButton.tsx
│   ├── polymers/
│   │   └── LikeButton.tsx
│   └── pages/
│       └── profile/
│           └── ProfileCard/
│               └── index.tsx
├── pages/
│   ├── index.tsx
│   └── profile/
│       └── index.tsx


      
        Components in monomers/ and polymers/ are reusable, while components under pages/ are scoped to individual routes.