Website template
Grayscale
A multipurpose one page Bootstrap theme created by Start Bootstrap
Landing Page · Free
Pages
Screenshots of the live demo, page by page. Scroll inside a page to see all of it.
Design breakdown
An AI reading of this template's design: colors, type, spacing, sections and signature details. Ottermind starts from it when you use the template.
- Overall
landing page, minimalist, low density, dark
- Palette
background #ffffff; surfaces [#f8f9fa, #000000, #64a19d]; text #000000; muted text #ffffff; primary #64a19d; accents []
- Type
headings Varela Round, 500, uppercase; body Nunito, 16px; scale h1 104px / h2 20px / h3 16px
- Shape & spacing
button/card radius 6px, no borders, subtle drop shadows, section spacing 80px, content width 1224px
- Sections (top to bottom)
- Hero — full-width grayscale mountain image overlay, centered headline "GRAYSCALE" in large uppercase, subheading in sentence-case, teal CTA button "GET STARTED", navigation bar with logo and links at top-right
- Feature — dark background, centered heading "Built with Bootstrap 5", paragraph text below, tablet mockup angled at bottom right showing theme preview
- Portfolio — grid of four black-and-white landscape images with alternating text blocks on white or black backgrounds, each with title and description, vertical teal accent line on left of first block
- Newsletter — dark background with foggy mountain backdrop, centered email input field and teal "NOTIFY ME!" button, subscription prompt above
- Footer — three light cards with icons (address, email, phone), contact details, social icons (Twitter, Facebook, LinkedIn), copyright text centered
- Signature details
- Monochromatic grayscale imagery throughout
- Teal accent color used sparingly for CTAs and highlights
- Clean sans-serif typography with contrast between bold headings and soft body text
- Floating tablet mockup with transparent screen effect
- Minimalist card layout with consistent padding and rounded corners
- Subtle gradient overlays on hero and footer sections
- Other pages
- /about: not shown
- /projects: not shown
- /contact: not shown
Template details
- Category
- Landing Page
- Built with
- Bootstrap, HTML5
- License
- MIT
- Author
- Start Bootstrap
- Listed on
- Start Bootstrap
- Price
- Free
- bootstrap
- bootstrap-4
- bootstrap-5
- bootstrap-5-template
- bootstrap-template
- bootstrap-theme
- bootstrap4
- bootstrap5
- bootstrap5-template
- css
- free
- html
Original design by Start Bootstrap, listed on Start Bootstrap. Ottermind does not copy the template's code; it builds a new site from the brief.
The brief Ottermind starts from
It opens in Studio as a draft — add your brand, audience and pages before you send.
Build a landing page website inspired by the "Grayscale" template. Reference brief: A multipurpose one page Bootstrap theme created by Start Bootstrap Style and features to reflect: bootstrap, bootstrap-4, bootstrap-5, bootstrap-5-template, bootstrap-template, bootstrap-theme. Use original copy and imagery for my brand rather than the reference's placeholder content.
How to use this template
- 1
Click “Use this template” to open it in Ottermind Studio with its brief filled in.
- 2
Add your brand, audience, pages and content to the brief.
- 3
Ottermind builds a new site inspired by this design — keep editing it in the chat.
