— Obney.ai · Design system · v1.0.0
Engineering clarity,
human warmth.
The visual and voice operating system for Obney.ai. Every color, type style,
space, and component is rendered live from the canonical tokens in
colors_and_type.css — one source of truth that people and coding
agents both read to build on-brand.
— Foundations / Brand
The marks, the voice, the rules.
Obney builds greenfield software for the AI era — deliberate architecture up front so systems absorb new tooling without a rebuild. The brand carries two ideas at once: engineering clarity and human warmth.
Logo
Primary · midnight + ocean
Reversed · on midnight
Single-color · on white
Tertiary accent marks · one at a time
Accents signal a category or pick out a tertiary mark — never stacked together on one surface.
Company values
— Values
Our best, at our expense
If there's a tradeoff, we pick quality. We absorb the cost or effort rather than lower the standard.
Our word is a contract
We say what we mean, and communicate change early — never letting partners be surprised later.
Partners, not projects
We decide with our partners' long-term interests in mind, even when it's harder for us short term.
Outcomes, not tasks
If it's ours, we see it through. We're responsible for results, not just for doing the work.
How, not if
We assume problems are solvable. The question isn't whether — it's how to keep moving.
Voice & tone · three rules of thumb
Approachable expert
Expert guidance with warmth and clarity. The reader leaves thinking I can do this too.
Tasteful & refined
Mirror the quality of the work. No emoji, no overly casual phrasing — personality lives in the ideas.
Uplifting, not critical
Lead with possibility. Talk about what can be achieved, not what is lacking.
Do & don't
Do
- Pair midnight + ocean as the spine
- Ground in cream / off-white, cards in white
- Pill buttons, crisp 1px borders
- A mono eyebrow over each heading
- Sentence-case copy, first-person plural
- One accent at a time
Don't
- Bluish-purple gradients
- Emoji — anywhere, even in CTAs
- Stacked accents on one surface
- Colored-left-border cards
- Cal Sans below 48px or in body
- Inter / Roboto fallbacks or superlatives
— Foundations / Color
Midnight + Ocean, and the neutral that holds them.
Almost every composition rests on the primary pairing. The midnight scale is the only neutral system — there is no separate gray. Every swatch is click-to-copy.
Primary pairing
Midnight scale · the only neutral
Ocean scale
Accents · one at a time
Semantic tokens · what to reach for in code
Preferred pairings · all AA contrast
Avoid: accent on accent (too close in value), midnight on midnight-700.
— Foundations / Typography
Three families, one strict hierarchy.
Figtree carries headings, body, and UI. IBM Plex Mono handles eyebrows, labels, and numbers. Cal Sans is display-only — hero moments at 48px and up, never body.
Families
Headings, body, UI. Light / ExtraBold / Black are marketing-only.
Eyebrows, labels, numbers, code. Uppercased and tracked 0.08em as a label.
Display only — hero headlines, ≥48px. Never body, never small.
Type scale
— Foundations / Spacing
A 4px base grid.
Generous whitespace is part of the brand. Marketing sections breathe at 96px; product surfaces at 48–64px.
— Foundations / Radius
Pills for actions, soft rectangles for surfaces.
Pill (999px) for buttons and labels is non-negotiable. Cards take md / lg; inputs take sm; inline code takes xs.
— Foundations / Elevation
Borders first. Shadows, barely.
Borders carry more weight than shadows. Elevation is midnight-tinted at low alpha — prefer a sharp 1px edge over a soft halo.
— Foundations / Motion
Quiet. For confirmation, not decoration.
No bounce, no spring, no long fades. Hover and focus settle in 120–200ms on
standard easing. Motion respects prefers-reduced-motion.
standard · cubic-bezier(.2,.7,.1,1) · emphasized · cubic-bezier(.16,1,.3,1)
— Components
Four primitives cover most of the system.
Button, Label, Card, and Input — plus the eyebrow. Here they're rendered live from the same canonical tokens.
Buttons
Pill radius. 1.5px stroke on outlined. Hover shifts one step on the midnight / ocean scale.
Labels & status
Mono caps · 11px · 0.08em tracking · pill radius. One accent each, optional status dot.
Cards
Foundation rebuild for a 12-yr-old codebase
Migrated a fragile monolith to AI-ready modules in eleven weeks.
Build it once. Build it to last.
Deliberate architecture up front, so the system can absorb whatever tooling comes next.
The Obney method
Internal frameworks codify how we make every greenfield decision.
Default white · inverse midnight (the signature dark card) · accent ocean-100. 1px border, md/lg radius.
Form inputs
— Components / Iconography
Lucide, as a stand-in.
No icon set shipped with the brand. Lucide's 1.75-stroke outlined style matches the restrained feel and pairs cleanly with mono labels — flagged for replacement.
24px on a 24px grid · stroke 1.75 · always paired with a label, never emoji.