#111A20 / #EDF3F5
#55636B
#B0C0CA
#B42334 on white
#BF0615 on light surfaces
#F8FAFA / #152127
*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.
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.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
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
500
557 u
571.094
600
66
67
68
69.2
70.4
88.394
92.7
926.295 u
@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 clearer voice. In every weight.
A companion for reading.
A component does something.
A familiar presence. A new voice.
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 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 room for inspiration.
A little room to think.
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 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.Built around an open claw, a welcoming character and the person in control.
A signal. A living world.
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 ↗
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.
Adopt in focused parts.
Advance
Advance at selected size
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
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 inspectable scene. A considerate runtime.
An open contribution, clearly labelled.
An open gesture from the smaller pincer.
An open invitation.
Animated room · web GLB
Animation suspended
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
Ask upstream maintainers to review the part they can use. Their adoption decision remains theirs.
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.
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
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
Choreography
Clarity before spectacle
Clarity is the fallback.
Claw red
Claw’s Blender room
Clear space, each side
Colour needs a role.
Colour saturation
Comfortable reading, typically 55–70 characters per line.
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.
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.
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 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 tokens
Design tokens · JSON
Diffusion · 24 px
Display time in
Download
Download SVG with clear space
Draft ready to review.
E
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 matters.
Everyday controls
Everyday information
Exact foreground claw · preserve its opening
Exact wordmark measurements · JSON
Eyebrow
F
Fallback
Familiar to use. Ours in detail.
Feedback and recovery
Final optical review
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.
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.
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
Gap after
Gap to next letter
Gate
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
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
I
Icon button
Icon height
Icon ↔ wordmark gap
Identity
Identity artwork
Image gallery
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.
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 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 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
M
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.
Material CSS
Materials ↗
Menu and context menu
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.
Neutral
Next origin / end span
Night at the Oceanarium
Nominal descender guide
Nominal stroke
Not assigned
Notes
Notice, without a startle.
O
Ocean
Offer a precise next step
On-curve / off-curve points
One clear introduction to a page.
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 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, Neutral and Personal informed the proposed principles. Foundation statements and our design responses are kept distinct.
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, in its own words
Orient
Origin in wordmark
Origin x
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. 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 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.
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
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.
Platforms and companion apps ↗
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 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.
R
Range slider
Read this in Regular. This is Bold. This is Italic. And this is Bold Italic.
Readable brand text
Reading size
Reading surface
Ready
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.
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.
Reservation
Reservation details
Resolve the joins throughout the family.
Responding
Responding preview
Response
Rest
Return
Reusable web material styles, solid accessibility fallbacks and an unmasked app-icon layer study.
Review your options
Rise
Role
Room foryour next idea.
Room to work.
Rose
Round overshoot, optical compensation and spacing by appearance rather than numeric equality.
S
Sample status · 12 Oct, 08:42 BST
Save preview ticket
Scalable SVG · export raster sizes for the target theme
Search and filter
Seat
Secondary explanation, never the only essential instruction.
Secondary response
Secondary text
Section title
See the role specifications
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.
Selected webfont
Selection controls
Separate symbol and background · system applies mask
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 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.
Size / px
Size · 32 px nominal
Small details. A continuous outline.
Small title
Smoothed amplitude · never a loudness meter by colour alone
Sound human. Say exactly what is happening.
Sources & scope
Stable Pearl surface · no shell behind text
Stand
Standard components
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*
Style
Subtitle
Supporting context beneath a title.
T
Tabs and segmented choice
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 field
Texture
Textured
Textured appearance
Textured. The shell becomes the atmosphere.
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 depth of a living shell. The openness of water. A material language that carries the character into the interface.
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 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 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 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 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. 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.
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 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 an independent, unofficial proposal prepared for OpenClaw community review. It has not been adopted or endorsed by OpenClaw, its Foundation or Peter Steinberger.
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.
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 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
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.
Used to distinguish documented surfaces, experimental paths and our future concepts.
V
Value names: OpenClaw Foundation. Descriptions are paraphrases; design responses are this proposal’s interpretation.
Vercel Geist — Introduction ↗
Visible focus · logical order · Escape closes dialogs
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.
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.
World time
X
Y
You stay in control. And when a thought needs a little warmth, there is room for that, too.
Your connection was interrupted. Reconnect to continue.
Your next journey
Your words
Z
a
b
c
d
e
e é æ œ
e é æ œ · G M N Z z · ĵminimum · office · Il1 · £128.50
f
g
h
i
iOS
iOS ↗
j
k
l
m
macOS
macOS ↗
n
o
p
q
r
s
t
u
v
w
x
y
z
—
“Not assigned” is a useful gate value. Show when a status was last checked; never let stale data look live.
−0.005em
−0.015em
−0.02em
