AnoLogix
A warm, confident system built on Arboria display type, a single decisive orange, and near-black panels that let the work photograph well. Every value below is a token — change it once, and it moves everywhere.
Palette
Orange carries every action. The blue secondary is its companion, for the quieter half of a button pair. Ink carries every word. Everything else is a surface that stays out of the way. All 24 colours below are tokens, and the same 24 are loaded into Beaver Builder's Global Styles so native modules can use them.
Typography
Arboria Bold sets every heading. Arboria-Book sets every paragraph. Rubik is the interface face: buttons, navigation, filter chips and meta lines. Display and H1 are two different styles, not one: Display is up to 120px and uppercase, reserved for hero-scale moments; H1 is up to 88px and sentence case, and is what an ordinary page heading uses. Sizes are fluid, so they scale with the viewport rather than stepping at breakpoints (ranges are shown below). Beaver Builder's Global Styles carry the same faces into native modules in fixed steps: H1 80 / 64 / 40px (desktop / tablet / phone), H2 48 / 44 / 34, H3 32 then 25, H4 28 then 22, H5 22, H6 18, and body 22px on desktop and 18px on phones. Links are orange and darken to #CE561D on hover. Headings take no colour of their own, so they inherit white on dark panels and ink on light ones.
- More impact
- Page heading
- Section heading
- Large sub-heading
- Card heading
- Sub-heading
- Section eyebrow
- Lead paragraph — the sentence that carries the promise of the section and earns the scroll.
- Body copy. The default reading size, set at 18px on phones and 22px from 835px up, matching the live site's rhythm.
- Supporting copy, captions, card body, and form labels.
- Meta line, filter chip and small button label
Components
Light card
White surface, hairline border, 10px radius, and a soft shadow that deepens on hover.
Read moreDark card
The signature service-card treatment — near-black panel, orange rule, white type.
Learn moreDivider mark
The brand spacer, redrawn as vector: a 46px dash, a 15px gap, then a 16px dash — 77×6 in total, inheriting its color from currentColor. Left-aligned by default; it centers only inside a centered section head.
Accordion
Beaver Builder's own Accordion module. The DS turns the open question and its icon primary orange and drops the click outline (keyboard focus keeps the DS ring). Set per instance: white label and content backgrounds, ink questions, muted answers, a 1px --ds-color-border border with 10px radius, 12px item spacing, 18/24px label padding, questions 20px bold and answers 18px.
Tables
For pricing guides, comparisons and schedules. A rounded card frame, an ink header row, zebra body rows and right-aligned figures. Wide tables scroll inside the frame on phones, never the page.
| Plan | Visits | Response | Price |
|---|---|---|---|
| Essential | 2 a year | 48 hours | $29 / mo |
| Plus | 4 a year | 24 hours | $49 / mo |
| Premium | Unlimited | Same day | $89 / mo |
.bb-table-wrap
The card frame around the table. It scrolls sideways when the table is wider than the screen. Give it role="region", an aria-label and tabindex="0" so keyboard users can scroll it.
table.bb-table
Header row in white Rubik caps on ink, body in Arboria-Book with zebra rows and a soft orange hover. Use a thead with th scope="col", and a th scope="row" as the first cell of each body row.
.bb-num
On numeric cells and their column header: right-aligned, tabular figures, no wrapping.
caption
Optional. Shows as a muted note under the table: assumptions, dates, what prices include.
In Beaver Builder
Paste the markup into a Text module's Text tab on a single line. Line breaks between tags turn into stray breaks inside the table.
The card system
On this site a card is a styled Beaver Builder column, not a Box. The column carries the gutter and paints nothing; the surface is drawn on its content. Seven patterns are built from it on the Cards AI page and twelve more on Cards AI 2. Each type is one class added next to .bb-card-shell on the column.
The one rule that matters
Never put .bb-card on a column. That class is already a finished card surface, so the column draws one card and its content draws a second one inside it — a card sitting on a card. Use .bb-card-shell on the column instead.
Parts inside a card
Plain card
The original card surface, for a plain element inside a custom module. Correct here, wrong on a column.
Dark card
The same geometry inverted onto ink.
The hero system
A hero is one native Beaver Builder row. Add .bb-hero and one variant class to the row and the system supplies the padding, ground, type scale and button styles at every screen size, so the row itself needs no padding or typography settings. All thirteen variants are shown on the Heroes page.
How to build one
Row > Advanced > CSS Class: bb-hero bb-hero-split bb-row-grid. Add bb-row-grid whenever the hero has more than one column, and size columns in twelfths. For a photo or video hero, set the image on the row background with an ink overlay of 0.6 or more and add is-dark so the copy turns white. On each page the hero title is the h1.
Parts inside a hero
The blog system
A blog listing is built from native Beaver Builder modules that read the real posts, so new articles appear on their own. Add the classes below to the modules and the system styles the post cards, the numbered list, the sidebar panel, the search box and the widget titles at every screen size. The Blog page uses all of them.
How to build one
Header: a bb-hero bb-hero-page row with the page title as the h1. Body: one row with bb-row-grid and two columns, 8 and 4 twelfths, each set to 100% at medium so the sidebar drops under the posts on tablets. Main column: a Posts module, Layout Feed, Image Beside, Post container li, with the class bb-post-feed. Sidebar column: the class bb-blog-sidebar, then a bb-widget-title heading over each widget: a Posts module with no image or excerpt and the class bb-post-list, a Search module with bb-blog-search, and a short bb-widget-copy text over the newsletter Gravity Form (form 1).
Added for the Architecture page
Four pieces the system did not have yet. Each lives in the shared base CSS, so any page on this design system can use it.
.bb-accent
Crafting extraordinary spaces
One orange word inside a heading. Heading and display sizes only, where orange passes as large text. Never on body copy, eyebrows or muted text over photos.
.bb-filter / .bb-filter-btn
Pill toggles above a filterable grid. The active chip carries aria-pressed="true" and fills with ink; only one chip is active at a time, and the first starts active. Paint and type are !important because Beaver Builder's Global Styles recolour every button and its children. Keyboard focus shows a 3px blue ring; a mouse click shows none.
.bb-tile
Residential
Modern Villa
A linked photo with its caption on a bottom scrim that holds ink at 78% across the caption band. The kicker is inverse-muted, never orange.
.bb-card-shell .card-meta
The date and category line on article cards. On native pages it is a Text module with class card-meta inside a bb-card-shell column. Muted Rubik, uppercase, never orange.
Scales and reference
Spacing
- --ds-space-3xs · 4px
- --ds-space-2xs · 8px
- --ds-space-xs · 14px
- --ds-space-sm · 20px
- --ds-space-md · 30px
- --ds-space-lg · 44px
- --ds-space-xl · 64px
- --ds-space-2xl · 88px
- --ds-space-3xl · 120px
Radius
- --ds-radius-sm · 4px · inputs
- --ds-radius-md · 10px · cards
- --ds-radius-lg · 15px · media
- --ds-radius-xl · 30px · panels
- --ds-radius-pill · buttons
- --ds-radius-circle · portraits
Elevation
- --ds-shadow-sm · resting card
- --ds-shadow-md · hover
- --ds-shadow-lg · raised panel
- --ds-shadow-float · hero media
- --ds-shadow-focus · form field focus
Reference tokens
- --ds-font-heading / body / ui / mono Arboria Bold for headings, Arboria-Book for text, Rubik for interface, and a monospace for token labels. Each falls back to Poppins, then Helvetica Neue, Arial and sans-serif.
- --ds-weight-light / regular / medium / semibold / bold 300 / 400 / 500 / 600 / 700. Headings use bold, buttons and chips medium, body copy regular.
- --ds-line-tight / snug / heading / body / relaxed 0.92 / 1.12 / 1.2 / 1.5 / 1.65. Display, page heading, other headings, body copy, and lead or long-form copy.
- --ds-letter-display / normal / wide / eyebrow / button −0.01em / 0 / 0.1em / 0.42em / 0.1em. Tight on big headings, wide on meta lines and chips, widest on eyebrows.
- --ds-space-section 56–120px, fluid. Vertical padding of every full-width section.
- --ds-space-gutter 20–40px, fluid. Side padding of the container on small screens.
- --ds-transition-fast / base / slow 150ms / 260ms / 420ms. Hover colour changes, card lifts, and scroll reveals. All are switched off for visitors who prefer reduced motion.
- --ds-grid-columns / --ds-grid-column / --ds-grid-gap 12 / 81px / 28px. The values behind the 12-column grid described below.
- --ds-width-wide 1440px. Maximum width of a full-bleed band.
- --ds-color-primary-rgb / --ds-color-ink-rgb 242, 101, 34 and 24, 24, 25. The colours as RGB triplets, for translucent overlays that must stay on brand.
- --ds-system-root-font-size 16px. The base every rem value above is measured from.
12-column grid
As much as possible, content and layout sit on 12 columns of 81px with 28px gutters: 1280px in total. Every width in the system is a whole number of columns, so n columns = 109n − 28.
-
12 columns
1280px
--ds-width-containerPage container and every native row -
10 columns
1062px
--ds-width-narrowNarrow band: banners and CTAs -
8 columns
844px
--ds-width-headCentred section heads, centred heroes -
7 columns
735px
--ds-width-proseReading measure for long copy -
6 columns
626px
50%Half: 50/50 splits, 2-up -
4 columns
408px
33.33%Third: 3-up cards and tiles -
3 columns
299px
25%Quarter: 4-up cards, stats, steps
Native rows
Add bb-row-grid to the row (card rows use bb-card-grid, which carries the same gutter) and set its content max-width to 1280, or 844 for a centred head. Size columns in twelfths: 8.33, 16.67, 25, 33.33, 41.67, 50, 58.33, 66.67, 75, 83.33. The 28px gutter comes from the class, so do not pad columns to make gaps. To inset copy by one column inside a half, give it 17.41% padding on the inner side.
Custom modules
bb-container already holds exactly 1280px of content. Lay out with bb-grid-12 and bb-span-N children, or with equal tracks that divide 12 (2, 3, 4 or 6 per row) and gap: var(--ds-grid-gap). Cap text with --ds-width-prose or --ds-width-head rather than ch values.
Wrapping rows
When a native row's columns wrap onto a second line (a 6-up logo strip at 3-up on tablets, a 4-up stat band at 2-up on phones, a 3 × 2 gallery), add bb-row-wrap next to bb-row-grid. Beaver Builder columns are floats, so a sub-pixel height difference lets one column snag under another and leave a hole. The class turns the column group into a wrapping flex row; widths still come from each column's size. bb-card-grid already wraps and does not need it.
Breakpoints
Beaver Builder does not carry desktop spacing down. Below 1112px a row's left and right padding falls back to 0 unless the Medium value is set, and below 834px module margins fall back to 0 unless the Mobile value is set. Set both on every new row and module, or the grid bleeds 14px past the screen edge and headings sit on their dividers.