Skip to content
Search

Follow Buildora

Corporate theme standards

Buildora design system

A crisp corporate visual system adapted from the mockup rhythm: bold utility, clean white space, focused red action states, compact cards and confident editorial hierarchy.

View Tokens Components

01 / Visual direction

A polished corporate system with strong conversion moments.

The source mockup uses strong red CTA zones, technical cards, split image compositions and stat-led proof. Buildora keeps that rhythm but replaces automotive cues with business transformation, delivery teams and strategy content.

Structured rhythm

White sections alternate with soft grey bands, dark proof sections and warm CTA panels.

Evidence first

Numbers, badges, process cards and short proof statements support the message.

Bold action

Primary coral appears on CTAs, active states, highlights and focused conversion areas.

02 / Color system

Tokens define brand action, neutral depth and status feedback.

Primary coral is used sparingly for conversion and active states. Charcoal anchors navigation, footer and dark surfaces. Teal is a restrained secondary accent for contrast and data emphasis.

Primary --eds-color-primary / #ff563d Usage: primary CTAs, active navigation states, highlight badges and decisive conversion moments.
Primary dark --eds-color-primary-dark / #d93a25 Usage: hover, pressed and stronger primary states where the action needs extra contrast.
Secondary --eds-color-secondary / #17242b Usage: dark sections, footer, navigation contrast and high-authority content bands.
Accent --eds-color-accent / #2f9c95 Usage: secondary accents, data marks and quiet contrast when primary would be too loud.
Heading --eds-color-heading / #152027 Usage: headings, card titles, navigation labels and high-priority interface copy.
Text --eds-color-text / #4e5a61 Usage: standard body copy, supporting paragraphs and readable long-form content.
Muted --eds-color-muted / #74818a Usage: supporting descriptions, captions, helper text and low-emphasis metadata.
Surface --eds-color-surface / #f4f6f7 Usage: soft section bands and alternate page rhythm between white content areas.
Surface alt --eds-color-surface-alt / #eef2f3 Usage: alternate cards, quiet panels, media placeholders and subtle UI grouping.
Border --eds-color-border / #dbe2e5 Usage: dividers, card borders, form controls, table rules and popup outlines.
White --eds-color-white / #ffffff Usage: default page areas, card surfaces, popups and high-clarity content zones.
Black --eds-color-black / #0b1115 Usage: deepest contrast, dark buttons and rare emphasis where charcoal is not strong enough.
Success --eds-color-success / #248a54 Usage: success alerts, completed states and valid form feedback.
Warning --eds-color-warning / #b76e00 Usage: warning alerts, caution states and time-sensitive operational notices.
Error --eds-color-error / #c73225 Usage: invalid fields, danger alerts and destructive or failed-state messaging.

Action colors

Use primary coral only for decisive actions, active navigation, badges and high-emphasis highlights. Use primary-dark for hover or pressed states.

Neutral colors

Use heading, text and muted tokens to keep hierarchy clear. Surface and border tokens create the grey bands and card edges from the mockup rhythm.

Status colors

Use success, warning and error only for feedback states such as alerts, validation and operational notices.

03 / Font system

Inter defines the theme's readable corporate voice.

The static preview loads Inter from Google Fonts for cross-environment consistency, then falls back to reliable system UI fonts if the CDN is unavailable.

Heading font / --eds-font-heading

Inter shapes decisive section headings.

Primary heading font: Inter. Use for display titles, section headings, subtitles and card titles.

Body font / --eds-font-body

Inter keeps operational content clear across cards, forms, navigation and longer paragraphs.

Primary body font: Inter. Use for standard copy, helper text, descriptions and UI labels.

Fallback stack "Segoe UI", Roboto, Arial, sans-serif
Loaded weights 400, 500, 600, 700, 800
Loading strategy

Google Fonts CDN for static preview and cross-environment consistency, with font-display: swap .

DNN note

Production DNN can keep CDN loading or move font loading into the skin asset pipeline later.

400 Body copy

Used for readable paragraphs and standard content.

