Design system

Solvion Technology

Everything we use to design and build Solvion products. Every example on this page renders with the same tokens and components as the site and dashboard, so it cannot drift from production.

Foundations →Brand, colour, type, space, icons and motion — the decisions everything else inherits.
Components →Live shadcn/ui components themed by tokens, with their source files.
Patterns →Forms, tables, empty and loading states, and how to choose feedback.
Guidelines →How we write and the accessibility bar every page must clear.

01 · Foundations

Brand

The Solvion mark is a hexagonal S: two interlocking paths that read as a system being solved. It ships as one monochrome asset, public/solvion-no-bg.png, drawn in white and inverted on light surfaces.

Logo

Mark alone for small spaces and favicons; mark plus wordmark everywhere the name is not already visible.

Solvion

Solvion

Clear space and size

¼¼

Keep clear space of ¼ of the mark's width on every side. Nothing enters it.
Minimum size: 24 px on screen for the mark, 96 px wide for mark + wordmark.
The wordmark is Sora 600, tracking −0.02em, set at about 60% of the mark's height.
Write the name as Solvion; the legal name Solvion Technology only in footers and documents.

Misuse

White mark on ink or indigo; ink mark on white or slate 100.
Scale proportionally from the original file.
Pair with the Sora wordmark, never another face.

Don't

Stretch, rotate, outline or add shadows and gradients.
Recolour to cyan or any colour outside the palette.
Place on photos or mid-tone backgrounds below 4.5:1 contrast.

02 · Foundations

Colour

Cool, structured and confident. Indigo carries product and action, cyan carries proof and results, and neutral slate does everything else. All values are oklch, so steps are perceptually even. Light is the default; dark follows the operating system.

Surfaces and text

Semantic tokens. Components use these names, never raw values, so both themes come for free.

Background
--background
Page canvas
Card
--card
Raised surfaces, popovers
Muted
--muted
Quiet fills, table heads
Accent
--accent
Hover and selected rows
Foreground
--foreground
Text, primary buttons
Muted foreground
--muted-foreground
Secondary text
Border
--border
Dividers, outlines
Ring
--ring
Focus outline
Ink
--color-ink
Fixed dark surface for heroes

Brand

Brand
--brand
Actions, links, focus
Brand soft
--brand-soft
Tinted brand fills
Brand 2
--brand-2
Proof, results, live status
Brand 2 soft
--brand-2-soft
Tinted result fills

Status

Reserved for state. Always pair with an icon and a label, never colour alone. Use /10 opacity for tinted backgrounds (bg-success/10).

Success
--success
Saved, published, healthy
Warning
--warning
Needs attention, expiring
Destructive
--destructive
Errors, delete actions
Info
--brand
Neutral notices reuse brand

Tonal ramps

100–300 for tinted fills and hovers, 500 as each hue's base, 700–900 for text on tints and pressed states. Hover a step to see its value.

Slate

100

200

300

400

500

600

700

800

900

Indigo

100

200

300

400

500

600

700

800

900

Cyan

100

200

300

400

500

600

700

800

900

Usage

