Layout Templates
Pre-built full-page ASCII layout templates for common patterns.
SaaS App Patterns
Dashboard
Admin dashboard with sidebar, stats, and data table
[logo] (~ - - - nav - - - ~) (avatar)
[ sidebar ] (~ - - - - - - - - - - ~)
[ sidebar ] | stat | stat | stat |
[ sidebar ] (~ - - - - - - - - - - ~)
[ sidebar ] | - - table - - - - - -|
[ sidebar ] | - - - - - - - - - - -|Inbox / Email Client
Email client with folder nav, message list, and reading pane
[logo] (~ - - - nav - - - ~) (avatar)
[ sidebar ] | - - messages - - - | (~ - reading pane - ~)
[ sidebar ] | (item) [badge] | (~ - - - - - - - - ~)
[ sidebar ] | (item) [badge] | (~ - - - - - - - - ~)
[ sidebar ] | (item) | - - - separator - --
[ sidebar ] | (item) | (~ - - - - - - - - ~)Chat / Messaging
Chat app with contacts list, message thread, and composer
[logo] (~ - - - nav - - - ~) (avatar)
[ contacts ] (~ - - - - - - - - - - ~)
[ contacts ] (avatar) msg bubble
[ contacts ] msg bubble
[ contacts ] (avatar) msg bubble
[ contacts ] (~ - input - - - ~) [send]Project Board
Kanban board with tabs, task columns, and cards
[logo] (~ - - - nav - - - ~) (avatar)
[ ● board ○ list ○ calendar - tabs ]
[ - col 1 - ] [ - col 2 - ] [ - col 3 - ]
| [card] | | [card] | | [card] |
| [card] | | [card] | | [card] |
| [card] | | | | [+ add] |Analytics / Reporting
Analytics dashboard with date picker, stat cards, chart, and table
[logo] (~ - - - nav - - - ~) [date-picker]
| stat | stat | stat | stat |
(~ - - - - - chart - - - - - ~)
(~ - - - - - chart - - - - - ~)
| - - - - table - - - - - - -|
| - - - - - - - - - - - - - -|
(~ ~) (pagination) (~ ~)User Profile
Profile page with avatar header, tabs, and activity feed
[logo] (~ - - - nav - - - ~) (avatar)
(~ (avatar) user name bio - - ~) [edit]
[ ● activity ○ settings ○ posts tabs ]
| - - - - - - - - - - - - - - - -|
| - - - - - - - - - - - - - - - -|
| - - - - - - - - - - - - - - - -|Settings
Settings with sidebar nav, form fields, toggles, and save actions
[logo] (~ - - - nav - - - ~) (avatar)
[ sidebar ] [ label ] (~ - - input - - ~)
[ sidebar ] [ label ] (~ - - input - - ~)
[ sidebar ] [ label ] (~ - select - - ~)
[ sidebar ] [ label ] [● switch]
[ sidebar ] (~ ~) [ save ] [cancel]Marketing / Content
Landing Page
Marketing landing page with hero, features, testimonials, and footer
[logo] (~ - - nav - - ~) [btn]
(~ - - - - hero - - - - ~)
(~ - - - - hero - - - - ~)
| feature | feature | feature |
(~ - - - carousel - - - ~)
(~ - - - separator - - - ~)
(~ - - - footer - - - ~)Documentation Site
Docs site with sidebar nav, breadcrumb, content area, and TOC
[logo] (~ - - - nav - - - ~)
[ breadcrumb - - - - - - - - - - - ]
[ sidebar ] (~ - - content - - ~) [ toc ]
[ sidebar ] (~ - - - - - - - ~) [ toc ]
[ sidebar ] (~ - - - - - - - ~) [ toc ]
[ sidebar ] (~ - - - - - - - ~) [ toc ]Portfolio / Gallery
Portfolio with filterable card grid and lightbox dialog
[logo] (~ - - nav - - ~)
[ ● all ○ web ○ brand ○ photo tabs ]
| card | card | card | card |
| card | card | card | card |
| card | card | card | card |
(~ ~) [ - - - dialog - - - ] (~ ~)Pricing Page
Pricing tiers with toggle, plan cards, and feature comparison
[logo] (~ - - nav - - ~)
(~ ~) [ monthly ] [●] [ annual ] (~ ~)
| [ plan ] | [● plan ] | [ plan ] |
| | [ popular ] | |
| features | features | features |
| [ btn ] | [ btn ] | [ btn ] |Changelog
Changelog with timeline, version badges, and expandable entries
[logo] (~ - - nav - - ~)
● v2.1 [badge] [accordion ▼]
│ - change detail
○ v2.0 [badge] [accordion ▼]
│ - change detail
○ v1.9 [badge] [accordion ▼]Newsletter Signup
Newsletter signup with hero, social proof badges, and featured content
[logo] (~ - - nav - - ~)
(~ - - - - hero - - - - ~)
(~ ~) [badge] [badge] [badge] (~ ~)
(~ ~) (~ - email input - ~) [btn] (~ ~)
| card | card | card |
(~ - - - footer - - - ~)Blog
Blog layout with header, article grid, sidebar, and pagination
[logo] (~ - - nav - - ~)
(~ - - - hero - - - ~)
(~ article ~)(~ article ~)[ sidebar ]
(~ article ~)(~ article ~)[ sidebar ]
(~ article ~)(~ article ~)[ sidebar ]
(~ ~) (pagination) (~ ~)Auth / Onboarding
Login / Signup
Centered login form with social login options
(~ ~) [ - - - - - - - - - - ] (~ ~)
(~ ~) | (logo) | (~ ~)
(~ ~) | [~ - - - email - - ~] | (~ ~)
(~ ~) | [~ - - password - ~] | (~ ~)
(~ ~) | [✓] remember me | (~ ~)
(~ ~) | [~ - - - login - - ~] | (~ ~)
(~ ~) | - - - - or - - - - - | (~ ~)
(~ ~) | [google] [github] | (~ ~)Onboarding Wizard
Multi-step onboarding flow with progress, form fields, and nav buttons
(~ ~) (●)───(●)───(○)───( ) (~ ~)
(~ ~) (~ ~)
(~ ~) [ label ] (~ - input ~) (~ ~)
(~ ~) [ label ] (~ select ~) (~ ~)
(~ ~) (~ ~)
(~ ~) [ back ] [ next → ] (~ ~)Password Reset
Password reset flow with email input and confirmation alert
(~ ~) [ - - - - - - - - - - ] (~ ~)
(~ ~) | Reset Password | (~ ~)
(~ ~) | [~ - - - email - - ~] | (~ ~)
(~ ~) | [~ - - - send - - ~] | (~ ~)
(~ ~) | | (~ ~)
(~ ~) | [✓ alert: email sent] | (~ ~)Data Heavy
CRM / Contact Detail
CRM contact page with sidebar, tabs, and activity timeline
[logo] (~ - - - nav - - - ~) (avatar)
[ contacts ] (avatar) Contact Name [btn]
[ contacts ] [ ● detail ○ activity ○ notes ]
[ contacts ] ● Event title [timeline]
[ contacts ] │ note text
[ contacts ] ○ Event titleE-Commerce
Product listing with filter sidebar, product grid, and pagination
[logo] (~ - - search - - ~) [cart]
[ accordion ] | prod | prod | prod |
[ filters ] | prod | prod | prod |
[ filters ] | prod | prod | prod |
[ filters ] (~ ~) (pagination)
(~ - - - footer - - - ~)File Manager
File manager with breadcrumb nav, view toggle, and context menu
[logo] (~ - - - nav - - - ~)
[ breadcrumb - - - - - - ] [● grid ○ list]
[ - folder - ] [ - folder - ] [ - file - ]
[ - folder - ] [ - file - ] [ - file - ]
[ - file - ] [ - file - ] [ - file - ]
(~ ~) [ context-menu ▼ ] (~ ~)Calendar View
Calendar with month grid, event indicators, and side panel
[logo] (~ - - - nav - - - ~) [+ new]
[ < March 2026 > - - - - - - - ]
| Mon | Tue | Wed | Thu | Fri |
| 2 | 3 | 4● | 5 | 6 |
| 9 | 10 | 11 | 12 | 13 |
| 16 | 17 | 18 | 19 | 20 |Data Explorer
Data explorer with search, filters, sortable table, and export
[logo] (~ - - - nav - - - ~)
(~ - search - ~) [select ▼] [✓ filter] [export]
| col ↑ | col | col | col |
|--------|--------|--------|-------|
| data | data | data | data |
| data | data | data | data |
(~ ~) (pagination) (~ ~)Mobile First
Mobile App Shell
Mobile shell with sticky header, scroll area, and bottom tab bar
(~ ~) [ - - - - - - - - - ] (~ ~)
(~ ~) [logo] (~ ~) [menu] (~ ~)
(~ ~) - - - - content - - - (~ ~)
(~ ~) - - - - - - - - - - - (~ ~)
(~ ~) - - - - - - - - - - - (~ ~)
(~ ~) [home][feed][notif][me] (~ ~)Mobile Feed
Mobile feed with cards, avatar author info, and floating action button
(~ ~) [ - - - - - - - - - ] (~ ~)
(~ ~) [logo] (~ ~) [menu] (~ ~)
(~ ~) (avatar) name [badge] (~ ~)
(~ ~) - - - - content - - - (~ ~)
(~ ~) (avatar) name [badge] (~ ~)
(~ ~) - - - - content - - - (~ ~)
(~ ~) [+ btn] (~ ~)