Design Bible · v4 · November 2026
How Six30Labs looks, sounds and moves.
The rules behind six30labs.io. Use them for every new page, deck and campaign so the brand stays one voice across teams and vendors.
01 · Principles
Problem before productLead with the operational problem and the measured outcome, then the technology.
Proof in numbersEvery claim carries a figure, a client or a product. No adjectives without evidence.
Calm, not loudDeep teal, generous space and restrained motion. Premium comes from restraint.
One system, every surfaceSite, decks, proposals and social use the same colours, type and rules.
02 · Logo
Use the white mark and logotype on teal, the dark version on white or mist.Keep clear space equal to the height of the mark on every side.Never recolour, stretch, outline or add effects to the logo.Minimum size: mark 24px high on screen, 10mm in print.
03 · Colour
Deep teal carries the brand. Persian green and greenish teal are accents for actions, data and highlights, never large fields. Light bands of mist break up the dark sections.
04 · Typography
Poppins for headlines, Montserrat for everything you read. Headlines are bold, tight and sentence case. Labels are sentence case too: no all-caps eyebrows.
HeroPoppins 700 · 44–80px · 0.98
Six products, in production today.Section headingPoppins 700 · 36–64px · 1.02
Where we go deep.Card titlePoppins 700 · 19–24px · 1.25
COPRO on SYNC for 50+ sitesBody largeMontserrat 400 · 18px · 1.6
We find the real problem, then build the software that runs it.BodyMontserrat 400 · 15–16px · 1.6
Contractor billing, milestones and live reporting on one record.LabelMontserrat 500 · 13–15px
Case studies · Our clients05 · Layout & spacing
1280pxContent widthMax width for every section, 32px side padding (16–20px on phones).
88–104pxSection paddingVertical space between major sections.
12 colGrid24px gutters; collapses to one column under 760px.
10–14pxCorner radius10 for inputs and buttons, 12–14 for cards; pills fully round.
8pxBase unitAll gaps are multiples of 4 and 8.
44pxTouch targetMinimum tap size on mobile.
06 · Components
Buttons on teal
See the work
Buttons on light
FiguresNumber first, short label below. Count up once on scroll.
$230M+Construction managed
25+ yearsAutomotive & embedded
Labels & client tiles
LoomOSColliers
Pills for accelerators and tags. Client tiles carry a country flag top-right.07 · Motion
Section reveal800ms · cubic-bezier(0.16,1,0.3,1) · 22px risePlays each time a section enters the screen.
Stagger70–180ms between itemsRows and cards arrive one after another.
Client tiles900ms flip-up waveLeft to right, then row by row.
Hero rotation6–7s per scenePauses on hover; progress bars show position.
Hero entranceHeadline 80ms · line 200ms · screen 120msFixed-height stack, so the page never jumps.
Hover160–220ms · 2–4px liftCards and tiles lift with a soft teal glow.
Reduced motionAll motion offRespect the visitor’s system setting.
08 · Imagery
Real product screens first; photography second.Sites, sales galleries, factories, vehicles and drones: real work, real places.Dark teal overlays keep headlines readable on photos.No generic stock handshakes, no AI-looking renders.Client logos only for clients we have actually served.
09 · Voice & copy
DoLead with the outcome: “$230M+ of construction runs on SYNC.”Use sentence case for headings and labels.Name the client, product and figure together.Keep hero headlines to one short line, with a smaller line below.Say PropTech, not “property”, for the practice.Write “we” for Six30Labs and “you” for the client.
Don'tNo comma before “and” in lists.No all-caps eyebrows or numbered “01 /” labels.Avoid words like “proof” on screen; use “In practice” or “Case studies”.No claims without a source: certifications, headcounts or figures we cannot back.No emoji in brand copy.No buzzword stacks: “seamless, innovative, next-gen”.