500 Navigation

Used for navigation, labels and light emphasis.

600 Labels

Used for supporting emphasis and compact UI text.

700 Subtitles

Used for subtitles, card titles and strong UI text.

800 Display

Used for display titles and main section headings.

04 / Typography system

Production type classes are explicit and reusable.

The typography scale uses Inter through shared font tokens, with distinct reusable classes for display headings, section titles, subtitles, body copy, captions and quotes.

Display / .eds_displayTitle

Build with confidence

Usage: one per page at most, reserved for hero or major campaign-level statements. Weight/scale: heaviest display weight with the largest responsive scale.

Title / .eds_title

Operational clarity for growing companies

Usage: default section heading for reusable page blocks and style guide sections. Weight/scale: bold heading weight with responsive section scale.

Large title / .eds_title .eds_title--lg

A stronger operating model

Usage: high-emphasis split sections, CTA bands and page intro moments below display scale. Weight/scale: same title weight, enlarged for premium moments.

Medium title / .eds_title .eds_title--md

Teams, tools and execution paths

Usage: content groups, service intros, card clusters and secondary section headings. Weight/scale: title weight at a contained subsection scale.

Small title / .eds_title .eds_title--sm

Delivery readiness review

Usage: card titles, compact panels, feature labels and form-adjacent headings. Weight/scale: compact title scale with strong weight for scanability.

Subtitle / .eds_subtitle

Sharp messaging for cards, forms and proof modules.

Usage: short supporting emphasis inside popups, side panels and proof modules. Weight/scale: medium-small scale with bold emphasis, not a full heading replacement.

Intro / .eds_intro

Intro copy sits below major headings and should explain the business outcome in one or two clear sentences.

Usage: section intro paragraphs below `.eds_title`; keep to one or two sentences. Weight/scale: larger body scale with regular weight and generous line height.

Body / .eds_text

Body text is calm, readable and direct. It supports the page message without competing with section titles or CTA states.

Usage: normal paragraph content in cards, content blocks, forms and documentation. Weight/scale: baseline body scale with regular weight.

Small text / .eds_textSmall

Small text is used for helper copy, metadata, captions and secondary descriptions.

Usage: helper copy, metadata, explanatory notes and low-emphasis detail text. Weight/scale: smaller body scale with muted color.

Eyebrow / .eds_eyebrow

Advisory systems

Usage: section category label placed above headings; not a substitute for navigation text. Weight/scale: uppercase micro scale with extra-bold weight and dot marker.

Caption / .eds_caption

Caption text supports media, tables and compact annotations.

Usage: media captions, table notes, copyright text and compact legal/support text. Weight/scale: smallest readable scale with regular weight.

Quote / .eds_quote
"Buildora helped us turn a scattered roadmap into a measurable operating plan."

Usage: testimonials and editorial quotes; pair with attribution metadata when used in demo pages. Weight/scale: larger expressive scale with bold weight and relaxed line height.

Lists and links

Inline links use .eds_textLink and directional calls use .eds_arrowLink .

  • Keep paragraphs short and useful.
  • Use bullets when content needs scanning.
  • Maintain strong heading-to-body contrast.

05 / Spacing rhythm

Sections breathe, cards stay compact and content scans quickly.

The spacing system follows the mockup's alternating bands and compact information modules while giving corporate content more editorial room.

Spacing tokens
xs
sm
md
lg
xl
Section header relationship

Planning sprint

From strategy to measurable delivery

Eyebrow, heading, intro and action spacing are standardized so section rhythm stays consistent across pages.

Primary action Secondary

06 / Layout specimens

Shared layout patterns define how sections compose before block CSS.

These examples document the default structure for contained content, full-bleed bands, splits, grids and asymmetric media/content layouts.

Contained section

Contained

Content constrained by Bootstrap container width.

Use this for most corporate content sections where scanability and line length matter.

Full bleed

A full-width visual band with contained inner content.

Use full-bleed sections for CTA, proof, brand or campaign moments that need stronger rhythm.

Two-column split / .eds_split

