A horizontal lockup in blue and teal, with the wordmark drawn as paths.
The symbol stands alone wherever the name already appears.
Primary lockup · light backgrounds
Symbol
Reversed lockup · dark backgrounds
App icon, avatar, favicon
Clear space and minimum size
Clear space on all sides equals the height of the symbol.
Minimum 120px wide on screen, 1 inch in print.
Do
Use the reversed white lockup on any dark background.
Set the symbol on a colored tile wherever a square is forced.
Give the symbol a vertical or free-standing frame where the container is a choice.
Place it on white, the teal tint, or deep teal.
Don’t
Recolor the lockup. Its blue and teal are fixed.
Crop the symbol to square it. The flame tips disappear.
Stretch, rotate, outline or add a shadow.
Place it over a photograph without a solid panel behind it.
02
Color
Teal is the brand. Amber is the secondary. Everything else is neutral or
functional.
Primary · teal
50
100
200
300
400
500
600
700
800
900
950
700 · #006B68 carries headings, primary buttons and
links. 50 · #E7F8F6 is the tinted surface.
950 · #032F2D is the deep band for full-width dark sections.
Secondary · amber
Tint#FFF9E8statistic bands, panels
Border#FFE8A3edges on tinted panels
Amber#C98A1Ebutton outlines, rules
Dark#78510Damber text
Amber appears three times on a page at most. The kicker above a
headline, the outline of a secondary button, and a statistics band. Any amber text uses
#78510D; the mid amber is for outlines and rules.
Neutrals
0
50
100
200
300
400
500
600
700
800
900
Cool navy rather than grey. #172033 is body text,
#5B6472 is secondary text, #D8DEE8 is every border.
Status colors
Success#0D8558
Warning#FFB020
Error#D92D20
Info#0069B0
AI#6D5DF6
These live inside the product. Violet marks AI-generated output.
Do
Build marketing from teal, amber, neutrals and white.
Pair every color signal with a label, an icon or a shape.
Keep body text at #172033 on white or the teal tint.
Don’t
Put status colors on a marketing page.
Use violet as decoration. It means AI.
Introduce a color that is not on this page.
Set light teal text on white. 600 or darker for text.
03
Type
Literata for headings, Source Sans 3 for body. Both are open source under the
SIL Open Font License, free commercially and self-hostable.
Literata · headings
Aa
Care that keeps everyone connected
Source Sans 3 · body
Aa
Families stay close from a distance. The care circle sees what it needs to
see, and the person at the center decides who that is.
On screen
Role
Face
Size
Tracking
Display
Literata Bold
48px / 1.08
-.02em
Heading 2
Literata Semibold
36px / 1.2
-.015em
Heading 3
Literata Semibold
24px / 1.3
-.01em
Heading 4
Source Sans 3 Semibold
20px / 1.4
-.005em
Lead
Source Sans 3
20px / 1.55
normal
Body
Source Sans 3
18px / 1.7
normal
Body small
Source Sans 3
16px
normal
Caption
Source Sans 3
14px / 20px
normal
Eyebrow
Source Sans 3 Bold
12px, caps
.12em
Type in documents and decks
Role
Face
Size
Title
Literata Bold
22pt
Heading 1
Literata Semibold
16pt
Heading 2
Literata Semibold
13pt
Body
Source Sans 3 Regular
11pt
Caption
Source Sans 3 Regular
9pt
Word needs both fonts installed on every machine that opens the file.
Do
Set body at 18px on screen and 11pt in print.
Cap the reading column near 68 characters.
Take every size from the tables above.
Use Georgia and Arial as substitutes where the fonts cannot be installed.
Don’t
Set headings in ALL CAPS. Caps stay on the eyebrow label.
Pick a size between two on the scale.
Swap in another serif for Literata.
Justify body text or hyphenate it.
04
Voice
Warm, plain and specific. We sell people living their lives and staying
connected to family, including from a distance.
Say
Instead of
care circle
care team, care network, support group
alert
notification
keeps an eye on
monitors, tracks, watches
the people you choose
authorized contacts
daily check-in
proof-of-life check-in
a smartphone or tablet you already own
your VivaLynx device
Do
Write to the reader in the second person on consumer pages.
Lead with what someone gets to do.
Use specifics. A real number beats an adjective.
Use US spelling throughout.
Don’t
Sell fear. No falls, no emergencies, no what-ifs.
Use monitoring language on consumer pages.
Talk over older readers or about them in the third person.
Reach for “seamlessly”, “transform” or
“unlock”.
05
Imagery
Photograph the life the product enables. Directed stock for now,
commissioned photography when it can be arranged.
Do
Show people living their lives. Gardening, cooking, on a call with a grandchild,
out of the house.
Show connection across distance. The family member on the other end of the call is
as much the subject as the person at home.
Use real homes and real ages. Lived-in rooms, people who look the age they are
meant to be.
Run photography large and structural, carrying its own section.
Don’t
Show fear. No falls, no distress, no hovering over a frail person.
Use clinical settings on consumer pages. Hospital beds and scrubs belong in
provider material.
Make the device the hero. Phones and tablets appear incidentally.
Drop in decorative squares beside text, or abstract 3D shapes.
06
Icons
Lucide, drawn at 2px stroke on a 24px grid. Icons take the color of the text
beside them.
Do
Keep icons decorative. The meaning lives in the words next to them.
Give an icon its own label when it is the only content of a button.
Set an icon on a tinted well where it needs presence.
Don’t
Substitute emoji for icons.
Draw an icon above 34px. Past that, use type or a photograph.
Mix in a second icon set.
Build a row of three circled icons with a bold title and two lines under each.
07
Motion
Minimal, and accessible by default. Motion confirms what someone did.
Do
Honor prefers-reduced-motion. When the operating system asks,
animation drops to near zero.
Run transitions at 150 to 200ms, ease-out.
Keep movement under about 4px. Fades and small lifts.
Don’t
Use parallax, auto-playing carousels or scroll-jacking.
Move anything without user action.
Animate a whole section into view.
08
Layout
White pages, generous space, and one dominant column rather than an even
grid.
Do
Keep pages white. Separate cards and panels with a border.
Space on a 4px grid. 16px between paragraphs, 24px inside components, 48px between
sections, 96px at the top and tail of a page.
Round corners at 8px on cards, panels and buttons, 6px on chips and small controls.
Full-width bands run square.
Vary how sections are built. Where two in a row share a shape, rebuild one.
Show one focus ring style everywhere: 3px at 2px offset.
Don’t
Put a shadow on anything at rest. Shadow means lifted: a menu, a dialog, or
something under the cursor.
Center everything.
Use bento grids, glassmorphism or gradient text.
Remove a focus ring without replacing it with something as visible.