Ballpoint blue
#244AA5Interaction, hover, selected choices, assessment links, navigation cues and active states.
oobCREATIVE brand & interface reference
Live type. Drawn interaction. Clear intent.
The interface should feel human-made without making the page harder to read or use. Words stay live in the browser. Drawing adds character around the words.
Typography
The interface stays readable because the words stay live.
The current site uses the browser-safe Arial, Helvetica, sans-serif stack. The personality comes from scale, spacing, linework, illustration and interaction—not generated lettering.
Go deeper.
Make the next step clear.
This paragraph, the headings above it and every CTA on this page are selectable, accessible browser text. Generated imagery does not carry interface copy.
- ✓Use the site font stack for every label, button, heading, caption and navigation item.
- ✓Keep doodles, scribbles and hand-drawn outlines separate from the words they support.
- ✓Use CSS interaction to create the scribble-on state instead of rendering a button as an image.
- ✓Keep decorative hand-drawn underlines off live text. Emphasis should come from hierarchy, color or the surrounding mark.
Color roles
Three accent colors have three different jobs.
The palette works when color communicates behavior instead of decorating every surface.
Vermilion
#E4572EHuman emphasis, recognition, important notes and restrained secondary signals. Not the default button color.
Warm yellow
#F2C94CCallback, opportunity and strong next actions. Use black text for readable contrast.
Ink#111111
Paper#FFFFFF
Soft paper#F7F7F5
Kinetic drawing system
The robot supports the idea; it does not become the interface.
Use the canonical oobCREATIVE AI character as the recurring AI depiction. Keep black linework, reduced detail, generous white space and purposeful poses. The robot can point, think, explain, review or move through a process while the page copy remains live HTML.
Thinking · evaluation and uncertainty
Pointing · guidance and next steps
Walking · measured progress
Running · momentum and implementation
Drawing boundary: generated or illustrated imagery may contain the robot, objects, arrows, marks and visual metaphors. It should not contain the headline, button copy, navigation labels or explanatory text the browser can render itself.
CTA system
The CTA changes shape with the decision, not the brand.
These are working HTML/CSS patterns. The rough outline remains visible in the page. Ballpoint blue scribbles onto ordinary controls on hover or focus. Yellow identifies callback and strong-action moments.
01 · Simple button
Ready to move forward?
Use one clear action when the visitor already understands the next step.
02 · Button + supporting text
Start with enough context to make the click useful.
The supporting line explains what happens without turning the button itself into a sentence.
03 · Split actions
Give two valid paths when the visitor may need different amounts of context.
04 · Icon + label links
Use a list when each action needs one line of explanation.
05 · Card style
Start the right conversation.
Useful when a CTA needs enough context to stand on its own as a small decision surface.
06 · Two-column CTA
Pair a concise promise with a directional visual.
Keep the illustration supportive. The actual action remains a real link.
07 · CTA with benefits
A better next step should reduce uncertainty.
- See the likely starting point.
- Understand the boundary.
- Choose the amount of help.
08 · Trust note + CTA
Get something useful before you commit to implementation.
Free diagnostics should stand on their own even if the visitor never becomes a lead.
09 · Full-width strip
10 · Centered panel
One focused next step.
Useful at the end of a section where the visitor has enough context to decide.
11 · Minimal inline CTA
Have a project in mind?
When the context is already complete, the smallest useful CTA can be a text link.
12 · Callback / strong action
Use yellow when the action should interrupt the page.
Warm yellow is reserved for a callback, opportunity or similarly strong next step—not ordinary navigation.
Crawl · Walk · Run
The stage shows how much support someone wants.
Use this as a pacing choice: understand first, make steady progress, or move into implementation. It is one relationship model expressed at three levels.
Assessment lockup
The robot can introduce an assessment without becoming the button.
The character establishes the moment. The outline, label and arrow remain real interface elements.
Take the oob AssessmentChoose the review that matches the decision in front of you.
Working page index
Voice-agent industry landing pages.
Use these links to review the shared page system and the industry-specific language, responsibilities and human boundaries.
Logo assets
Logo artwork stays intact.
Use the supplied production assets. Preserve aspect ratio and use the version intended for the background. Do not redraw, recolor, stretch or rebuild the mark from text.
Implementation rule
A drawn interface still has to behave like a real interface.
Hand-drawn character is a presentation layer. The underlying page keeps semantic HTML, keyboard focus, readable contrast, responsive layout and reduced-motion support.
Keep the outline in code.
The irregular border is part of the component style, not a screenshot. It should survive copy changes, responsive layouts and new CTA destinations.
Let the scribble respond.
The blue pen fill appears on hover, focus or selected state. Motion is restrained and removed when the visitor prefers reduced motion.
Keep color meaningful.
Blue communicates interaction, vermilion carries restrained human emphasis and yellow identifies the strongest action moments.
Leave room around the mark.
White space is part of the style. The doodle layer should clarify the focal idea rather than fill every open area.