Strategy

A balanced content and media split.

Use for service intros, feature explanations and page sections where the image supports the message.

Corporate presentation in a meeting room
Three-column grid / .eds_grid--3

Plan

Define the operating target and decision model.

Build

Shape the systems, teams and delivery cadence.

Scale

Track outcomes and improve execution quality.

Four-column icon grid / .eds_grid--4

Direction

Systems

Teams

Metrics

Asymmetric media/content layout
Team planning a business project

Asymmetric

A stronger editorial layout for premium content blocks.

Use this when media is the visual anchor and the text needs to sit as a concise, elevated companion.

Review layout rule
Homepage service navigation / .eds_serviceNavigationTiles
Contact Us Delivery Systems Reporting
Support highlight cards / .eds_supportHighlightsGrid

Operating model

Unlimited alignment

Reusable support cards carry short service promises with strong hierarchy.

Executive cadence

Meeting systems

The plus rail adapts the mockup customer-service cards for corporate content.

Solution hero overlay / .eds_solutionHeroOverlay

Best operating solutions

Find the right operating system for your team.

Trusted service model

Compact proof cards sit over image-backed hero bands.

Metrics and advantage band specimens
56250+ hours of work
32160+ happy customers
1600+ experienced workers
16+ years of experience

Delivery view

Low process drag

Safety

Animated counters / .eds_countUp + data-eds-count-up
120+

Integer counter renders the final value in HTML, then animates from zero when JavaScript starts.

3.8x

Decimal counter can parse precision from the final text or use an explicit decimals attribute.

42%

Percent counter with an accessible label for screen readers.

Counters start once when their trigger enters the viewport; inside an OnView reveal class or legacy [data-eds-reveal] , that reveal container is the trigger. Render the final value in HTML so the number remains correct when JavaScript fails. Animation is enabled by default for theme previews; use data-eds-count-motion="reduce" to respect browser reduced-motion settings or data-eds-count-motion="off" to leave the final value untouched. Optional data-eds-count-to , prefix, suffix, decimals, duration and delay attributes can override the parsed final text. Do not use aria-live ; add aria-label when suffixes need clearer final-value wording.

07 / Components

Shared components avoid repeating visual styles in block partials.

These classes are the default toolkit for future demo pages and reusable block extraction.

Section headers / .eds_sectionHeader

Default

Left aligned standard header

Used on most content and feature sections.

Centered

Centered header variant

Used for proof, pricing, logos and compact grids.

Buttons / .eds_btn variants
Primary Secondary Outline Light Dark Small Large Disabled
Cards / .eds_card variants

Default card

Bordered surface for neutral content and compact feature lists.

Elevated icon card

Used for services, values and key benefits.

Team reviewing project notes
Insight

Link media card

Media cards use hover zoom and a clear content hierarchy.

Horizontal and compact cards
Workshop board with planning notes

Horizontal card

Useful for news, services and related resources.

Proof point

Compact dark card

A compact proof surface for dark bands or side panels.

Icons / .eds_iconBox variants
Badges, tags and meta
Featured Operations Growth 4 week sprint
Forms / .eds_form
Use helper copy for expected input.
Enter a valid business email.
Selection available.
Links / .eds_textLink and .eds_arrowLink

A paragraph can include a default text link and a muted link .

Explore advisory services Read delivery framework

08 / Media treatment

Images are cropped, framed and composed as designed surfaces.

Future demo pages should avoid raw images. Use media frames, aspect ratios, overlays and card crops to keep the theme polished.

Corporate team discussing strategy around a table
Planning notes and meeting table
Business consultant presenting analysis
Team workshop in a modern office

Image background

Readable overlay treatment

Background images need overlays that preserve contrast for headings and actions.

Meeting room with a collaborative business team

Video embed frame

Use the same media frame logic for image cards and video placeholders.

Portrait of a business advisor Buildora logo sample

09 / Surfaces

Surface classes create section rhythm and hierarchy.

Use these shared classes before creating block-specific backgrounds.

.eds_surface

