One colour does the talking
Lime is the only colour that means anything here. Everything else is dark or grey, so when lime appears you look at it.
Design system
One ground, one hue, and the rules that keep every page consistent.
Dark is home, and one green does all the talking. This page is where those decisions live — not a document about the design, but the design itself, running. Everything below is the real thing: hover it, click it, copy a colour straight off it.
Four rules that answer most questions
When a new screen feels off, it is almost always one of these four that got broken. Everything after this section is detail.
Dark is home
Not a dark mode — the only mode. The light band shows up about once a page, as relief, and then we go back to dark.
The serif claims, the sans explains
Headlines are set in the serif and make the promise. Everything that backs the promise up is set in the sans. Neither does the other's job.
Light, not shadow
You cannot cast a shadow onto black. Depth here is a thin edge and a glow — which is also why the accent is the only thing that ever appears to float.
The wordmark
- It is artwork
- The word "secura" is a drawing, not text. It never gets re-typed in a font, however close the match looks.
- It is never alone
- "by FlytBase" is part of the logo, not an optional tagline. The mark is never used without it — at any size, in any place.
Use this 
Never this Do
- Match the version to the background — lime on dark, charcoal on light.
- Give the logo room. If it is getting cramped, take space from what is next to it.
Don't
- Crop "by FlytBase" off, at any size or in any placement.
- Set "secura" in a typeface, recolour the mark, stretch it, or drop the red dot.
One green, one grey, one dark ground
Three colours carry the brand. Everything else on this page is one of those three made lighter or darker — a ladder, not a new colour. Hover anything to see its code, click to copy it.
Accent on both bases
The same message on the dark ground and on the light band. Lime behaves differently on each: on dark it can glow and even carry small text, on light it can only be a fill, a marker or an underline. Point at any part of these cards — the background, the label, a heading, a button — and it will tell you exactly which colours it is made of. Click to copy.
Dark ground
Enterprise Physical AI platform for security and rapid response
The accent glows here. Use it for markers, primary buttons and the one number that matters.
Contact us Watch demo
Light band
Enterprise Physical AI platform for security and rapid response
Here the accent anchors the button and the marker. The words stay charcoal — lime is never set as type on light.
Contact us Watch demo
The green ladder
One green, lit and shaded. These five let a shape have a bright edge and a dark side while staying the same colour — which is why the brand never needs a second hue to look dimensional. Only the middle step is the brand green; the rest are its light and shade.
The grey ladder
The same idea in neutral: paper at one end, charcoal at the other. Text picks the top three, edges and grounds pick the bottom two.
Two greys sit between the hairline and the ground. They exist only to lift a card off the background — the difference is meant to be felt, not noticed. Neither ever carries text.
The four themes
Identical content, four backgrounds. This is the quickest way to settle a colour question: if a combination is not one of these four, it is not one we use. Point at any part of a card to see what it is made of.
Perimeter
DarkThe everyday theme — where most of the site lives. Autonomous response, always on watch
Every breach signal classified at the edge and dispatched in under a second.
Contact us Watch demo
Perimeter
LightRelief. Lime survives as a button and a marker — never as words. Autonomous response, always on watch
Every breach signal classified at the edge and dispatched in under a second.
Contact us Watch demo
Perimeter
Dark gradientDark with a soft wash of light behind it — heroes and closing bands. Autonomous response, always on watch
Every breach signal classified at the edge and dispatched in under a second.
Contact us Watch demo
Perimeter
Light gradientThe light band with the same wash. The button goes charcoal so it still reads. Autonomous response, always on watch
Every breach signal classified at the edge and dispatched in under a second.
Contact us Watch demo
Two typefaces, three jobs
Lora says it, Geist explains it, Geist Mono labels it. The typefaces come from the parent FlytBase brand, so they are not up for debate — but which one does which job is, and that is the whole of this section.
The three voices
Security that never blinks
Built for data security.
PLATFORM OVERVIEW
The italic rule. Lora italic exists to lift exactly one word out of a headline — the word the sentence turns on. Two italics in one headline cancel each other out, so we allow only one.
The sizes, and what each is for
56px Hero
Autonomous security, always on watch
Lora
The one headline at the top of a page
40px Section
Autonomous security, always on watch
Lora
The headline that opens a section
32px Card title
Autonomous security, always on watch
Lora
Feature and comparison cards
20px Small heading
Autonomous security, always on watch
Lora
Card headings, principle titles
18px Lead
Autonomous security, always on watch
Geist
Opening paragraphs and pull quotes
16px Body
Autonomous security, always on watch
Geist
Card copy and descriptions
14px Interface
Autonomous security, always on watch
Geist
Navigation, captions, table cells
10px Eyebrow
PLATFORM OVERVIEW
Geist Mono, uppercase
Labels, section markers, buttons
The two largest sizes shrink on small screens so a headline never breaks into more than three lines. Everything from 18px down stays exactly as it is.
Setting text well
Do
- Keep paragraphs to a narrow column — roughly 60 characters. Full-width text is the fastest way to make a page feel cheap.
- Italicise one word per headline. Choose the word the sentence turns on.
- Let headlines sit tight and paragraphs breathe: headlines almost touch, body copy runs airy.
Don't
- Bold the serif. Lora stays at its regular weight in every headline.
- Write a sentence in the mono label face — it reads as data, not language.
- Re-typeset the wordmark in Lora because it looks close. It is artwork.
Everything lines up on fours
Every gap in the system is a multiple of 4. It sounds fussy and it is the single reason the pages feel calm: nothing is ever three pixels off from the thing beside it.
The gaps we use
4px The base unit — icon gaps, dot spacing
8px Marker to label
16px Inside a small card
20px Card padding, gaps between cards
24px Between stacked text blocks
40px Between cards inside a section
48px Page margin left and right
64px Top and bottom of a normal section
96px Top and bottom of a big marketing band
Pick from this list rather than nudging by eye. If a gap you want is not here, the answer is almost always the next one up.
The page width
margin
content — 1100px at most
margin
- Content width
- Never wider than 1100px, centred, with a comfortable margin either side. On a phone that margin narrows but never disappears.
- Section height
- Normal sections breathe at 64px top and bottom; big marketing bands take 96px.
- Grids
- Cards run three across, splits run two, and everything stacks to a single column on a phone.
- Where it changes
- The layout adjusts four times on the way down to a phone — the contents rail goes first, then split layouts stack, then the margins narrow, then the navigation links collapse.
How things sit on top of each other
On a dark ground a drop shadow does almost nothing — you cannot cast a shadow onto black. So depth here is made of three things instead: a slightly lighter surface, a thin edge, and a glow.
Four levels of depth
Ground
The page itself
Where everything starts Card
One step up
Cards and filled buttons Raised
Two steps up
Pills and hover states Lit
Glowing
The one button you want pressedThe steps are deliberately small. You should feel a card lift off the page without being able to say why — if you can see the join, it has gone too far.
Glass
A frosted pane that lets whatever is behind it show through, softened. It adds no colour of its own — just a little white light and a blur — which is how it stays on-brand while sitting over a photograph. Glass only works over something worth seeing. Over a flat background it just looks like a panel with the wrong grey.
Thin Barely there — small chips and badges
Default The standard pane — floating cards
Thick Frostier — for panes over busy photography
A small badge, riding over a hero The same pane with a hint of lime in it
Do
- Use it over a gradient, a texture or a photo — that is the only place it earns its keep.
- Keep it to small things: badges, floating cards, the sticky navigation bar.
- Check the text is readable with the blur turned off. Some browsers simply do not draw it, and the pane falls back to a solid dark panel.
Don't
- Stack panes. Glass on glass on glass is fog.
- Colour it. If it needs to mean something, that is a job for the accent, not the pane.
- Run it across a whole band — at that size it just looks like a lighter background.
Corners, edges and glow
- Corners
- A very slight 4px round on everything. Enough to feel considered, small enough that the system still reads as sharp-edged.
- Edges
- A single hairline in the darkest grey. Cards, grids and dividers all use the same one — there is no heavy border in the system.
- Dashed edges
- Reserved for things that are a sample rather than a surface: stat cells, sample frames.
- Glow
- Lime light around the primary button. It grows slightly on hover. This is our version of a shadow, and only the accent gets one.
One deliberate departure from the brand kit. The kit asks for perfectly sharp corners. We keep a 4px round everywhere, consistently, because at screen sizes it reads as precise rather than soft. It is a single setting — if the brand team would rather have hard edges, it flips back in one change.
Movement with a reason
Almost everything that moves here moves because you did something — you scrolled to it, or you put a cursor on it. Four kinds of movement cover the whole site. Hover a card to watch its feel.
The four feels
How long things take
0.15s Hover colour, the 1px lift, a glow coming up
0.2–0.25s Something fading in or out
0.3–0.42s A component changing state
0.7s Content arriving as you scroll
Anyone who asks for less motion gets less motion. If a visitor has turned animation down in their operating system, every effect on this site switches off — the smooth scrolling, the glows, the drifting backgrounds, all of it. Nothing is ever hidden waiting for an animation that will not run.
The background that breathes
The one thing that moves on its own. It lives in the background, never in the content, and it is slow enough to read as a machine idling rather than an animation. The header of this page is running both of these right now.
A pool of light rises off the bottom edge of a band and slowly fades back. Nine seconds a cycle — slower than you would notice on purpose.
A crest of brighter dots drifts diagonally across the grain. The dots themselves never move — only the light passing over them.
Two of these per page, maximum. They are decoration, they are invisible to screen readers, and they stop completely for anyone who has asked for reduced motion.
The three signature moves
Put your cursor inside each of these — they are the real behaviours, not descriptions of them.
Move your cursor in here Light follows you
Hover
Hover to replay
Grain, glow and corner marks
Three small devices give the pages their atmosphere. None of them is an image — they are drawn by the browser, so they never go blurry and never slow a page down.
The dot grain
A fine lattice of lime dots. It gives an empty area something to be, without giving it a colour.
The glow
Light rising off the bottom edge of a band, as if something warm sits just below it. Used at the top and the very end of a page.
Corner marks
Small lime brackets on the corners of a card — a targeting reticle, borrowed from the instruments our customers already use.
Do
- Fade the grain away from text, so no dot ever sits under a word.
- Keep corner marks to the top two corners — that is the convention we inherited.
Don't
- Put two glows in one band. One source of light, one direction.
- Turn the grain up until it reads as a colour. It is texture, not a fill.
The pieces, and when to reach for each
Everything below is the real thing, running — not a picture of it. Hover anything with an arrow or a glow and it will behave exactly as it does on the site.
Buttons
The four weights
One lime button per screen — the thing you actually want pressed. The outlined one is for the second-best action, the filled grey one for anything further down the list, and the underlined link for a step that is optional.
All of them are small uppercase labels. If a button needs a sentence, it is not a button, it is a link.
The same four on the light band
The lime button does not change — lime with charcoal type is the one combination that works on both grounds. Everything else flips: the outline goes light grey, the filled button goes charcoal, and the link becomes charcoal text with a lime rule under it. Lime is never the word itself here.
The main call to action
A glow follows your cursor across it and the arrow travels once when you hover. Use it wherever a section ends in an invitation. It comes in a dark version and a lime version — the lime one for when the section around it is quiet.
The rolling button
Each letter flips over in turn, then the arrow swaps. It is the most theatrical thing in the system, so it is reserved for a single hero-level action — one per page, at most.
The expanding pill
An icon at rest that grows its label when you approach it. Good in tight spaces — a card corner, a toolbar. It is the one component allowed to overshoot slightly as it opens.
The closing invitation
It leans toward your cursor as you approach, the lime disc grows, the label rolls. It belongs at the very end of a page, sitting on a glow — once, and never twice.
Small labels, pills and figures
Active New SOC 2 Alert
Pills
Small status chips. Lime for live or new, grey for a plain fact like a certification, red only when something is actually wrong. Red never appears as decoration.
Customer intelligence
plain metadata label
The eyebrow
The little uppercase label with a lime square in front of it. It opens nearly every section and card, and it is the single most recognisable habit of the system. Two or three words — never a sentence, and never something the reader must act on.
99.7%
Uptime
24/7
Autonomy
<1hr
Deploy
100%
On-prem
Figures sit in a dashed grid with corner marks on the outer two corners only — so four numbers read as one instrument panel rather than four separate boxes.
The product visual
Where screenshots live
A dark field with soft lime light behind it and a fine grain over the top, framed by a hairline. Product screens and demo footage always sit inside this frame rather than floating on the page — it keeps a busy interface from fighting with the layout around it.
Result cards — a photo with a colour block on it
How we show proof. A photograph carries the feeling, and a panel of tinted glass laid over it carries the number. The panel is what makes the card safe: whatever the picture behind it is doing, the words stay readable.
10,000+
Perimeter events triaged autonomously each day.
Green
42%
Of alerts closed at the edge before an operator is paged.
Cool
1 in 5
Escalations that turn out to matter — the rest never reach a human.
Warm
- The colour block
- Always our own dark: charcoal at the top falling into deep forest green at the base. It is a dark surface first, a colour second.
- The three variants
- A hint of green, cool or warm light at the top of the block — just enough that a row of three reads as three, not as one repeated card.
- Why it always works
- The block never gets so transparent that the picture can wash the type out — even over the brightest photograph, the words stay comfortably readable.
- The frame
- The block is inset on all four sides, so the photograph reads as a border around it rather than a backdrop behind it.
- On hover
- The photograph drifts very slightly closer. The block itself never moves.
- Choosing pictures
- Wide, calm, few focal points. The block covers the middle, so anything important in the centre of the shot will be lost.
How a page is put together
A page is a stack of dark bands with one light band for relief and a glow at each end. Getting the order right matters more than any single component on this page.
The running order
- Hero sectionDark, with a glow. The logo, a short label, one big headline with one italic word, one lime button.
- StoryDark with grain. A narrow centred column — the paragraph that says what we actually do.
- PlatformDark. A section headline over a stack of features divided by hairlines.
- ComparisonDark. The old way beside our way, with a list that stays put while the cards scroll.
- Who it is forDark, with cards. Three across.
- Customer storiesThe light band — the one moment of relief on the page. Lime drops back to markers and buttons.
- The askDark, with the glow returning. A centred headline and the magnetic button.
- FooterDark, a hairline across the top, the logo on the left and links on the right.
Dark at the top, dark at the bottom, one light band somewhere in the middle. That single light band is what stops a long dark page from feeling like one endless scroll.
The navigation bar
- Behaviour
- It stays with you as you scroll, frosted, so the content passes behind it rather than under a solid block.
- Contents
- The wordmark on the left, a short list of links in the middle, log-in and the lime button on the right. Nothing else earns a place.
- The mark
- The full lockup, sized to fit the bar. "by FlytBase" travels with the logo everywhere, so the bar is built around the logo rather than the logo trimmed to fit the bar.
- On a phone
- The links step aside and only the mark and the button remain.
Writing for these pages
Do
- Lead with what the customer gets. How it works belongs in the paragraph underneath.
- Keep the little labels to two or three words.
- Use the same verb for every main button on a page — decide between "Contact us" and "Book a demo" once.
Don't
- Use more than one light band on a page — the relief stops working.
- Put two theatrical buttons on one page. The rolling one and the magnetic one are both finales.
- Write a hero headline longer than two lines. If it needs three, it is two sentences.
The checks before anything ships
This is a design constraint, not a box ticked at the end. Nine questions — if a new section answers all of them, it is ready.
- Can you read it?Text has to stand well clear of what is behind it. The dark ground makes this easy — the trouble only ever starts when text goes over an image or a colour.
- Is lime being used as a word on light?Lime on light grey is close to invisible. On the light band the accent can be a button, a square or an underline — never the words themselves.
- Is the darkest grey carrying meaning?The hairline grey is for lines and dividers only. If something has to be read, it uses the label grey or lighter.
- Does it still work with animation off?Anyone who has asked their device for less motion gets a still page — and nothing may be left invisible waiting for an animation that will not run.
- Can you get around with a keyboard?Everything you can click has a visible lime ring when you tab to it. If you cannot see where you are, it is not finished.
- Is the decoration hidden from screen readers?Grain, glows, corner marks and duplicated arrows are silent to assistive software. They are atmosphere, not content.
- Does the logo have a name?The wordmark is a picture, so it always carries the text "secura" behind it. The brand has to survive with images switched off.
- Is the page structured, not just styled?One main headline per page, headings in order, and real buttons and links — so the page can be navigated by its shape.
- Does anything push the page sideways?Decoration often bleeds past the edge of the screen. It must never create a sideways scroll on a phone.
Using this guide
Everything above is live: the colours, type, components and motion on this page are the same ones the site is built from, so if something here looks wrong, it is wrong on the site too. Design from what you see rather than from a copy of it — take a colour by clicking its swatch, and take a component by pointing at the example rather than rebuilding it.
Two rules keep the system honest. A new colour has to earn its place in this page first — if it is not here, it is not ours. And a component that needs a new behaviour gets changed once, here, rather than forked into a one-off on a single page.