Brand Mockup Tool — Visual purposes only. Not a live website.
© ceiv designs

Primary Colours

Secondary Colours

Text Colours

Heading
Body
Muted
Link
Link Hover
Nav
On Dark

Fonts

Heading Font
The quick brown fox
Body Font
Body text example — readable and clear at any size.

Logo

No logo loaded

Element Inspector

Colour

Welcome to our brand

We build things people love to use

A full paragraph of body text that explains the value proposition clearly. This is what visitors read first, so it needs to communicate quickly and confidently.

Get Started Learn More
Hero image placeholder
✓
Free consultation
★
Award-winning design
↑
Results driven
♥
200+ happy clients

What we do

Our services

We help brands think clearly about design and build things that last. Here are three of our core service areas.

Image placeholder
Design

Brand Identity & Visual Systems

From logo to full design language, we build cohesive visual systems that scale across every touchpoint.

Read more →
Image placeholder
Development

Web & Digital Experiences

Fast, accessible, and beautifully crafted websites and applications that perform as well as they look.

Read more →
Image placeholder
Strategy

Content & Communication Strategy

Clear messaging, structured content systems, and communication frameworks that help teams move faster.

Read more →

Our approach

We start with understanding, not assumptions

Every project begins with a deep dive into what you actually need — not what we assume you need. This means better outcomes, fewer revisions, and work you're genuinely proud of.

Image placeholder

Style guide

Typography

H1
Heading One — Display
H2
Heading Two — Section
H3
Heading Three — Card
H4
Heading Four — Label
Body
Body text — this is a full paragraph of body copy used to explain ideas clearly. Good typography makes reading effortless and keeps people engaged longer with your content.
Small
Small / caption text — used for supporting information, metadata, dates, and fine print. Legibility at small sizes matters as much as impact at large ones.
LinkThis is a text link — hover to see the hover state

Style guide

Buttons & Badges

Primary Secondary Outline Muted

Style guide

Forms

Style guide

Tables & Alerts

ItemCategoryStatusValue
Brand Design PackageDesignActive$4,500
Website DevelopmentDevelopmentIn Progress$8,200
Content StrategyStrategyDraft$2,100
SEO AuditMarketingReview$950
Success: Your changes have been saved and are live.
Info: This section is still being updated. Check back soon.
Note: This is a visual mockup only — not a live website.
Created with ceiv designs Brand Mockup Tool · For visual and planning purposes only · Not a live website ceivdesigns.com
${brandName} — Brand Colour Guide
${logoHtml}
Brand Colour Guide
ceivdesigns.com
hello@ceivdesigns.com

Colour Palette

${colourRows}

Typography