White default content surface.

.eds_surface--soft

Soft grey section background.

.eds_surface--dark

Dark high-contrast proof or footer surface.

.eds_surface--gradient

Campaign CTA and high-emphasis section background.

10 / Header and navigation

The required header pattern is reusable across demo pages.

The live page header and the specimen below use the same class family: logo, responsive menu, required dropdown wrappers, grouped mobile tools, popup panels and CTA.

Contact
Client links

Specimen popup content.

Grouped tools
Client
Social links
Mobile grouped tools pattern
.eds_toolsTriggerWrapper .eds__toolsTrigger #edsToolsPopup

Breakpoint decision: header tools align to `xl`, matching the main menu breakpoint. Below `xl`, individual search, user and social buttons collapse into one tools trigger that opens the grouped `edsToolsPopup` panel.

11 / List standards

Lists should feel like Buildora content, not browser defaults.

Use the shared list classes for DNN HTML modules, cards, service pages and content blocks. Markers inherit Buildora spacing, font rhythm and primary action color.

Unordered list

  • Clarify the operating goal.
  • Map ownership and decision rights.
  • Track progress through a shared signal.

Ordered list

  1. Diagnose the current cadence.
  2. Design the working system.
  3. Launch the first operating cycle.

Checklist

  • Executive rhythm defined.
  • Workstreams connected.
  • Escalation paths visible.

Icon list

  • Operating architecture and role clarity.
  • Signals that reveal movement and drag.
  • Repeatable governance and review cadence.

Compact list

  • Board-ready operating view.
  • Weekly leadership cadence.
  • Portfolio-level escalation map.

Dark surface list

  • White text rhythm with primary markers.
  • Readable spacing inside dark panels.
  • Works for CTA and proof surfaces.

Nested list

  • Leadership cadence
    • Weekly priority review.
    • Monthly decision forum.
  • Delivery signal
    • Risk, dependency and progress indicators.
    • Owner-ready escalation notes.
List inside card

Engagement output

  • Operating model map.
  • Meeting and decision architecture.
  • Signal dashboard definition.

12 / Rich text

Editorial content has a controlled default wrapper.

Wrap DNN HTML module output and long-form static content in .eds_richText so paragraphs, headings, links, lists, quotes and dividers follow Buildora rules.

Operating systems need plain language.

Buildora turns ambiguous transformation work into practical routines that leaders can use every week.

Paragraph spacing stays calm and readable. A paragraph link uses the primary color, while strong text and emphasis stay aligned with the heading tone.

What the wrapper supports

  • Unordered lists with tokenized marker color.
  • Comfortable spacing for editorial modules.
  1. Diagnose the work system.
  2. Launch the cadence.
Better execution starts when decisions, ownership and evidence are visible in the same rhythm.
Figure captions use muted text and compact spacing.

13 / Forms

Form controls are quiet, readable and clear in every state.

Use Bootstrap-compatible controls with Buildora wrapper classes for focus, helper, error and success feedback.

Helper text explains what belongs in the field.

Success text confirms a valid state.

Error text explains how to correct the field.

Choice controls

Inline form

Dark surface form

14 / Card variants

Cards cover content, links, media and compact operational UI.

Use shared card variants before creating section-specific card styling.

Base card

Default card with border and calm spacing.

Elevated card

Used in feature grids and high-value panels.

Bordered card

Use when elevation should stay minimal.

Dark card

For compact contrast in proof and CTA areas.

Link card

Clickable card

The full card can act as the target.

Compact card

Dense supporting content.

Planning session

Horizontal card

Media and content sit side by side.

Team working

Media card

Image zoom behavior is built in.

Meta / action

Icon card

Cards can include metadata and actions.

View detail

15 / Surfaces, badges and meta

Surfaces control page rhythm and content contrast.

Surface classes define background context. Badges, tags and meta labels keep small content elements consistent.

.eds_surface

White base surface.

.eds_surface--soft

Soft page band surface.

.eds_surface--alt

Alternate subtle panel surface.

