Digital identity / 2026Review 03

Novagrua / Brand made digital

FOUNDATION — 001

Digital
foundations.

Industrial strength.
Considered detail.
One recognisable system.

The building blocks of Novagrua’s next chapter.

Explore the system
01

Identity

A strong signature. Room to stand clear.

Primary lockupOriginal SVG / full colour
Standalone markDerived from the master lockup
On dark surfacesMonochrome treatment
One-colour applicationMonochrome treatment

One master mark, across every application. The symbol and favicon use the exact geometry from the full logo.

Logo SVGMark SVG
02

Colour

High visibility. No unnecessary noise.

#CEFF00
Signal limeprimaryThe decisive action.
#121713
Industrial inkforegroundStrength and contrast.
#F6F7F2
Field whitebackgroundSpace to breathe.
#E6E9DF
Warm stonesecondaryQuiet supporting surfaces.
#5C6458
Utility slatemuted-foregroundSecondary information.
Aa

Ink on limeFor primary actions. Never white on lime.

Aa

Ink on field whiteFor clear, comfortable long-form reading.

Aa

Field white on inkFor bold, high-contrast brand moments.

03

Typography

Technical character. Human clarity.

01 / DISPLAYOXANIUM — 600

Strength.
Under control.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
02 / TEXT & UIINTER — 400 / 600

Clear from the first word.

Strong typography does the heavy lifting. Technical headings give the brand its character. Plain, readable language makes every next step easy to understand.

Precisión en cada elevación.Forza sotto controllo.Precisão em cada elevação.

Latin character support / language specimens, not approved copy.

Display / fluidBuilt to lift.40–88 px
Heading / sectionPurpose in every detail.28–36 px
Body / readingThe right information, right where it belongs.16 px / 1.6
Label / interfacePrecision. Capacity. Control.12 px / 600
04

Components

Direct actions. Deliberate restraint.

Actions

Interactive specimens
Primary
Secondary
Quiet
Disabled

Try a button. Hover, keyboard focus and dialog states are live.

Same system. After dark.

Inverse surface
A strong
signal.
Explore the form

The same semantic tokens adapt to the surface.

Labels & status
Ready for reviewDraft specimenAction required

The complete action family.

Default · hover · focus · pressed · disabled · loading

Last action: None yet. These buttons only preview their states.

PrimarySecondaryOutlineNeeds attention

Badges describe status; they are not buttons. Hover or Tab through the actions to inspect their live states.

05

Forms & choices

Low friction. A clear way forward.

Let’s talk about the lift.

Demo only

A component example, not a site language switcher.

Preview only. Nothing is sent or stored.

Every state considered.

A visible label. A useful message. A focus state you can find. Small details that make a form feel effortless.

Checkbox / multiple choices

Unchecked, checked, mixed, disabled and invalid.

Radio group / one choice

Preferred reply method. Use arrow keys to change the selection.

Switch / preferences

Off, on and locked. These examples do not change site settings.

07

Content

Built for services, equipment and project stories.

Service story

Standard card · 16:9 media
Photography placeholder / 16:9

A service overview, a project story or a fleet introduction. Real imagery and confirmed business details will replace this specimen.

Explore the enquiry

Project detail

Compact card · 4:3 media
Photography placeholder / 4:3

The same typography, spacing and action language in a smaller card treatment.

Example content

Tabs & specification table

Selected · unselected · disabled

Keep an equipment overview separate from its technical specifications. Switch to Specs to see the table treatment; the Files tab shows an unavailable state.

No fleet claims in this specimen

Equipment photo gallery

Thumbnail tabs · selected · keyboard focus
2019 Liebherr LTM 1060-3.1, photo 1
08

Feedback

Never leave someone guessing what happened.

Inline alerts

Information · confirmation · error
A little context helps.
Use for supporting information that should remain visible.
Preview complete.
A confirmation specimen. No enquiry has been sent.
We couldn’t send that.
An error specimen. Keep the entered information and offer a way to retry.

Toast notifications

Information · success · error · dismiss

Appears at the bottom of the screen. Dismiss it or wait eight seconds. Important errors also need an inline message.

Skeleton & spinner

Loading specimen

Loading example content…

An intentional, persistent specimen. Reduced-motion preferences stop the animation.

Empty & resolved states

A useful next step
No matching examples
Clear the example filter to see the resolved state.
09

Layout & typography primitives

The guardrails behind every page.

Nine primitives. One vocabulary.

Typed variants only

These are the rules beneath the pages: typography, widths, spacing and surfaces. No arbitrary class names, inline styles or one-off values. Add an approved variant here when the system needs to grow.

Shadcn still owns buttons, fields, cards and overlays. These primitives compose them; they do not replace or restyle them.

Heading & Text

Display / rendered as h4

Built to lift.

Product / rendered as h4

Liebherr LTM 1060-3.1

Section / rendered as h4

Purpose in every detail.

Subsection / rendered as h4

A clear next step.

Label-sized heading

Body text. Clear information, comfortably read.

Small text for supporting explanations.

Caption text for metadata and short annotations.

Overline / section introduction

Choose the HTML heading level for the document, and its size for the design. Alignment is start or centre; colour is default or muted, inherited from the surface.

IconTile / a recognisable signal

A 56 px lime tile with a 28 px icon. Decorative, non-interactive and always paired with a text label. Tile dimensions, icon scale and colours are owned by the primitive.

Homepage / hero + technical label

Control. At every height.

Lead copy uses the intro measure, with the same type and spacing rules as the rest of the site.

A title without a heading level.

A label without a heading level.

Inline secondary action

Hero type is a named, capped scale. Technical labels use a monospace face; the other text variants are unchanged.

Container / deliberate width limits

Wide / maximum 1280 px

Content / maximum 960 px

Reading / maximum 65 characters

Every width shrinks to fit its parent. Page gutters are 24 px on small screens and 48 px from the medium breakpoint; nested containers can omit gutters.

Stack / vertical rhythm

One spacing scale for Stack, Inline and Grid. The default Stack gap is 24 px.

xs8 px
sm16 px
md24 px
lg32 px
xl48 px

Inline / wrap naturally

Actions and short labels wrap instead of overflowing. Alignment and distribution use named options.

PrimarySecondaryOutline

Grid / respond to available space

One, two or three columns. Grid adapts to its container, including inside narrow panels—not just the browser width.

01

02

03

Surface / colour as a system

default

The same components.

Text and controls use the surface’s semantic colours.

Explore the form

muted

The same components.

Text and controls use the surface’s semantic colours.

Explore the form

inverse

The same components.

Text and controls use the surface’s semantic colours.

Explore the form

signal

The same components.

Text and controls use the surface’s semantic colours.

Explore the form

Section → Container → Stack

Small pieces. Consistent pages.

Section owns vertical spacing. Container owns width and gutters. Stack owns the space between its children. This example composes all three, without custom CSS.

Section presets: compact 32–48 px, default 48–72 px, spacious 64–96 px per side.

10

System principles

Consistency is built, not added at the end.

/01

Give it space.

An 8 px spacing rhythm, strong alignment and generous margins. Content is structured, never crowded.

/02

Keep it direct.

Square edges. One clear primary action. Contrast that supports the message, not decoration that competes.

/03

Make it usable.

Readable type, visible keyboard focus and generous controls. Motion stays subtle and respects reduced-motion preferences.

8
16
24
32
48
64

From foundations to the first page.

Your supplied SVG identity, the brand colour tokens, Oxanium and Inter typography, and the first set of responsive interface components.