DAUB — Warm, Rustic Neo-Skeuomorphic CSS Components

1. Foundations — Surfaces & Elevation

Base Surface

Raised Surface

Inset Surface

Pressed Surface

Elevation Scale

Elevation 1

Elevation 2

Elevation 3

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Body text — The quick brown fox jumps over the lazy dog. Source Serif 4 at 16px with 1.6 line height gives comfortable reading.

Caption text — Cabin humanist sans for UI labels and small text.

2. Controls — Buttons

2b. Controls — Text Fields

Full Name Your display name

Focused Field

Email Please enter a valid email

Disabled

Message

2c. Controls — Checkbox, Radio, Switch, Slider

Checkboxes

Enable notifications Dark mode Auto-save

Radio Group

Small Medium Large

Switches

Wi-Fi

Bluetooth

Location

Slider

Volume 65

Brightness 40

3. Navigation — Tabs

Welcome to the overview panel. DAUB is a warm, tactile UI kit built with care for the 8px grid, organic typography, and the joy of physical materials translated to screen.

28 production-ready components. Vanilla JS + CSS. No build step required. Accessible by default with full keyboard navigation and ARIA attributes.

Free and open source. Drop into any project with just two files: daub.css and daub.js.

3b. Navigation — Breadcrumbs

3c. Navigation — Pagination

3d. Navigation — Stepper

Account

Profile

3

Settings

4

Review

4. Data Display — Cards

Passionate about creating interfaces that feel as tangible as the real world. Loves texture and warmth in digital spaces.

Building the bridge between skeuomorphic beauty and modern performance. Ships CSS that sparks joy.

A complete component library with 28 hand-crafted pieces. Warm cream palette, 8px grid, organic feel.

4b. Data Display — List Items

Project Proposal.pdf

Modified 2 hours ago

New

Hero Banner.png

Modified yesterday

daub.css

Modified just now

Updated

4c. Data Display — Badges & Avatars

Badges

New Updated Beta Error

Avatars

S

MD

LG

4d. Data Display — Table

Name	Category	Score	Status
Button	Controls	98	Stable
Modal	Feedback	95	Stable
Stepper	Navigation	87	New
Toast	Feedback	92	Beta

4e. Data Display — Tooltip

5. Feedback — Modal

5b. Feedback — Toast Stack

5c. Feedback — Alert Banners

Heads up

Your trial expires in 3 days. Upgrade to keep all features.

Did you know?

You can customize all colors via CSS custom properties.

Connection lost

Unable to reach the server. Check your internet connection.

All clear

Your account has been verified successfully.

5d. Feedback — Empty State

No items yet

Get started by creating your first item. It only takes a moment.

5e. Feedback — Skeleton & Progress

Skeleton Loading

Linear Progress

Progress — 30%

Indeterminate