One accent per view. Indigo marks the next action. If two things are indigo, one of them is wrong.
Cyan is earned. Outcomes, results and live status only. Never decoration.
Text stays neutral. Body copy is foreground or muted-foreground; coloured text is for links and short labels.
Proportion ≈ 80 / 15 / 5. Neutrals dominate, indigo supports, cyan accents.
Use tokens, not hex. bg-brand not bg-[#3672e9]; dark mode depends on it.
Ink for impact. Heroes and closing sections may use the dark ink surface regardless of theme.

03 · Foundations

Typography

Two voices, one geometry. Titles are set in Sora, body in Manrope, and anything technical in JetBrains Mono. All three are variable fonts loaded with next/font in app/fonts.ts: self-hosted, preloaded, no layout shift.

Title

600 – 700

Sora

Software that solves the real problem.

Geometric and slightly wide, so short headlines read as engineered and confident. Its open apertures keep it legible when tracked tight at display sizes.

h1–h3, hero titles, card titles
Tight tracking (−0.035em to −0.045em)
Never below 18px or in running text

Variable: --font-title
Utility: font-heading

Body

400 – 600

Manrope

We design, build and run the systems your team depends on, and we stay until they work.

A calm grotesque with a tall x-height. It shares Sora’s geometry, so the pair feels like one family, but it stays neutral over long paragraphs, forms and tables.

Paragraphs, UI labels, forms, tables
Body at 16–18px, line-height 1.6
600 for emphasis, never 700+

Variable: --font-body
Utility: font-sans (default)

Code

400 – 500

JetBrains Mono

const solved = await solvion.ship(problem);

Built for reading code: clear 0/O and 1/l/I, even rhythm. Used for anything a person may copy, compare or type back.

Tokens, codes, IDs, secrets
Technical labels and metrics
12–14px, never for headings

Variable: --font-code
Utility: font-mono

Type scale

Display and headline are fluid (.text-display, .text-headline) and scale with the viewport without breakpoints. Everything else sits on Tailwind's scale. h1–h3 pick up Sora automatically.

Display

Built to last

Sora 650 · clamp(40–96px) · 0.98

Headline

Our approach

Sora 620 · clamp(30–52px) · 1.05

Title L

Section title

Sora 600 · 24px · 1.33

Title

Claims platform rebuild

Sora 600 · 20px · 1.4

Body L

Cool, structured and confident.

Manrope 400 · 18px · 1.625

Body

Legacy system replaced without downtime.

Manrope 400 · 16px · 1.625

Small

Updated 3 days ago

Manrope 400 · 14px · 1.43

Caption

Figure 1 — weekly visitors

Manrope 400 · 12px · 1.33

Eyebrow

Case study

Manrope 600 · 12px · +0.14em · caps

Code

oklch(58% 0.19 262)

JetBrains Mono 400 · 14px

Setting text

Line length 45–75 characters. Cap paragraphs at max-w-xl / max-w-2xl.
Sentence case everywhere — titles, buttons, labels. Caps only for eyebrows.
Balance headings with text-wrap: balance (built into the display utilities).
Tabular numbers in tables and metrics: tabular-nums.
Hierarchy by size and weight, not colour. One display line per page.
Minimum 16px for body copy and form inputs (avoids iOS zoom on focus).

04 · Foundations

Layout, space and shape

A 4px base grid. Every margin, gap and padding is a step on Tailwind's spacing scale, so rhythm holds without anyone measuring. Depth comes from borders first and shadows second.

Spacing

Use the scale; never arbitrary values like p-[13px].

14px

Icon to label

28px

Inside chips, tight groups

312px

Between related controls

416px

Card gutters on mobile

624px

Card padding, grid gaps

832px

Page gutter (sm+)

1248px

Between subsections

1664px

Section header to content

2496px

Between page sections

Grid and containers

Content sits in max-w-6xl (1152px) with px-5 sm:px-8 gutters. Inside, a 12-column grid on desktop collapses to 4 on mobile. Long-form text never spans more than 8 columns.

Content · 8

Aside · 4

Breakpoints

Mobile first: unprefixed classes are the phone layout; prefixes add from that width up.

Prefix	Min width	Typical device	What changes
`—`	0	Phone	Single column, 20px gutters
`sm`	640px	Large phone	32px gutters, inline button rows
`md`	768px	Tablet	12-column grid, two-up cards
`lg`	1024px	Laptop	Sidebars and table of contents appear
`xl`	1280px	Desktop	Max content width reached

Radius

One base, --radius: 0.625rem; every other step derives from it. Interactive elements are pills, containers are soft rectangles.

6px

Checkboxes, kbd

8px

Menu items

10px

Inputs, small buttons

14px

Images, list items

2xl

18px

Cards, panels

full

9999px

Buttons, pills, avatars

Elevation

Four levels. Levels 0–1 use only a 1px border; shadows are reserved for things floating above the page.

Level 0

Flat

Page, sections

Level 1

Raised

Cards, tables

Borders and layers

One width: 1px border-border. Two pixels only for focus and selection.
Dividers inside cards use divide-border, never a darker grey.
Translucent chrome (navbar) is bg-background/80 + backdrop-blur-xl.
Dashed borders mean “drop zone” or “placeholder” — nothing else.

Layer	z-index	Used by
Content	`0`	Everything in flow
Raised	`10`	Sticky table heads, badges on images
Navigation	`40`	Site navbar
Overlay	`50`	Dialogs, sheets, menus, tooltips, toasts

05 · Foundations

Iconography

Lucide (lucide-react) is the only icon set: 24px grid, 2px rounded strokes that match Manrope's weight. Icons inherit currentColor, so they follow the text they sit next to.

ArrowRight
ArrowUpRight
ChevronDown
ExternalLink
Menu
X
Search
Filter
Plus
Pencil
Trash2
Share2
Download
Upload
Mail
Bell
User
Lock
Settings
LayoutDashboard
Check
CircleCheck
Info
TriangleAlert
CircleAlert

Sizes

Size	Class	Use
14px	`size-3.5`	Inside badges and small buttons
16px	`size-4`	Default: buttons, inputs, menus
20px	`size-5`	Navigation, list items
24px	`size-6`	Standalone, empty states

Usage

Pair icons with a visible label; icon-only buttons get an aria-label and a tooltip.
Mark decorative icons aria-hidden.
One meaning per icon across the product (Pencil always means edit).

Don't

Mix icon sets, or filled and outline styles.
Change stroke width or colour icons for decoration.
Use an icon as the only signal of status.

06 · Foundations

Motion

Motion explains, it does not decorate. Product UI uses short, calm transitions; expressive motion (WebGL, TechText, smooth scroll) is reserved for marketing heroes like the one at the top of this page.

Duration

Hover each track to feel the timing.

Instant · 100mshover

Fast · 150mshover

Base · 200mshover

Slow · 300mshover

Entrance · 700mshover

Token	Class	Use
Instant · 100ms	`duration-100`	Press states, checkbox ticks
Fast · 150ms	`duration-150`	Hover colour, focus ring
Base · 200ms	`duration-200`	Menus, tooltips, popovers
Slow · 300ms	`duration-300`	Dialogs, sheets, accordions
Entrance · 700ms	`duration-700`	Page and section reveals

Easing

The brand curve is a token: --ease-brand in globals.css, used as ease-brand.

Brand outhover

Inhover

In-outhover

Linearhover

Curve	Value	Use
Brand out	`cubic-bezier(0.2, 0.7, 0.2, 1)`	Anything entering
In	`cubic-bezier(0.4, 0, 1, 1)`	Anything leaving
In-out	`cubic-bezier(0.4, 0, 0.2, 1)`	Moving on screen
Linear	`linear`	Progress, spinners only

Expressive layer

Tool	Where	Rule
three.js (WebGL)	Heroes: HexGlobe on home, SignalField here	One scene per page, pauses off-screen, CSS fallback, still frame on reduced motion
TechText (React Bits)	Hero titles	Decorative: aria-hidden, with a real sr-only heading
Lenis	Long editorial pages	lerp 0.2 — never on the dashboard or forms
Swiper	Showcases, carousels	Keyboard and pagination on, never autoplay
BorderGlow (React Bits)	Secondary hero CTA (GlowCta)	Edge glow in brand colours towards the pointer; hex palette per theme
PrimaryCta	Primary pill actions (hero, selected work)	Lift with brand shadow, light sweep and arrow nudge on hover
Featured bento card	Home selected work	Glass arrow button fills with brand and turns forward; cover zooms 4% on hover
ProjectIndex	Home project list	Brand tint sweeps in from the left, title slides, arrow turns forward; other rows dim (CSS only, hover and focus)
Testimonials	Home testimonials	Auto-rotating spotlight (words rise in), drifting columns and a logo marquee; pause button, hover and focus pause; static under reduced motion
TeamSection	Home "who we are"	Portraits go from grayscale to colour with a 3% zoom on hover or focus (hover devices only); cards aligned, links pinned to the bottom
ContactCta	Home contact card	Brand mesh blobs drift slowly (transform only) over the hex lattice; a glow follows the pointer; static under reduced motion
SiteFooter	Every public page	The page sheet scrolls off to reveal a sticky ink footer (CSS only, tall desktop screens); social icons lift on hover
.text-shimmer	Dashboard sidebar brand	A gradient sheen slides slowly across "Dashboard" (background-position; short text only, frozen with reduced motion)
.scroll-words	About page manifesto	Words light up one after another while the paragraph crosses the viewport (scroll-driven, opacity only; full text without support or with reduced motion)
TableOfContents	Legal pages (terms, legal notice, privacy)	Highlights the section being read (IntersectionObserver); a brand bar slides to it and the rail fills up to it (transform only); plain anchor links
Primary CTA hover	Hero primary action	Lift + brand shadow, light sweep, arrow nudge; transform/opacity only
Status dot pulse	Eyebrow badges that signal something live	animate-ping ring behind a brand-2 dot, motion-safe only
`.reveal`	Sections on load	Stagger with --i, 80ms per item

Principles

Enter slow, leave fast. Exits run at about two-thirds of the entrance duration.
Animate transform and opacity only. Never width, height or top — they cause layout jank.
Respect reduced motion. motion-reduce: removes movement; fades may stay.
Nothing loops except loading indicators. No autoplay carousels.

07 · Components

Component library

Every component below is the real one from components/ui (shadcn/ui on Radix), themed only through tokens. Import it, don't copy its classes. Each card names its source file.

Actions

Button · variantscomponents/ui/button.tsx

Button · sizes & statescomponents/ui/button.tsx

Button groupcomponents/ui/button-group.tsx

Toggle groupcomponents/ui/toggle-group.tsx

Inputs and selection

Input & fieldcomponents/ui/field.tsx

⌘K

Input groupcomponents/ui/input-group.tsx

Message

Textareacomponents/ui/textarea.tsx

Select & native selectcomponents/ui/select.tsx

Checkbox, radio & switchcomponents/ui/checkbox.tsx

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Slider & one-time codecomponents/ui/input-otp.tsx

Verification code

Animated verification codecomponents/auth/mfa-code-input.tsx

Data display

DefaultSecondaryOutlineOverdueLiveDraft

Badgecomponents/ui/badge.tsx

PMFKST

ABCDEF

Avatarcomponents/ui/avatar.tsx

Discovery sprint

Two weeks to map the problem and price the build.

Workshops, audit, prototype and a fixed quote.

Cardcomponents/ui/card.tsx

New enquiry

Fieldstone · 2 minutes ago

Keyboard shortcut

Open the command palette

⌘K

Itemcomponents/ui/item.tsx

A claims platform for 40 branches.

Tabscomponents/ui/tabs.tsx

Most builds ship in 6–12 weeks after discovery.

Accordioncomponents/ui/accordion.tsx

Overlays

Dialogcomponents/ui/dialog.tsx

Dropdown menucomponents/ui/dropdown-menu.tsx

Tooltip, popover & hover cardcomponents/ui/popover.tsx

Toastcomponents/ui/sonner.tsx

Feedback and navigation

Check your inbox

We sent a confirmation link to ana@company.pt.

Payment failed

Update the card on file to keep the project running.

Alertcomponents/ui/alert.tsx

Uploading assets64%

Progress, skeleton & spinnercomponents/ui/progress.tsx

Breadcrumbcomponents/ui/breadcrumb.tsx

Paginationcomponents/ui/pagination.tsx

Also available from shadcn/ui and used in the dashboard: sidebar, sheet, drawer, command, combobox, calendar, context-menu, menubar, navigation-menu, resizable, scroll-area, table, chart, carousel.

Brand patterns

Marketing-only compositions built from tokens. Drag, swipe or use the arrow keys.

Marketing buttons

See our work Secondary

Eyebrow & pills

SolvionOn budget6 weeks early

Site navigation

SolvionServicesWorkOur work

Project card

Insurance · Fieldstone

Claims platform rebuild

Legacy system replaced without downtime across 40 branches.

Metric

−38%

Average claim handling time

source: fieldstone · q3 2026

08 · Patterns

Patterns

How components combine to solve recurring problems. Follow these before inventing a new layout.

Forms

One column, labels above inputs, help text below, errors replace help text. Validate on blur and on submit, never while typing.

Mark the optional fields, not the required ones.
Use the right type and autoComplete so phones show the right keyboard.
Errors say how to fix it, sit under the field and are linked with aria-describedby.
One primary button, left-aligned, labelled with the outcome (“Send message”, not “Submit”).
Disable the button only while submitting; show a spinner inside it.
Never clear what the person typed after an error.

Rating scale and tags

Used by the visitor survey (app/[lang]/(site)/_components/feedback-survey.tsx): a 1–5 scale for how it went and removable tag chips to say what it is about.

The number is the visible label of each step, so the scale never relies on colour or a face; the word for the picked step appears below.
Each step is a real radio (sr-only) inside a tile: arrow keys move through the scale and the focus ring shows on the tile. The picked tile gets the brand fill and a glowing brand-2 dot; with faces, a sentiment face grows on it.
A gradient track under the scale fills up to the picked value (transform only, frozen under reduced motion). A segmented bar above the survey counts the answered sections.
Only the first rating is required. Everything else says optional in the legend.
Tags are checkboxes styled as chips, with the same states as the form topic chips: brand border and soft fill when checked. Custom tags get a remove button with a full accessible name.
Cap the number of tags and disable the unchecked ones at the cap, rather than rejecting the submit.
Say up front whether the answer is anonymous. Contact details appear only after an explicit opt-in.

Data tables

Numbers right-aligned and tabular, status as badge + text, row actions at the end.

Project	Client	Status	Views
Claims platform	Fieldstone	Live	12,480
Field ops app	Norte Energia	In review	3,912
Data warehouse	Lusomed	Draft	—

Empty states

Say what will appear here and offer the one action that fills it.

No projects yet

Projects you publish appear here and on the public portfolio.

Loading

Skeletons mirror the final layout; spinners only for actions under 2 seconds.

Navigation bar

app/components/navbar.tsx is a server component: the menu tree comes from the database, filtered by each item's visibility and allowed roles for the current viewer. Scroll this page to see it change.

State	Look	Why
At the top	Full-width, solid background, hairline border	Reads as part of the page; no blur over the hero
Scrolled (> 12px)	Floating pill, 65% background, blur + saturate, soft shadow	Stays out of the way while content moves under it
Signed in	Avatar menu: dashboard, profile, sign out	Replaces the public call to action
Mobile (< 768px)	Sheet from the right with the full tree and the theme switch	Three menu tiers do not fit a hover menu on touch

Theme: light, dark or system, stored in localStorage and applied by an inline script in <head> before first paint (theme-script.tsx, use-theme.ts). Available on the site, login and dashboard.

Route pre-loader

Every navigation to a new route shows PageLoader (app/components/page-loader.tsx) through Next's loading.tsx convention — at the root, in the site and in the dashboard. It fades in after 150ms so near-instant navigations don't flash, keeps the navbar and sidebar interactive, and is announced to screen readers as a status.

File	Covers
`app/loading.tsx`	Switching between site, login and dashboard
`app/[lang]/(site)/loading.tsx`	Every public page
`app/dashboard/loading.tsx`	Every dashboard page

Choosing feedback

Match the interruption to the importance. When unsure, use the less disruptive option.

Situation	Use	Dismissal
Field-level problem	Inline error under the field	Disappears when fixed
Action succeeded	Toast (success)	Auto, 4 seconds
Action failed, can retry	Toast (error) with action	Manual
Page-wide state (offline, trial ending)	Alert at top of content	Stays until resolved
Destructive or irreversible	Dialog with explicit verb	Cancel or confirm
Waiting for data	Skeleton, then content	Automatic

09 · Data visualisation

Charts and data

Charts use a separate, validated palette — not the brand ramps — because series must stay distinguishable for people with colour-vision deficiency. Slots 1–5 are exposed as --chart-1…--chart-5 and switch with the theme. Charts are built with recharts through components/ui/chart.tsx.

Example

Projects delivered per quarter. Three series, legend always on, hover for exact values.

Categorical palette

Assign in this fixed order — the order is what keeps adjacent series colour-blind safe. Never cycle; a ninth series folds into “Other”.

Slot	Hue	Light	Dark	Token
1	Blue	#2a78d6	#3987e5	`--chart-1`
2	Orange	#eb6834	#d95926	`--chart-2`
3	Aqua	#1baf7a	#199e70	`--chart-3`
4	Yellow	#eda100	#c98500	`--chart-4`
5	Magenta	#e87ba4	#d55181	`--chart-5`
6	Green	#008300	#008300	—
7	Violet	#4a3aa7	#9085e9	—
8	Red	#e34948	#e66767	—

Sequential

One hue, light to dark, for magnitude (heatmaps, choropleths).

Diverging data uses blue ↔ red with a neutral grey midpoint.

Status in charts

Reserved for state — never reused as a series colour. Always with an icon and label.

Good#0ca30c

Warning#fab219

Serious#ec835a

Critical#d03b3b

Rules

Pick the form before the colour. A single number is a stat tile, not a chart.
One y-axis. Two measures with different scales get two charts.
Colour follows the entity, never its rank — filtering must not repaint survivors.
Legend for 2+ series, direct labels for ≤ 4; identity never relies on colour alone.
Thin marks: 2px lines, 4px rounded bar ends, 2px gaps between bars.
Text stays ink. Labels and values use text tokens, never the series colour.

10 · Content

Voice and writing

We sound like the people clients want to hire: calm, specific and honest about trade-offs. Every interface text exists in each site language — English and European Portuguese (PT-PT, never Brazilian) today — and client documents follow the client’s language.

Clear

Plain words, short sentences, one idea each.

Not: Jargon, buzzwords, “synergy”.

Direct

Say what happens and what to do next.

Not: Hedging, passive voice, filler.

Confident

Back claims with numbers and names.

Not: Hype, superlatives, exclamation marks.

Human

Write like a senior engineer talking to a client.

Not: Robotic system speak or forced jokes.

In practice

“Legacy system replaced without downtime across 40 branches.”

Don't

“We deliver world-class, cutting-edge digital transformation!”

“Could not save changes. Check your connection and try again.”

Don't

“Error 500: An unexpected error has occurred.”

Button: “Delete project”

Don't

Button: “OK” / “Yes” / “Submit”

Mechanics

Topic	Rule	Example
Capitalisation	Sentence case for everything	Book a discovery call
Buttons	Verb + object, describes the outcome	Publish project
Errors	What happened + how to fix it, no blame	Enter an email like name@company.pt.
Dates	Day month year, month as word	5 Oct 2026
Time	24-hour clock	14:30
Numbers	Digits for 10+, thousands separator	12,480 views · 3 projects
Currency	Symbol first, no decimals unless needed	€12,000
Percentages	No space, minus sign for drops	−38%
Punctuation	No exclamation marks; Oxford comma	Design, build, and run

Microcopy

Front-load the important words — people scan the first two.
Empty states explain what will appear and how to start.
Confirmations repeat the object: “Delete ‘Claims platform’?”.
Placeholders show format, never replace the label.

11 · Accessibility

Accessible by default

The target is WCAG 2.2 AA on every page. Radix primitives give us keyboard support and ARIA for free; the rules below cover what they cannot.

Contrast

Text needs 4.5:1 (3:1 at 24px+ or 19px bold). brand-2 on brand-2-soft in light mode is 4.4:1 — use it only for bold labels of 14px and up, or switch the text to cyan 700.

Pair	Light	Dark
`foreground on background`	17.7:1AAA	17.5:1AAA
`muted-foreground on background`	6.8:1AA	7.9:1AAA
`brand on background`	5.5:1AA	7.3:1AAA
`brand-foreground on brand`	5.7:1AA	7.3:1AAA
`brand-2 on background`	4.8:1AA	9.6:1AAA
`brand on brand-soft`	4.9:1AA	5.5:1AA
`brand-2 on brand-2-soft`	4.4:1AA large	7.0:1AAA
`success on background`	5.4:1AA	9.4:1AAA
`warning on background`	4.8:1AA	10.3:1AAA
`destructive on background`	4.6:1AA	6.8:1AA

Focus

Every interactive element shows a 2px --ring outline on keyboard focus (:focus-visible). Press Tab to try it.

Text link

Checklist

Semantic HTML first: button for actions, a for navigation, one h1 per page.
Touch targets ≥ 44×44px on mobile; 24px minimum spacing between small targets.
Every input has a visible label; errors are linked with aria-describedby.
Images: meaningful alt, or alt="" when decorative.
Never colour alone — pair status with icon and text.
Reduced motion disables WebGL, sweeps, smooth scroll and slides.
Skip link to #main is the first focusable element on the site.
Zoom to 200% without horizontal scroll at 320px wide.

Keyboard

Key	Does
`Tab / Shift+Tab`	Move between interactive elements
`Enter / Space`	Activate buttons, toggle checkboxes and switches
`↑ ↓ ← →`	Move within menus, tabs, radio groups, sliders, carousels
`Esc`	Close dialogs, menus and popovers; focus returns to the trigger

Prefix

Min width

Typical device

What changes

—

Phone

Single column, 20px gutters

sm

640px

Large phone

32px gutters, inline button rows

md

768px

Tablet

12-column grid, two-up cards

lg

1024px

Laptop

Sidebars and table of contents appear

xl

1280px

Desktop

Max content width reached

Layer

z-index

Used by

Content

0

Everything in flow

Raised

10

Sticky table heads, badges on images

Navigation

40

Site navbar

Overlay

50

Dialogs, sheets, menus, tooltips, toasts

Size

Class

Use

14px

size-3.5

Inside badges and small buttons

16px

size-4

Default: buttons, inputs, menus

20px

size-5

Navigation, list items

24px

size-6

Standalone, empty states

Token

Class

Use

Instant · 100ms

duration-100

Press states, checkbox ticks

Fast · 150ms

duration-150

Hover colour, focus ring

Base · 200ms

duration-200

Menus, tooltips, popovers

Slow · 300ms

duration-300

Dialogs, sheets, accordions

Entrance · 700ms

duration-700

Page and section reveals

Curve

Value

Use

Brand out

cubic-bezier(0.2, 0.7, 0.2, 1)

Anything entering

cubic-bezier(0.4, 0, 1, 1)

Anything leaving

In-out

cubic-bezier(0.4, 0, 0.2, 1)

Moving on screen

Linear

linear

Progress, spinners only

Tool

Where

Rule

three.js (WebGL)

Heroes: HexGlobe on home, SignalField here

One scene per page, pauses off-screen, CSS fallback, still frame on reduced motion

TechText (React Bits)

Hero titles

Decorative: aria-hidden, with a real sr-only heading

Lenis

Long editorial pages

lerp 0.2 — never on the dashboard or forms

Swiper

Showcases, carousels

Keyboard and pagination on, never autoplay

BorderGlow (React Bits)

Secondary hero CTA (GlowCta)

Edge glow in brand colours towards the pointer; hex palette per theme

PrimaryCta

Primary pill actions (hero, selected work)

Lift with brand shadow, light sweep and arrow nudge on hover

Featured bento card

Home selected work

Glass arrow button fills with brand and turns forward; cover zooms 4% on hover

ProjectIndex

Home project list

Brand tint sweeps in from the left, title slides, arrow turns forward; other rows dim (CSS only, hover and focus)

Testimonials

Home testimonials

Auto-rotating spotlight (words rise in), drifting columns and a logo marquee; pause button, hover and focus pause; static under reduced motion

TeamSection

Home "who we are"

Portraits go from grayscale to colour with a 3% zoom on hover or focus (hover devices only); cards aligned, links pinned to the bottom

ContactCta

Home contact card

Brand mesh blobs drift slowly (transform only) over the hex lattice; a glow follows the pointer; static under reduced motion

SiteFooter

Every public page

The page sheet scrolls off to reveal a sticky ink footer (CSS only, tall desktop screens); social icons lift on hover

.text-shimmer

Dashboard sidebar brand

A gradient sheen slides slowly across "Dashboard" (background-position; short text only, frozen with reduced motion)

.scroll-words

About page manifesto

Words light up one after another while the paragraph crosses the viewport (scroll-driven, opacity only; full text without support or with reduced motion)

TableOfContents

Legal pages (terms, legal notice, privacy)

Highlights the section being read (IntersectionObserver); a brand bar slides to it and the rail fills up to it (transform only); plain anchor links

Primary CTA hover

Hero primary action

Lift + brand shadow, light sweep, arrow nudge; transform/opacity only

Status dot pulse

Eyebrow badges that signal something live

animate-ping ring behind a brand-2 dot, motion-safe only

.reveal

Sections on load

Stagger with --i, 80ms per item

Slot

Hue

Light

Dark

Token

Blue

#2a78d6

#3987e5

--chart-1

Orange

#eb6834

#d95926

--chart-2

Aqua

#1baf7a

#199e70

--chart-3

Yellow

#eda100

#c98500

--chart-4

Magenta

#e87ba4

#d55181

--chart-5

Green

#008300

—

Violet

#4a3aa7

#9085e9

—

Red

#e34948

#e66767

—

Topic

Rule

Example

Capitalisation

Sentence case for everything

Book a discovery call

Buttons

Verb + object, describes the outcome

Publish project

Errors

What happened + how to fix it, no blame

Enter an email like name@company.pt.

Dates

Day month year, month as word

5 Oct 2026

Time

24-hour clock

14:30

Numbers

Digits for 10+, thousands separator

12,480 views · 3 projects

Currency

Symbol first, no decimals unless needed

€12,000

Percentages

No space, minus sign for drops

−38%

Punctuation

No exclamation marks; Oxford comma

Design, build, and run

Pair

Light

Dark

foreground on background

17.7:1AAA

17.5:1AAA

muted-foreground on background

6.8:1AA

7.9:1AAA

brand on background

5.5:1AA

7.3:1AAA

brand-foreground on brand

5.7:1AA

7.3:1AAA

brand-2 on background

4.8:1AA

9.6:1AAA

brand on brand-soft

4.9:1AA

5.5:1AA

brand-2 on brand-2-soft

4.4:1AA large

7.0:1AAA

success on background

5.4:1AA

9.4:1AAA

warning on background

4.8:1AA

10.3:1AAA

destructive on background

4.6:1AA

6.8:1AA

Key

Does

Tab / Shift+Tab

Move between interactive elements

Enter / Space

Activate buttons, toggle checkboxes and switches

↑ ↓ ← →

Move within menus, tabs, radio groups, sliders, carousels

Esc

Close dialogs, menus and popovers; focus returns to the trigger

Solvion design system

Logo

Clear space and size

Misuse

Surfaces and text

Brand

Status

Tonal ramps

Usage

Sora

Manrope

JetBrains Mono

Type scale

Setting text

Spacing

Grid and containers

Breakpoints

Radius

Elevation

Borders and layers

Sizes

Usage

Duration

Easing

Expressive layer

Principles

Actions

Inputs and selection

Data display

How long does a project take?

Do you maintain what you build?

Overlays

Feedback and navigation

Brand patterns

Forms

Rating scale and tags

Data tables

Empty states

Loading

Navigation bar

Route pre-loader

Choosing feedback

Example

Categorical palette

Sequential

Status in charts

Rules

In practice

Mechanics

Microcopy

Contrast

Focus

Checklist

Keyboard

Solvion design system

Logo

Clear space and size

Misuse

Surfaces and text

Brand

Status

Tonal ramps

Usage

Sora

Manrope

JetBrains Mono

Type scale

Setting text

Spacing

Grid and containers

Breakpoints

Radius

Elevation

Borders and layers

Sizes

Usage

Duration

Easing

Expressive layer

Principles