AmbientIntelligenceBrand.
The wordmark, the type, the color, the motion, the voice. Sequenced as a story you can read top to bottom.
01Wordmark
The Ambient Intelligence wordmark is the primary brand identifier.
Clearspace
Maintain padding equal to the height of the wordmark on all sides. Crowding kills authority.
Color reversal
Cream backgrounds use the wordmark at its native dark color. Dark backgrounds invert to off-white via a CSS brightness/invert filter, never a separate asset.
Minimum size
Don't render below 24px wordmark height. Smaller surfaces use the monogram glyph.
02Typography
Two Klim families. One serif for voice. One sans for everything else.
Serif · display + italic accent
Tiempos Fine
Klim Type Foundry, licensed
Aa Aa
Editorial display.
Headline 32. Intelligence.
Subhead 22 italic. The brand reads slower than most. Periods do the work that em dashes would do elsewhere.
Body 16. Tiempos Fine is rare in body copy; reach for Die Grotesk for paragraphs. Reserve Tiempos for editorial weight.
vf-roman.woff2·vf-italic.woff2·FONTS.serif → var(--font-tiempos-fine)
Sans · body + UI
Die Grotesk
Klim Type Foundry, licensed
Aa Aa
B Medium 500. Interface bold.
A Light 300. Interface regular.
Body 14 Light. Die Grotesk powers every button, label, slider, card, and paragraph of body copy across the platform. A Light reads quiet at 14; B Medium carries headings and call-to-action buttons.
a-light.woff2 · 300·b-medium.woff2 · 500·FONTS.sans → var(--font-die-grotesk)
Mono · labels + code
JetBrains Mono
Google Fonts, free
STATUS · LIVE | API · /tokens/pr | CONTAINER · 1274px
03Color
Cream over white. Brand-dark over jet-black. Sage as the only Live state. Values come straight from packages/tokens.
Surfaces
Where content lives. Cream is the primary, parchment is for cards.
cream
COLORS.cream
#FAF9F6
Primary surface. Hub and landing backgrounds.
parchment
COLORS.parchment
#F0EEE6
Card surfaces inside cream layouts.
parchmentEdge
COLORS.parchmentEdge
#E6E3DA
Border on parchment cards.
brandDark
COLORS.brandDark
#141413
Dark surfaces. Footer and hero accents.
Text
A descending scale from primary headlines to decorative watermarks.
text
COLORS.text
#1f1f1e
Primary text. Headlines and body.
textMuted
COLORS.textMuted
#3D3D3D
Secondary text. Subheads and descriptions.
textSubtle
COLORS.textSubtle
#6E6E73
Tertiary text. Captions and helper copy.
textFaint
COLORS.textFaint
#9CA3AF
Quaternary text. Labels, eyebrows, deemphasized.
textWhisper
COLORS.textWhisper
#C4C4C0
Quinary text. Decorative, watermark-like.
Accents
Reserved for state and emphasis. Use sparingly.
sage
COLORS.sage
#5E8C6A
Live status, success states.
terracotta
COLORS.terracotta
#B85C52
Warm callouts, errors deemphasized.
amber
COLORS.amber
#D97706
Warnings, R&D status, modified-token highlights.
blue
COLORS.blue
#0071E3
Primary CTAs against dark backgrounds.
Edit
Change a color. Open the Token Lab, submit a PR.
04Motion
Motion serves the content. Composed, never showy.
Subtle, never distracting
Motion serves the content. Animations are short (under 400ms), low-amplitude, and use ease-out curves. Avoid bounces and overshoots; they read playful where the brand reads composed.
Traveling sparks, not pulsing rings
Network-style backgrounds and canvas patterns use sparks traveling along edges (animateMotion) rather than rings pulsing outward. Sparks read as flow; pulses read as alarm.
Siri border for portraits
Featured cards (resident portraits, status cards) use the conic-gradient Siri-border treatment as their attention frame. The glow rotates slowly, always around the same hue family as the brand.
Status, not animation, where possible
When the user needs to know something changed, prefer a static badge change over an animation. Save animation for moments where the change itself matters more than the new state.
05Ella
Not a character or avatar. A field of light that breathes and never repeats.
Ella AI Nurse Assistant
www.ellamemory.comIntelligence in motion.
Ella AI is not a character or avatar. She is a field: six Lissajous oscillators moving in screen blend, producing patterns of light that breathe and never repeat.
01Lissajous Paths
Six oscillators each trace a parametric Lissajous figure: x = sin(t·fx + φ), y = cos(t·fy + ψ). Each fx/fy pair is an incommensurate ratio, so the curve never exactly closes. The pattern is organic and non-repeating across any practical timescale.
fx: .31, fy: .4702Screen Blend
globalCompositeOperation is set to screen: where two gradients overlap, colors add toward white rather than mixing toward gray. Against the near-black fill, the six spectral colors stay vivid, and the luminous core breathes as the oscillators drift through one another.
globalCompositeOperation = 'screen'03Border Color Motion
Four layered conic strokes ring the portrait with six drifting color stops. Each interpolates toward a random angular target about every 400ms at its own rate, so the colors are perpetually mid-transition, coupled to the fill's clock and never still.
v += (target − v) × 0.03006Voice
How we write. Four rules and the worked examples that go with them.
Precise punctuation, no em dashes.
Use periods, commas, parentheses, and colons. The em dash reads as default AI output; we want the brand to sound more deliberate.
Yes
Cybersecurity. Cloud, device, and data security for Ambient Intelligence.
No
Cybersecurity — cloud, device, and data security for Ambient Intelligence.
Lead with the noun, not the company.
Page headlines name what the page is about, not who we are. The brand is implied by the surroundings.
Yes
Engineering Center. The full surface area behind Ambient Intelligence.
No
At Ambient Intelligence, we believe engineering should be...
Specific over aspirational.
Numbers, named technologies, and proper nouns beat adjectives. AWS Security Hub beats robust cloud security.
Yes
Eleven CloudFormation stacks. Fall alerts in under 8.3 seconds.
No
Industry-leading cloud infrastructure with rapid event response.
Italicize the accent, not the whole sentence.
Tiempos italic is for one or two emphasized words in a sentence or a single line in a stacked headline. Sentence-long italics read as decoration.
Yes
Ambient / Intelligence (italic) / Engineering
No
Engineering the future of healthcare technology together (entire sentence in italic).