.eds_surface--dark

Dark surface with readable text.

Dark link

.eds_surface--gradient

Gradient surface for emphasis.

  • List markers remain branded.

Badges and tags

Badge Tag Meta label

16 / DNN HTML module preview

Default editorial output should be wrapped and controlled.

This specimen simulates normal DNN HTML module content inside .eds_richText with tables, alerts, links, lists and quotes.

Quarterly operating reset

Buildora helps leadership teams create a shared operating view for goals, workstreams, owners and decisions. The content can include a standard text link without falling back to DNN default styling.

What the module can include

  • Unordered editorial list items.
  • Nested supporting detail.
    • Priority decisions.
    • Delivery risks.
  1. Run discovery.
  2. Define cadence.
  3. Transfer the playbook.
Teams do not need more reporting. They need a clearer operating signal.
Module note

Alerts can sit inside editorial content when a note needs extra attention.

Area Signal Decision
Portfolio Dependency load Rebalance ownership
Delivery Cycle risk Escalate blocker

17 / Alerts and tables

Operational pages need clear feedback and data display patterns.

Tables and notices are included for future service, pricing and contact page patterns.

Info alert

Use for neutral guidance and process notes.

Success alert

Use for completed forms and positive states.

Warning alert

Use for time-sensitive or cautionary messages.

Danger alert

Use for errors and destructive outcomes.

Alert with link

Use inline links for guidance such as reviewing the delivery note .

Service Timeline Outcome
Strategy sprint 2 weeks Prioritized roadmap
Operations audit 4 weeks Process improvement plan
Delivery enablement 6 weeks Execution operating model

18 / Motion

Motion follows the Aurora OnView contract.

Use BlockBuilder-compatible OnView classes for scroll reveals. Motion is progressive enhancement; content remains visible without JavaScript and demo/static previews animate by default.

Fade in

fadeInOnView is the quiet option for logo clouds, rich text and supporting panels.

Fade in up

fadeInUpOnView is the Buildora default for section headers, cards, stats and CTA content.

Directional split reveal

Use fadeInLeftOnView and fadeInRightOnView only when media/content direction supports it.

Allowed presets: None, fadeInOnView , fadeInUpOnView , fadeInDownOnView , fadeInLeftOnView and fadeInRightOnView . Add data-eds-animation-motion="reduce" to the skin root or an animated element to opt into browser reduced-motion behavior, or data-eds-animation-motion="off" to disable OnView animation. Avoid pulse, tada, flip, rotate, lightSpeed and Big fade variants for Buildora corporate layouts.

19 / Accessibility

Interactive states must be visible and keyboard friendly.

The system includes `:focus-visible`, aria labels for icon-only controls, decorative icon handling and visible invalid form states.

Button focus
Link focus Focused link pattern
Icon-only control

20 / Utilities

Small helpers keep layout work consistent.

Use utilities for common text, max-width and vertical stack needs before adding one-off block rules.

Text utility

.eds_textMuted

Muted helper copy used for secondary information.

Max width utilities

.eds_maxWidthSm , .eds_maxWidthMd , .eds_maxWidthLg

Use these to keep copy, forms and feature groups at readable widths.

Stack utilities

.eds_stackSm , .eds_stackMd , .eds_stackLg

Use these for predictable vertical rhythm inside documentation, cards and side panels.

Spacing and anchors

.eds_section , .eds_anchorOffset , .eds_visuallyHidden

Use section spacing for page rhythm, anchor offset for sticky-header jumps and visually hidden text for accessible labels.

21 / Footer specimen

Footer combines brand, links, contact and a focused CTA.

The footer is intentionally dark to close the page with a direct next step and echo the mockup's high-contrast final band.

Corporate advisory, operating systems and digital delivery support for ambitious teams.

Company

Support

Next step

Plan a focused working session.

Bring your priorities, open decisions and delivery questions. We'll help you turn them into a clearer operating rhythm.

Start a Conversation
Copyright 2026 Buildora. All rights reserved. Built as a static Bootstrap theme preview.