Compare systems
Same page, same words. Only the system changes. · style guide
head Inter body Inter 16/24 h1 48/48 −1.5 page grey-50 radii 9 steps separation shadow motion 120 / 160 / 240ms

Color

Identical

Adopted from Glorium unchanged, so the app and the website cannot drift. Teal-700 is the primary in both. Toggling does nothing here, which is the point.

50
100
200
300
400
500
600
700
800
900
950

Teal · teal-700 = rgb(0,107,104) = #006B68 is the primary in both systems

0
50
100
200
300
400
500
600
700
800
900

Neutrals are cool navy rather than grey. Identical ramp in both.

success warning destructive info ai

Status colors, identical. Purple is reserved for AI in both and is never a generic accent.

Type

Same ramp Different faces and steps

The size ramp is shared: we adopted Glorium's tokens on 18 September 2026, so a size means the same thing in both systems. What differs is the faces and which steps get used. Glorium runs Inter throughout. Ours puts a serif on headings and takes the larger step for body, because these surfaces are long-form and the audience skews older.

Technology that connects your Care Circle

Health plans want outcomes and a seamless experience. Providers want to reach the right patients without stretching their staff thin.

Your care circle

Only the people you choose can see how you are doing. You decide, and you can change it at any time. VivaLynx connects providers, payers, patients and caregivers in one credible, evidence-backed ecosystem.

A simple daily check-in

One tap lets the people you chose know you are doing okay.

Caption · 12/16 in both systems

Surfaces

Differs

Glorium separates a card from the page with a four-point tint difference and a soft shadow, on a grey-50 page. Ours keeps a white page and separates with a border, which reads cleaner for long-form marketing pages.

Appointment confirmed

Tue 14 Oct · 09:20

Dashed outline marks the page surface. Watch the fill and the card edge change.

Shape and space

Identical

Both scales adopted from Glorium unchanged on 18 September 2026: nine radii and thirteen spacing steps. Toggling does nothing here now. What differs is which steps get used, and this side deliberately spreads across the radius range rather than sitting everything at 8px.

Radii

Spacing

Elevation

Same scale Different rule

The shadow steps are adopted. The rule is where this side splits: nothing at rest carries a shadow, because a border defines the edge and a soft shadow is invisible to a low-vision reader. Shadow is reserved for anything that leaves the page plane, which here means hover, popovers and dialogs. The four boxes go flat when you switch because these are resting surfaces.

xs
sm
md
lg

States

Identical

Hover, active and disabled are derived tokens in both systems, and focus is one geometry: a 3px ring at 2px offset. Adopted on this side 18 September 2026; before that every component invented its own hover.

Tab through the page to see the real ring. It is the same 3px at 2px offset in the app.

Components

Same parts, different shape

Identical markup. Corner radius, type and weight all move with the system.

Alert, never notification. The word is settled in both systems.
Beta Draft

Care Circle

A 24×7 app connecting patients with caregivers and providers on the go.

Motion

Differs

Glorium runs three durations on one easing curve. Ours runs a single 160ms and treats reduced-motion as mandatory, so the fast and slow steps are greyed out here.

Hover each. Glorium's token files carry no prefers-reduced-motion handling; ours makes it a rule.

Icons

Same library Size ladder is theirs

Lucide in both, stroke-only, 2px on a 24px grid, painted with currentColor. Glorium documents a size ladder and caps it at 34px. Ours has no icon rules yet, which is a gap.

Amber secondary

Ours only

Glorium's orange is #FFB020, which is the warning status token. Our marketing amber is a different value and exists only on the public side, used sparingly: kicker, outline button, statistics band.

Aging in place

63M Americans caring for a family member
7 in 10 family caregivers are also employed

Dark mode

Theirs only

Glorium ships a full dark remap: background grey-950, cards grey-900, and the primary flips to teal-400 with a grey-950 foreground. Ours is light only.

Appointment confirmed

Tue 14 Oct · 09:20

Imagery

Deliberate departure

Glorium's rule is flat color only: no gradients, no textures, no photography, and a browser-chrome card where a screenshot would go. A marketing site selling to families needs people, so ours departs on purpose.

app.vivalynx.com
Browser-chrome card
with real components inside

Glorium · no photography in the system

Directed stock of older adults living well,
replaced by real photography later.
Show the person, not the condition.

Ours · people, never fear

Language

Ours only

Glorium's system carries no voice guidance at all. Ours treats language as a first-class part of the brand.

care circle

not care network or support group

keeps an eye on

not monitors, tracks or watches

grade 6

reading target on consumer surfaces

What this page is. One set of markup rendered through two token sets. Anything marked identical does not move when you toggle, which is the evidence that the two systems share a spine. Anything marked as differing is a deliberate split between a product interface and a public marketing surface.

Glorium values read from the shipped design system bundle: tokens/semantic.css, tokens/fig-tokens.css and the guideline pages. Ours read from assets/style.css on this site.