Eth2 UI

Eth2 UI is an open source front-end framework for Eth2.

What is Eth2?

Eth2 refers to a set of interconnected upgrades that will make Ethereum more scalable, more secure, and more sustainable.

The Eth2 upgrades

Eth2 is a set of upgrades that improve the scalability, security, and sustainability of Ethereum. Although each is being worked on in parallel, they have certain dependencies that determine when they will be deployed.

1. The Beacon Chain (Shipped!)
2. Shard chains (~2021)
3. Docking mainnet with Eth2 (~2021/22)

Eth2 UI Foundations

The foundations on which the Eth2 UI is built with consistency and quality are:

1. Accessibility
2. Grid
3. Color
4. Iconography
5. Motion
6. Sizing and Spacing
7. Default theme
8. Typography

Design Patterns

Patterns are a simple, reusable solution to a design problem.

• Call-to-action
• Cards
• In-page navigation

Components

A series of individual styles and components, with no framework tax, no framework silo.

• Blockie
• Breadcrumb
• Button
• Code snippet
• Data table
• Card component (or Tile)
• Card group
• Connection banner
• Content block
• EthAddress
• Group
• Horizontal rule
• Image (Responsive)
• Link
• List
• QR Code
• Tag

The included source files are written in Sass using SCSS syntax.

eth2-components/
├── css
│   ├── eth2-components.css
│   └── eth2-components.min.css
├── scripts
│   ├── eth2-components.js
│   └── eth2-components.min.js
├── scss
│   └── components
│       └── tag
│           └── tag.scss
└── src

Eth2-UI Sample