#111A20 / #EDF3F5
#55636B
#B0C0CA
#B42334 on white
#BF0615 on light surfaces
#F8FAFA / #152127
('Desktop'); return (
('Ready'), [motion, setMotion] = useState(true), [waves, setWaves] = useState(true), [demo, setDemo] = useState(false); const [audioUrl, setAudioUrl] = useState(''), [audioName, setAudioName] = useState(''), [audioError, setAudioError] = useState(''); const audio = useRef
('device'); const [inspect, setInspect] = useState(false); const [android, setAndroid] = useState(false); const [screenWidth, setScreenWidth] = useState(720); const [frameError, setFrameError] = useState(false); const [run, setRun] = useState(0); const [expanded, setExpanded] = useState(false); const screen = useRef
('light'); return (
([]); const [voice, setVoice] = useState
(null), file = useRef
(null), level = useRef
(null), scene = useRef
(null); const [menu, setMenu] = useState(''); const [notice, setNotice] = useState(''); const composer = useRef
(null); const appRef = useRef
(null); const appTitle = useRef
(null); const audioGraph = useRef
(null); const dialog = useRef
(null); const f = device === 'Phone' && android ? androidFrame : frames[device]; const phone = device === 'Phone'; const watch = device === 'Watch'; const computer = !phone && !watch; const uiWidth = computer ? inspect ? screenWidth : Math.max(860, Math.min(1000, screenWidth / 0.85)) : f.ui; const scale = screenWidth / uiWidth; const compact = computer && inspect && screenWidth
(null); const launcher = useRef
(null); const previousSidebar = useRef(sidebar); const chatScroll = useRef
(null); return (
) : page === 'Approvals' ? (
) : page === 'Inbox' ? (
); const g = data.glyphs[selected]; const b = g.localInkBounds; return (
); if (page === 'Agents') return (
); if (page === 'Overview') return (
); return (
*Nominal construction stroke. Values are displayed to three decimals; the downloadable data retains source precision. Gaps are horizontal bounding-box gaps, not minimum contour distance.
. Descriptions are paraphrases; design responses are this proposal’s interpretation.
0
0, 0 u
0.06em
0.38 H · 38 u
0.50 H · 50 u
01
01IdentityRecognise the claw.
02
02TypographyGive every word room.
03
03Living materialsGive the surface a soul.
04
05
06
07
08
1 px light rim · 12% inner highlight
1,000 units / em
1.16
1.25
1.35
1.35–1.4 · glass layer only
1.4
1.45
1.5
1.6
1.65
1.65 H · 165 u
10
100
100 / 104 u
100 u
101.2
1024 × 1024 px · square, unmasked layers
104
104 u ink height
11
112
112 u
12
12 Oct · from 15:00
12 October 2026
12 px controls · 20 px groups · 28 px stage
12 u
12A
13
13.4
13.6
13.6 u
134 u ink height
14
14 October 2026 · 18:30 WEST
15
15 Oct · by 11:00
16
165 u
17
17.824 nominal px at 32 px
18 · mobile 17
180 ms · opacity and colour
180 px wide
192
2
2 px lift · 1.5% press compression · 380 ms settle
2 u
2.4 s cycle · scale 1.00–1.045
20
210 u below baseline
24 px default · 12–36 px study
26 / 22
26.7
273
28 seconds · one continuous loop
28–36
3.2 s cycle · scale 1.00–1.035
356
36 px · navigation and floating controls
400
40–64 · mobile 34–44
41 / 33 u
44 × 44 pt on iOS · web controls 44 px
454.394
483 / 570 u
492.094
50 u minimum clear space
500
557 u
571.094
600
66
67
68
69.2
70.4
88.394
92.7
926.295 u
926.295 u · total width
; kerning: Record
@font-face { font-family: 'OpenClaw Text'; src: url('OpenClawText-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } body { font-family: 'OpenClaw Text', system-ui, sans-serif; font-synthesis: none; font-size: 1.0625rem; line-height: 1.65; }
A
A WORLD OF POSSIBILITY
A brief category, used sparingly.
A bright upper rim and a softer lower edge
A clear brief, contextual proofing and a bounded, original first family.
A clear path around the chair.
A clear way forward.
A clearer voice. In every weight.
A closer look
A companion for reading.
A component does something.
A familiar presence. A new voice.
A family, with a name of its own.
A few useful details, in one place.
A fictional hotel, by the water.
A flight uses origin and destination local times. A stay uses calendar dates. A reference clock compares one moment in several places.
A full range. A deliberate choice.
A human test
A little Claw.
A little depth.A clear way forward.
A little elasticity, with a resting point.
A little head tilt, with attention in the eyes.
A little help goes a long way.
A little help, whenever you need it. OpenClaw gives your ideas room to grow. Plan a journey, find the right words, or make time for what matters. You stay in control.
A little of Claw.
A little room for inspiration.
A little room to think.
A little technology, with humanity at heart.
A living type specimen.
A more open alphabet. A steadier rhythm. A family with the range to speak softly, explain clearly and make a point.
A natural joint, not a horizontal slice.
A nearby pointer invites a small head and gaze response. The main movement keeps its rhythm, so a greeting never pulls the feet or tail out of place.
A preview is not a pass.
A quiet, nearly opaque surface for messages, flight times, reservation details and forms. It borrows the shell’s temperature and gives information a steady home.
A quieter “t.” A clearer word.
A recipe contributors can use.
A reference for documentation structure, readable specimens and consumable primitives. The identity and OpenClaw component contracts are independently developed.
A reference for the next component.
A shared design language for personal agents.
A shared design language for personal agents.Built around an open claw, a welcoming character and the person in control.
A signal. A living world.
A small red emblem sits on the wearer’s left chest. White and black signature editions have no back artwork. The character-inspired edition is white only, with a soft full-colour back print and the quote and OpenClaw signature beneath it.
A small, clear heading beside ordinary text.
A soft outward rhythm. Input state remains visible.
A stable sidebar, content-first windows, keyboard navigation and clear toolbar actions. Glass chrome can reflect the workspace while the document remains quiet.
A steady stance and a relaxed expression.
A surface with a memory.
A system with reasons.
A translucent functional layer for toolbars, navigation and floating controls. The shell beneath contributes colour and light; the glass diffuses detail.
A useful hierarchy gives each piece of information a job. These are OpenClaw’s web starting points, refined for this family rather than copied from another platform.
A voice with warmth
A warm welcome
Accessibility ↗
Across devices
Actual font files provide every style. No browser-made bold or slant. These are static fonts; a variable weight or optical-size axis is not claimed.
Adapt the manner, keep the character.
Address
Adopt in focused parts.
Advance
Advance at selected size
Agent
Agent sessions
All 285 encoded characters and the missing-character glyph are reviewed in every style: 2,860 glyphs in total. The circumflex on ĵ now sits over a dotless base. Accents, ligatures, punctuation, numerals and symbols are included in the same review.
All black
All ears
All glyph measurements
All sizes use rem in the implementation. Pixel equivalents below assume a 16px browser root. A number sets a starting point; proof the actual words and surface before shipping.
All ten styles, every supported character, enlarged details and reading-size proofs. Includes before-and-after evidence and the coverage ledger.
All white
Alphabet and reading proofs
An anchor for the next idea.
An articulated 3D room, original Blender source, baked shell materials and a 28-second choreography with contact checks.
An assistant on hardware you control, serving your context.
An independent contributor proposal, not official OpenClaw guidance.
An inspectable scene. A considerate runtime.
An open contribution, clearly labelled.
An open gesture from the smaller pincer.
An open invitation.
And this is Bold Italic.
And when a thought needs a little warmth,
Animated room · web GLB
Animation suspended
App reference ledger
Apple HIG · App icons ↗
Apple HIG · App icons ↗ · Materials ↗ · iOS ↗ · macOS ↗
Apple HIG · Components ↗
Apple HIG · Components ↗ · Accessibility ↗ · Wallet ↗
Apple HIG · Materials ↗
Apple Human Interface Guidelines ↗
Apple TrueType Reference Manual — Digitizing Letterforms ↗
Apple source canvas
Archive · OpenClaw Display fonts & source
Ask a question, or choose a prompt below.
Ask upstream maintainers to review the part they can use. Their adoption decision remains theirs.
Astra specialist workstreams
At ease
At home, wherever you are.
At most 1.25 million pixels · DPR at most 1.5
Authoring
Away from view
B
Background or offscreen
Baked shell colour and surface normals
Baseline overshoot
Black
Blender 4.5 LTS · articulated 3D geometry
Blender scene & source
Blender-rendered room · live scene retry
Blue gives depth. Red gathers at the crests. Rose softens the transition.
Blue-and-rose eye portraits, the standing character and living shell study, with image provenance and usage notes.
Body
Bound the area of backdrop blur. Animate transforms and opacity. Pause movement outside the viewport and when the tab is hidden. Use the shell photograph once, with no repeated tiling.
Bounded pointer attention above the authored pose
Bring shell-lit glass to the application’s own chrome and optional desktop theme concepts. Respect GNOME and KDE conventions, compositor support, window controls and accessibility preferences.
Broad highlights reveal curvature. Small glints belong to the shell, not the text.
Build from the platform.
Build in the open.
Built around an open claw, a welcoming character and the person in control.
Button
Buttons lift as you approach and settle when released. The reading layout stays still. The response belongs to the control you touch, so it feels connected to your action.
Buttons, fields and recurring navigation.
C
CLAW / VOICE
CSS variables
Canvas / primary text
Caption
Cards and smaller content sections.
Carry consistent identity and action words across computer, phone, watch and voice. Adapt density and feedback to each surface. Label future concepts clearly.
Casa da Maré
Character and material
Check-in
Check-out
Choose a device, open OpenClaw, then explore the interface.
Choreography
Clarity before spectacle
Clarity is the fallback.
Clarity within.
Claw Sans 0.7 · all styles & source
Claw Sans 0.7 · semantic web roles
Claw Sans carries the openness and soft curves of the identity into a practical reading face. Light through Bold, with real italics, provide a consistent range. The fixed logo and earlier Display experiment remain separate drawings.
Claw Sans is our original humanist sans serif: open, approachable and made for everyday reading. Ten styles share a more balanced weight, steadier proportions and carefully fitted spaces.
Claw Sans · 0.7
Claw red
Claw · 307.795 u
Claw.
Claw’s Blender room
Clear space, each side
Close sidebar
Collection 01 · Design concepts
Colour needs a role.
Colour saturation
Colourless shell relief · Textured glass by default
Comfort comes first.
Comfortable reading, typically 55–70 characters per line.
Community proposal
Compact title
Comparison style
Complete alphabet assessment: contour joins, accented characters and symbols, with primary references and an explicit review scope.
Complete alphabet proofs
Complete component contracts · JSON
Component and platform contracts
Concept screens with fictional itinerary data. Switch Trip, Voice and Notes inside the preview. These are browser implementations, not screenshots of shipping OpenClaw apps.
Connection
Content surface
Continue the craft in Fontra.
Continuity across devices
Contours
Contrast pair
Contrast thresholds and the sRGB calculation used in our live colour tester.
Contribution guide
Contributor source
Control label
Copy Black
Copy Claw red
Copy Ocean
Copy Rose
Copy Shell
Copy White
Corner rhythm
Coverage, honestly recorded.
Curiosity, care and the courage to connect.
Curve representation, outlines and the difference between stored geometry and rendered type.
D
Dark
Dark canvas / text
Dark fill
Dark secondary text
Date range
Deep ink at 86%
Deep ocean with a 92.5% veil
Default
Default agent
Default glass defines navigation and controls. A stable reading surface protects dense facts; shell colour and light give the system its identity.
Delivery uncertain. Check the conversation before sending again.
Dense content
Design
Design & finishing notes
Design decisions & implementation scope
Design proposal
Design tokens
Design tokens · JSON
Device frame unavailable. You can still explore the app below.
Diffusion · 24 px
Display time in
Done
Download
Download 4K
Download SVG with clear space
Download texture kit
Download the source notes
Draft ready to review.
E
Earlier display experiment, Regular and Medium only. This archive is separate from the current Claw Sans family.
Edge
Editable Fontra sources
Eight letters. Nothing left to chance.
Ellen Lupton — The Science of Typography ↗
Ember
Emphasis, without ambiguity.
Enlarged outlines and local browser and FreeType proofs complement structural checks. Small-size antialiasing still varies by display and platform; this release does not claim a controlled readability study.
Error text
Every letter in the approved signature · source design units
Every space has a job.
Every supported character and ordered pair is measured across all ten styles. Word and paragraph proofs check what those measurements mean at reading size, alongside accents, punctuation, numerals and changes of emphasis.
Every supported character matters.
Everyday controls
Everyday information
Everyday pieces.
Exact foreground claw · preserve its opening
Exact wordmark measurements · JSON
Explore the studio
Eyebrow
F
Fallback
Familiar to use. Ours in detail.
Family assessment and scope
Feedback and recovery
Final optical review
Fit letters before adjusting pairs.
Five weights · roman and italic · original outlines
Flight
Flight details
FontForge — Trusting Your Eyes ↗
Fontra workflow and sources
For a native pass, use Wallet’s platform tools and its scannable-code requirements. A styled ticket card is not a Wallet pass.
Foundation value
Four signatures, standalone icons and exact outlined wordmarks. SVG masters, dimensions and a two-page PDF.
Friendly and open without requiring lore.
From a page title to a quiet detail.
From shell to surface.
From the icon into the app.
Front & back
Full alphabet assessment
Full artwork height
Full artwork width
Full relief and natural pigment for the character, a voice presence or a large editorial moment. Frame the texture as a single surface.
G
GNOME for Linux
Gap after
Gap to next letter
Gate
Gateway
Generous clear space, legible hierarchy and unobstructed controls. Use the approved opening as a compositional cue; preserve the actual logo paths.
Geometry supports construction; perception decides the final form.
Get Fontra ↗
Give devices, platforms and model choices an equal place in the system.
Give powerful software a calm presence.
Give the mark room, the page a clear reading path, and the person a visible next step.
Glass diffusion
Glass has a job.
Glyph group
Good typography makes the next step feel natural. A title gives you direction. A subtitle adds context. The details stay easy to read.
Greet Claw
Grok conversation supplied by the contributor ↗
Guest stepper
H
HIG coverage ledger
HIG pages refreshed in this revision
Here when you need me.
Hide measurements
His February 2026 statement anchors accessibility, openness and people owning their data.
Historical research context; evidence depends on the reading situation.
Hotel local time · Europe/Lisbon · WEST
Hotel stay
How to Create Typefaces: From Sketch to Screen
I
Icon button
Icon height
Icon ↔ wordmark gap
Identity
Identity artwork
Image gallery
In use
Include source, tokens, clear examples and provenance. Keep changes focused enough for maintainers to evaluate and take over.
Independence from any one company and broad ecosystem access.
Ink bounds are analytical Bézier bounds. A nominal stroke is a construction parameter, not an equal thickness everywhere. SVG placement spans are not font sidebearings.
Ink height
Ink width
Ink width / height
Inspectable files, clear measurements and practical starting points for the next contributor.
Interactive branding studies based on the current OpenClaw interfaces. Messages, voice and connection states are local previews.
Interface source ledger
Interfaces and a usable system
Invite with personality; explain errors, permissions and recovery with plain facts and useful actions.
J
Jonathan Hoefler — Getting Started with Typeface Design ↗
Journey
K
Keep orange inside the character’s natural shell pigment. It is not a fifth logo treatment or an extra accent in interface controls.
Keep rendering economical.
Keep text, icons and reading surfaces clear.
Keep the channel open.
Keep the exact red for the logo. Use semantic tokens for text, focus, warnings and results. Pair status colour with words and icons. A red claw never means an action failed.
Keep the rhythm already established.
Keep time, date, timezone and currency together. Show a total and say what it includes.
Keep uncertainty visible
Keyboard
L
Layering
Lead with the event, route or place. Put the primary status alongside it.
Left / right sidebearing
Less framing. More continuity.
Less transparency. Same identity.
Let capability travel.
Let native composition handle interlayer lighting
Letter
Letter advances and kerning retain the previous release’s fitting. The fixes address the contours directly. Exact glyph measurements, editable sources and matching before-and-after specimens make the work open to inspection and further refinement.
Licensing and provenance
Light
Light belongs in generous titles. Regular carries reading. Medium and Semibold organize the interface. Bold adds emphasis. Each has an italic companion with redrawn details.
Light fill
Light follows the surface. A transcript remains available.
Line height
Linux
Lisbon is waiting.
Lisbon · South entrance
List and comparison table
Listening
Listening preview
Living shell
Look inside every letter.
Look up
Love for technology. Love for humanity.
M
Main Session
Make a little more time for what matters.
Make capability understandable before asking people to trust it.
Make identity, choices and the place where work happens easy to understand.
Make it useful at every depth.
Make it yours. Build it forward.
Make the facts comparable
Make the system useful to its next contributor.
Make warmth precise.
Manage your connection and assistant.
Material CSS
Materials ↗
Meet the character
Menu and context menu
Merch.
Message sent.
More depth at the edges. Calm where you read.
Move near Claw to catch his attention.
Movement starts with support.
Muted
N
NM type — Art, Type and Geometry ↗
Name the active agent, conversation and device. Show what an action will do and distinguish a draft, a queued request and a confirmed result.
Named colour roles, Light/Dark/Textured appearances, spacing, type, shape and motion. A readable starting point for contributors.
Names the actual outcome; does not imply sending.
Native conventions, legibility, feedback, control, generative AI and device-specific interaction informed our proposed contracts.
Navigation carries the texture.
Navigation study · no live data
Neutral
New session
Next origin / end span
Night at the Oceanarium
No matching sessions
No recent sessions in this preview.
Nominal descender guide
Nominal stroke
Not assigned
Not connected
Notes
Notice, without a startle.
O
OPENCLAW
Ocean
Offer a precise next step
On-curve / off-curve points
One app. The same unmistakable claw.
One clear introduction to a page.
One colourless texture. Two lighting settings.
One emblem. One character. Across every piece.
One familiar signature.
One family. Clear roles.
One identity across iOS, macOS and Linux. Familiar platform structure, with shell-lit glass for the parts that guide you.
One moment · 08:00 UTC. Explicit zones prevent silent itinerary changes.
One recognizable character. A language that adapts to the moment.
One rounded claw. A clear, living channel. The approved silhouette and custom wordmark work together as one precisely spaced signature.
Open
Open by nature.
Open contribution candidate
Open source, community participation and lasting independence.
Open source, down to the outline.
Open the editable sources in Fontra to work on outlines, sidebearings and kerning in real words. Each of the ten styles is an independent source, with its own measurements and kerning.
Open to its environment.
Open to possibility.
Open · 340 u
Open, Neutral and Personal informed the proposed principles. Foundation statements and our design responses are kept distinct.
OpenClaw
OpenClaw Display 0.1
OpenClaw Display · fonts & source
OpenClaw Foundation
OpenClaw Foundation ↗
OpenClaw Text 0.5
OpenClaw Text 0.5 · all styles & source
OpenClaw Text 0.5 · semantic web roles
OpenClaw Text · scalable rem sizes
OpenClaw source ledger
OpenClaw vision ↗
OpenClaw · Surface language
OpenClaw, in its own words
Orient
Origin in wordmark
Origin x
Original emblem artwork
Original illustrated motion
Original illustrated poses & rig
Original site code and token definitions are offered under MIT. Original documentation and contributor-owned artwork are offered under CC BY 4.0 to the extent rights can be granted. Claw Sans and the archived OpenClaw fonts use SIL OFL 1.1. Third-party marks and material remain with their owners; these licences do not grant trademark rights or imply endorsement.
Original site code and token definitions are offered under MIT. Original documentation and contributor-owned artwork are offered under CC BY 4.0 to the extent rights can be granted. OpenClaw Display uses SIL OFL 1.1. Third-party marks and material remain with their owners; these licences do not grant trademark rights or imply endorsement.
Our design principles
Our design response
Our familiar red signature, with a personality of its own.
Our original type family, refined for the things people read every day. More deliberate letterforms, a complete range of emphasis and a quieter rhythm on every background.
Our plate texture becomes flowing red ribbons. A quiet breath when listening; a brighter rhythm when speaking.
Our version of liquid glass, shaped by Claw.
Out in the world.
P
Page title
Pairs a concrete state with the next available action.
Passes WCAG AA contrast for normal text.
Pause
Pause motion
Pause on scroll-away and hidden tabs
Pearl
Pearl or ink · at least 96% fill
Personal
Personal data
Personal workspace
Peter Steinberger — OpenClaw, OpenAI and the future ↗
Peter Steinberger’s ambition gives us a practical test: can someone understand what the agent will do, make a choice and recover when something changes? Peter’s statement, 14 February 2026 ↗
Peter’s statement, 14 February 2026 ↗
Pigment
Pinned project direction; capability and operator control inform the interface principles.
Pixel budget
Plant
Plant. Lean. Rise.
Platform guidance & app references
Platforms and companion apps ↗
Play an audio file and watch the red shell waves follow its energy. It stays on your device.
Power becomes useful when people can understand it, shape it and make it their own.
Preserve the full 22° opening, rounded ends and transparent channel. Do not fill the gap, add texture to small marks, redraw the teeth or rotate one part independently.
Preview
Preview solid fallback
Primary navigation at the bottom. Comfortable touch targets, safe-area space and scalable text. Use native sheets for focused tasks and keep flight details readable while moving.
Primary source ↗
Proof at the final size.
Proof background
Proof the result at actual size, in both themes and with keyboard and text enlargement.
Protects against accidental duplicate action.
Publish inspectable files, clear rules and examples others can extend.
Put the person in command.
Q
Quiet motion, measured.
Quieter details. A steadier rhythm. A family with the range to speak softly, explain clearly and make a point.
R
Range slider
Read the words people actually see.
Read this in Regular.
Read this in Regular. This is Bold. This is Italic. And this is Bold Italic.
Readable brand text
Reading size
Reading surface
Ready
Ready when
Ready when you are. I can check a project, coordinate an agent, or prepare the next step.
Real audio integration
Real depth, with a defined scope.
Real passes keep scannable codes on an opaque, high-contrast surface. Hide booking references and codes in public screenshots.
Recent sessions
Recognition before effects.
Recognition is not a status.
Recovered in the browser and used to discover sources. Claims were checked against the primary material.
Red on dark
Red on light
Redacted public previews · explicit reveal in real apps
Reduced motion
Reduced motion / paused
Reduced motion removes the spring. Increased contrast and reduced transparency replace glass with an opaque surface. Your appearance choice is remembered on this browser.
Reduced transparency and increased contrast replace glass with a solid surface. Forced colours use system colours. Reduced motion keeps state changes immediate and removes decorative motion.
Reference capital height · H
Refined OpenClaw Text carries reading, interface labels and editorial headings; Display remains an expressive brand accent. Custom type keeps fallbacks and native text scaling where needed.
Refined at reading size.
Regular 400 · line height 1.65 · no extra tracking. Sizes are nominal pixels at a 16px root and respect text enlargement. Both columns use the selected real style, from 0.4 and 0.5. Light at small sizes is a stress proof, not a recommended reading style.
Regular and Medium. Installable fonts, webfonts, editable outlines, build scripts, proofs and SIL OFL licence.
Relief
Replay
Research is useful when it changes a decision. These are the sources, interpretations and limits behind this contributor proposal.
Research snapshot: 7 September 2026. Upstream software and guidance continue to change. These are contributor proposals, not Apple certification, official OpenClaw policy or evidence that the concepts have shipped on every device.
Reservation
Reservation details
Resolve the joins throughout the family.
Responding
Responding preview
Response
Rest
Return
Return to device
Reusable web material styles, solid accessibility fallbacks and an unmasked app-icon layer study.
Review your options
Rise
Role
Room for
Room for everything else.
Room foryour next idea.
Room to work.
Rose
Round overshoot, optical compensation and spacing by appearance rather than numeric equality.
Rounded red lacquer, a soft studio reflection, and a lower claw that moves like a mouth.
S
SVG · WebP · CSS
Sample status · 12 Oct, 08:42 BST
Save preview ticket
Scalable SVG · export raster sizes for the target theme
Search and filter
Search sessions
Seat
Secondary explanation, never the only essential instruction.
Secondary response
Secondary text
Section title
See the role specifications
See your sound.
Select a glyph below. Inspect the actual encoded outline, sidebearings and advance of the selected family, weight and posture.
Select a letter to inspect its original outline. The blue box follows its measured ink; the red line is its baseline. All values use the logo’s 100-unit capital height.
Select a photograph to take a closer look. Downloads are 3840 × 3840 PNGs, upscaled from the original illustrations.
Selected webfont
Selection controls
Separate symbol and background · system applies mask
Server
Session 01 · Claw & the emblem
Sessions
Settings
Settle
Settled shell. No activity implied.
Shadow & highlights
Share the source, a before-and-after example and the reasoning behind the change.
Shared foundations, native manners.
Sheet and dialog
Shell
Shell glass
Shell glass.
Shell relief v2 · Current texture
Shell source image
Single-line advance sums encoded advances and pair kerning after NFC normalization and before wrapping. Ligatures are off in this specimen. It is not the visible ink width. Unsupported scripts use system fallbacks. Pixel values assume the default 16px root. User text enlargement scales the specimen. Raster hinting can adjust outlines at small sizes.
Six articulated shell segments carry the fan to the side of the seat. They follow the body’s turn with a softer delay and settle as Claw returns.
Six moments. One familiar soul.
Size / px
Size · 32 px nominal
Skip to content
Small details. A continuous outline.
Small title
Smoothed amplitude · never a loudness meter by colour alone
Softer highlights, fewer opaque layers and one continuous shell field across navigation.
Sound human. Say exactly what is happening.
Sound, translated into shell.
Sources & scope
Sources &amp; scope
Stable Pearl surface · no shell behind text
Stand
Standard components
Start a conversation
Start at 32 px for the standalone icon and 180 px for the signature. Test the actual reproduction; embroidery, low-quality printing and small screens may need more space. These are proposal starting points, not universal minimums.
Start with a real use case: an icon, a documentation page or one agent decision.
Start with controls people understand. Combine them into useful moments: a flight to catch, a room to find, a ticket to keep.
State transition
Static claw · full state label
Status
Still and subdued, with an explicit microphone-off label.
Still scene · individual moments remain selectable
Strength that welcomes
Strength that welcomes.
Stroke*
Stronger contrast when needed. Solid surfaces for reduced transparency.
Studio sessions.
Style
Subtitle
Supporting context beneath a title.
T
T-shirt Hoodie Character-inspired OpenClaw
Tabs and segmented choice
Take the texture with you.
Talk with Claw
Ten editable styles with preserved outlines, advances and native kerning. Open the UFO or Fontra files to continue refining the family.
Ten original faces: Light through Bold, each with an italic companion. Encoded glyph metrics, optical refinements, proofs and reproducible source.
Terminal
Test the pair, not the swatch.
Text
Text and its actual background.
Text field
Texture
Texture around.
Textured
Textured appearance
Textured glass · by default
Textured. The shell becomes the atmosphere.
Textures.
The Elements of Typographic Style
The S-shaped channel follows the pincers. Its central measured normal separation is 7% of icon width. Three upper teeth and two lower teeth establish a deliberate rhythm.
The anatomy of a useful card.
The approved illustrations remain the visual reference for the sculpt: generous blue eyes, a gentle expression, rounded claws and deep living-shell colour.
The channel stays open.
The claw belongs on the home screen.
The claw’s opening informs a distinct visual presence. Readable labels, transcript and familiar audio controls carry the function.
The current texture, relief, styling and source notes in one package.
The depth of a living shell. The openness of water. A material language that carries the character into the interface.
The evolution
The face we keep coming back to.
The feet establish support before the pelvis rises. The torso leads the transfer; the larger claw follows with a little more weight.
The final refinement
The finished surface
The icon is deliberately larger than the letters. Its centre sits against the capital-height centre, balancing the upper mass and lower pincer. The gap is fixed; the wordmark is outlined artwork. Use the supplied files and scale the whole signature together.
The identity is red, black and white. Blue and pink belong to the broader experience, carrying the depth and warmth of the character.
The initial Apple HIG review inventoried 172 reachable topics: 50 narrative reviews, 8 selected-section reviews, 99 recommendation-level reviews and 15 navigation reviews. Every topic was examined at its recorded level. This does not mean every supporting paragraph, image, video and linked specification was read.
The live examples demonstrate interface behavior only. They do not connect to an OpenClaw Gateway, record audio or perform external actions. This first release needs broader language, assistive-technology, native-device and family testing before production adoption.
The missing corner was in the drawing.
The open claw becomes the voice signature. Shell texture gives it depth; a clear label says what it is doing.
The opening is the identity.
The original shell supplies irregular rounded plates, tiny pores and pools of ocean blue and ember red. Textured brings its broad colour and relief behind the interface. Navigation catches a brighter rim; the reading layer diffuses the fine detail.
The previous e contained a small step where its bowl met its crossbar. The repaired edge is continuous, while the open aperture and the space inside the letter remain intact. Accented e, æ and œ inherit the same correction.
The relationship is the logo.
The review also found protruding diagonal joins in M, N, Z and several numerals. Local contour repairs align their edges with the intended stems and bars. G, @ and ¶ receive the same close attention to the flow of their outlines.
The review records its exact glyph, pair and page-copy coverage. Optical judgments are checked at reading size as well as enlarged. Rendering still varies by platform; no universal readability or every-language qualification is claimed.
The role specifications.
The room renderer loads only here. The rest of the design system stays independent of the 3D scene. Physical phone testing and further sculpt review remain part of developing a production character.
The same proposal tokens ready to use in a web interface. Includes all three appearances and motion/transparency fallbacks.
The same silhouette survives light, dark, clear and tinted appearances. Shell belongs in a restrained background layer. Keep the claw flat enough to remain recognisable at a glance.
The same silhouette. More expression.
The same words, size, line height and column width. Compare the rhythm of the letters themselves. Compare every weight and italic on either background.
The second review refreshed 55 Apple pages: 13 narrative reviews, 2 selected-section reviews, 31 recommendation scans and 9 navigation inventories. It also checked 11 additional primary sources and inventoried 64 component topics. These counts describe different depths of review, not 55 complete specifications.
The shell sets the light. The surface keeps its clarity.
The shell surface, glass and spring recipe, site styles and integration notes. Original fonts and icons remain untextured.
The silhouette stays exact. Light travels over the shell, while a soft contour opens into the space around it. It feels like the same companion at a desktop, on a phone or in a compact voice overlay.
The source package includes UFO and Fontra files, the review strings and a build guide. The fixed logo remains its own approved drawing.
The typography study used the accessible primary articles, Apple’s first TrueType chapter and legally available publisher or author material.
The typography study used the accessible primary articles, Apple’s first TrueType chapter and legally available publisher or author material. How to Create Typefaces: From Sketch to Screen by Henestrosa, Meseguer and Scaglione and Bringhurst’s The Elements of Typographic Style remain important further reading. We did not obtain or claim to read both complete books.
The visual never substitutes for a transcript, microphone indicator or stop control. In an application, connect state to actual audio events. Never animate “listening” while input is muted.
The voice belongs to the brand.
The “f” hook is more restrained, and the “Ł” slash has less overhang. Small, style-specific spacing corrections separate crowded accents and exceptional pairs while preserving ordinary word spacing.
The “t” now has a shorter ascender, a lighter crossbar and a shallower foot. Repeated letters in “little,” “attention” and “settings” keep a calmer rhythm across all ten styles.
These CSS values are web proposal tokens, not physical material measurements or substitutes for native platform APIs.
These are the measured gaps in the approved eight-letter wordmark, not a tracking setting. Round capitals overshoot by 2 u; lowercase rounds by 1.2 u. Straight and curved forms look aligned because their outlines are optically adjusted.
These are web appearance studies. Final Apple assets need Icon Composer and device validation; the browser’s rounded square is only a preview mask.
These contracts extend the live gallery. They define what a contributor should implement and test, rather than claim every state is already wired to a service.
This is Bold.
This is Italic.
This is a Blender-authored 3D interpretation of Claw. The movement uses directed keyframes and leg constraints; it is a character animation study, not a complete simulation of animal biomechanics.
This is a design preview. In OpenClaw, your connected agent responds here.
This is an independent, unofficial proposal prepared for OpenClaw community review. It has not been adopted or endorsed by OpenClaw, its Foundation or Peter Steinberger.
This remains an original contributor type release. It is automatically hinted and provides precomposed Latin characters; it is not a globally qualified language family. It has no variable or optical-size axes and no combining-mark positioning. Unsupported scripts use system fallbacks. The supplied SVG remains the exact logo.
This separation adapts Apple’s distinction between functional glass and content materials. Apple HIG · Materials ↗
This site’s authored source, documentation and licensing. The font package contains its independent build source.
Thoughtful details.
Three GPT-6 Astra workstreams covered OpenClaw’s purpose and distribution, interface guidance, and original type design. Image generation assisted the character poses, eye edits and shell study. A small authored planar mesh brings the character to life. The site uses real components, exact vector logo masters and actual font files.
Three GPT-6 Astra workstreams covered OpenClaw’s purpose and distribution, interface guidance, and original type design. Image generation assisted the character poses, eye edits and shell study. The Character page presents the approved still portraits. The site uses real components, exact vector logo masters and actual font files.
Three alpha poses, a planar skinned GLB, a lightweight WebGL renderer, source and preparation notes.
Three expressions. One identity.
Ticket
Time needs context.
Time picker
Titles adapt on narrow screens. Line height is a multiplier; tracking is relative to the selected font size. Light 300 is an available expressive style for large text, not the default reading weight.
Titles, subtitles and emphasis keep their relationships as text grows. Avoid Light for small interface text and long paragraphs in capitals or italics.
Top optical overshoot
Touch target starting point
Tracking
Travel & tickets
Trip
Trip check-in
Try Textured appearance
Try an audio file
Turn
Two-page identity specification
Type, perception and optical judgment
Typeface
Typography & icons
Typography research
U
Uneven plates. Rounded edges. Fine seams that follow a larger form.
Units are relative construction units, independent of output pixels or millimetres. At a capital height of 20 px, the icon is 33 px high, gap 7.6 px and clear space 10 px.
Untextured, undistorted and optically aligned
Updated a moment ago.
Updated interface sources
Use Flight details, View reservation or Save ticket. Avoid an unlabeled arrow as the only route to important information.
Use issuer-supported pass and Wallet flows. Public examples keep credentials hidden and clearly identify non-scannable artwork.
Use native buttons, menus, sheets, pickers and navigation on Apple platforms. These web studies use accessible Base UI primitives with an OpenClaw visual layer. Domain cards compose those familiar building blocks.
Use one glass layer over a scene. Avoid nesting blur. Keep texture away from small text, status colours and touch targets. At small scales, preserve colour and silhouette before relief.
Use only after a confirmed send result.
Use only while capture is actually active; pair with visible mute and end controls.
Use rounded structure, grounded posture and restrained movement. Let shell and silhouette carry strength while the face stays open and kind.
Use the shortest clear explanation that helps the person decide or act. Let personality welcome; let facts explain.
Use the supplied master artwork and semantic tokens. Keep the approved wordmark as an SVG.
Use the texture
Used to distinguish documented surfaces, experimental paths and our future concepts.
V
Value names:
Value names: OpenClaw Foundation. Descriptions are paraphrases; design responses are this proposal’s interpretation.
Vercel Geist — Introduction ↗
Visible focus · logical order · Escape closes dialogs
Visit OpenClaw ↗
Visual concepts for the collection. Fabrics, print, embroidery and plush construction are design directions to refine through physical samples.
Voice
W
W3C contrast guidance ↗
WCAG 2.2 — Understanding Contrast ↗
WCAG 2.x sRGB relative luminance calculation. AA normal text needs 4.5:1; large text and relevant UI boundaries need 3:1. Contrast alone does not establish accessibility. W3C contrast guidance ↗
Wallet ↗
Warm light, a familiar chair and a moment to think. Claw rests, finds his feet and looks toward what comes next.
Watch
Watch face
Weight
Welcome through strength.
What changed because we studied.
What would you like a hand with?
White
White at 84%
Within reach.
Word by word. Space by space.
Words + icon · never colour alone
Working examples expose edits, selections, detail, feedback and recovery. Domain cards compose the controls around real information.
Workspace
World time
X
Y
You stay in control.
You stay in control. And when a thought needs a little warmth, there is room for that, too.
Your agents, in one place.
Your connection was interrupted. Reconnect to continue.
Your gateway at a glance.
Your next journey
Your personal AI assistant.
Your words
Z
a
appRef.current ?.querySelector
b
b - a); const ratio = (l[0] + 0.05) / (l[1] + 0.05); return (
c
d
e
e é æ œ
e é æ œ · G M N Z z · ĵminimum · office · Il1 · £128.50
f
fT fB fU qf ĩĩ ĵî ľĩ DŁ GŁ
face.label === proofStyle) ?? textFaces[1]; return (
g
h
i
iOS
iOS ↗
iPhone
j
k
l
little attention settings thoughtful trustworthy
little trust
little · attention · settings · trustworthy
m
macOS
macOS ↗
minimum · office · fî · ĩĩ · Il1 · £128.50
n
o
office affinity difficult fifth fifty often
p
p.id === section)?.label ?? 'Design'; return (
q
r
remain important further reading. We did not obtain or claim to read both complete books.
s
t
there is room for that, too.
u
u wide
v
w
x
y
you are.
your next idea.
z
¡Hola! Ça va? Fröhlich. ação. Café, naïve, façade, mañana, Łódź.
—
“Fluid software” is our design philosophy: capability adapts to the surface while identity and authority remain understandable. It is not an attributed founder quotation or a promise of automatic cross-device continuity.
“Not assigned” is a useful gate value. Show when a status was last checked; never let stale data look live.
“an agent that even my mum can use”
−0.005em
−0.015em
−0.02em