Heading Font
${headingFont.replace(/['"]/g,'').split(',')[0].trim() || 'DM Sans'}
Body Font
${bodyFont.replace(/['"]/g,'').split(',')[0].trim() || 'DM Sans'}

Contrast Accessibility (WCAG)

${contrastRows}
Combination Foreground Background Ratio WCAG

AA = 4.5:1 minimum (normal text)  ·  AAA = 7:1 (enhanced)  ·  Created with ceiv designs Brand Mockup Tool

Colour Swatches

${colours.slice(0,6).map(function(c){var h=getSwatchHex(c.id);return '
'+c.role+'
'+h+'
';}).join('')}

Buttons

Primary Button
Secondary
Ghost
Primary on Dark
Outline on Dark

Typography

Heading One
Heading Two
Heading Three
Body text — this is a paragraph showing how body copy reads in this brand. Good typography makes content feel authoritative and easy to read.
Caption / muted — supporting information, metadata, and fine print at smaller sizes.
`); win.document.close(); } /* ============================================= VIEWPORT TOGGLE ============================================= */ function setViewport(mode) { const wrap = document.getElementById('mockupWrap'); const btnD = document.getElementById('btnDesktop'); const btnM = document.getElementById('btnMobile'); const mockPage = document.getElementById('mockPage'); const shell = document.getElementById('mobileShell'); const viewport = document.getElementById('mobileViewport'); if (mode === 'mobile') { wrap.classList.add('mobile-view'); btnD.classList.remove('active'); btnM.classList.add('active'); // Clone the mock page content into the mobile viewport viewport.innerHTML = ''; const clone = mockPage.cloneNode(true); clone.id = 'mockPageClone'; clone.style.display = 'block'; viewport.appendChild(clone); } else { wrap.classList.remove('mobile-view'); btnD.classList.add('active'); btnM.classList.remove('active'); viewport.innerHTML = ''; } } // Mobile clone re-sync is handled inside applyVar directly (see above) /* ============================================= MOBILE BOTTOM DRAWER / TAB BAR ============================================= */ let mobileDrawerOpen = false; let mobileDrawerTab = null; function mobileTabOpen(tab) { const panel = document.getElementById('palettePanel'); const isMobile = window.innerWidth <= 768; if (!isMobile) return; // If same tab tapped again, toggle closed if (mobileDrawerOpen && mobileDrawerTab === tab) { panel.classList.remove('drawer-open'); mobileDrawerOpen = false; mobileDrawerTab = null; _updateMobileTabActive(null); return; } // Map mobile tabs to internal switchTab IDs // 'colours' → palette (swatches), 'styles' → palette (text & styles pane is 'palette') // 'tools' → tools (colour tools pane) const paneMap = { colours: 'palette', styles: 'palette', tools: 'tools' }; panel.classList.add('drawer-open'); mobileDrawerOpen = true; mobileDrawerTab = tab; if (paneMap[tab]) switchTab(paneMap[tab]); _updateMobileTabActive(tab); } window._updateMobileTabActive = _updateMobileTabActive; function _updateMobileTabActive(tab) { ['mTabColours','mTabStyles','mTabTools','mTabExport'].forEach(id => { const el = document.getElementById(id); if (el) el.classList.remove('active'); }); if (tab === 'colours') document.getElementById('mTabColours')?.classList.add('active'); if (tab === 'styles') document.getElementById('mTabStyles')?.classList.add('active'); if (tab === 'tools') document.getElementById('mTabTools')?.classList.add('active'); } // Close drawer when tapping mockup area document.addEventListener('click', function(e) { if (window.innerWidth > 768) return; const panel = document.getElementById('palettePanel'); const tabBar = document.getElementById('mobileTabBar'); if (!panel || !tabBar) return; if (!panel.contains(e.target) && !tabBar.contains(e.target)) { panel.classList.remove('drawer-open'); mobileDrawerOpen = false; mobileDrawerTab = null; _updateMobileTabActive(null); } }); // Wrap palette panel contents in scrollable div on mobile function _wrapPanelForMobile() { if (window.innerWidth > 768) return; const panel = document.getElementById('palettePanel'); if (!panel || panel.querySelector('.panel-scroll-inner')) return; // Inject drawer handle at top if (!panel.querySelector('.drawer-handle')) { const handle = document.createElement('div'); handle.className = 'drawer-handle'; handle.onclick = () => { panel.classList.remove('drawer-open'); window.mobileDrawerOpen = false; window.mobileDrawerTab = null; if (window._updateMobileTabActive) _updateMobileTabActive(null); }; handle.innerHTML = `
`; panel.insertBefore(handle, panel.firstChild); } const actions = panel.querySelector('.panel-bottom-actions'); const wrapper = document.createElement('div'); wrapper.className = 'panel-scroll-inner'; // Move all children except handle and actions into wrapper const children = Array.from(panel.children); children.forEach(child => { if (!child.classList.contains('drawer-handle') && child !== actions) { wrapper.appendChild(child); } }); panel.insertBefore(wrapper, actions); } // Auto-detect mobile on load and resize function _initMobileLayout() { if (window.innerWidth <= 768) { _wrapPanelForMobile(); // Ensure panel is NOT collapsed on mobile (drawer handles visibility) var panel = document.getElementById('palettePanel'); var wrap = document.getElementById('mockupWrap'); if (panel) { panel.classList.remove('panel-collapsed'); panel.classList.remove('drawer-open'); } if (wrap) { wrap.classList.remove('panel-collapsed'); } document.body.classList.remove('panel-is-collapsed'); } } window.addEventListener('resize', function() { _wrapPanelForMobile(); _initMobileLayout(); }); if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', _initMobileLayout); } else { _initMobileLayout(); } /* ============================================= PANEL COLLAPSE / EXPAND ============================================= */ function togglePanel() { const panel = document.getElementById('palettePanel'); const wrap = document.getElementById('mockupWrap'); const isCollapsed = panel.classList.toggle('panel-collapsed'); wrap.classList.toggle('panel-collapsed', isCollapsed); document.body.classList.toggle('panel-is-collapsed', isCollapsed); }