Kobbe: Web analytics that respect your visitors
kobbe.io“Kobbe projects a calm, trustworthy, and utilitarian vibe, prioritizing clarity and privacy over flashy marketing. The aesthetic is grounded in a muted, earthy palette with a focus on readability and functional simplicity, appealing to users who value data integrity and understated design.”
Color Palette
Colors
Typography
Fonts
InterVariable
Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif
LTRemark
Georgia, serif
InterVariable
Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif
The quick brown fox
16pxThe quick brown fox
36pxThe quick brown fox
16pxThe quick brown fox
16pxComponents
Design System
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 12, 12, 0.1) 0px 8px 28px 0px, rgba(15, 12, 12, 0.12) 0px 12px 18px -6px, rgba(15, 12, 12, 0.1) 0px 0px 2px 0px, rgba(15, 12, 12, 0.1) 0px 1px 3px 0px
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 12, 12, 0.12) 0px 12px 36px 0px, rgba(15, 12, 12, 0.14) 0px 18px 24px -8px, rgba(15, 12, 12, 0.1) 0px 0px 2px 0px, rgba(15, 12, 12, 0.1) 0px 2px 4px 0px
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 12, 12, 0.06) 0px 3px 14px 0px, rgba(15, 12, 12, 0.08) 0px 6px 8px -4px, rgba(15, 12, 12, 0.09) 0px 0px 2px 0px, rgba(15, 12, 12, 0.09) 0px 1px 2px 0px
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklch(1 0 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px
Voice & Tone
Personality
Visual Energy
Design Era
contemporary-minimal
Emotional Tone
reassuring-professional
Target Audience
Privacy-conscious developers, product managers, and small-to-medium business owners who prefer straightforward, non-intrusive tools.
Comparable Brands
Brand Rules
Dos & Don'ts
Do
- Use InterVariable (weights 400, 500, 600) for all body text and secondary headings, maintaining a strict 24px line-height for optimal readability.
- Use LTRemark (weight 400) for primary H1 headings in sentence-case, ensuring a distinct typographic hierarchy that feels editorial yet modern.
- Apply the primary brand color #0b313e (dark teal) for key text elements, links, and primary interactive states to establish authority and trust.
- Set the global background to #eee7e3 (warm off-white) to create a soft, paper-like canvas that reduces eye strain compared to pure white.
- Style primary CTA buttons as outlines using #0b313e, with 8px border-radius, 0px vertical padding, and 16px horizontal padding for a clean, low-friction look.
- Style secondary/tertiary actions as ghost buttons with 4px border-radius, 6px vertical padding, and 8px horizontal padding, using subtle text colors.
- Maintain a strictly flat design aesthetic: use 0px shadows and 0 gradients on all elements, relying on color contrast and spacing for visual separation.
- Use a base spacing unit of 2px for all margins and paddings to ensure precise, grid-aligned layouts without visual clutter.
- Keep all heading text in sentence-case (capitalizing only the first word and proper nouns) to maintain a conversational yet professional tone.
- Avoid emoji and excessive punctuation in copy; use frequent but measured exclamations only where enthusiasm is strictly necessary for clarity.
Don't
- Do not use title case for headings; the brand strictly adheres to sentence-case conventions.
- Do not apply any drop shadows, box-shadows, or multi-layer depth effects to cards, buttons, or elements; the design is entirely flat.
- Do not use gradients of any kind for backgrounds, buttons, or text; maintain solid, flat color fills.
- Do not use serif fonts for body text or UI elements; reserve LTRemark exclusively for primary headings.
- Do not use bright, saturated primary colors like pure blue or red; stick to the muted #0b313e and warm #eee7e3 palette.
- Do not use pill-shaped (fully rounded) buttons; maintain the specified 4px and 8px border-radii for a slightly structured, editorial feel.
- Do not use emoji in marketing copy or UI labels; the brand relies on clear, jargon-moderate language instead.
- Do not use exclamation points excessively in technical documentation or feature descriptions; reserve them for high-impact value propositions.
Design Assets
Visual Elements
How to use this file
1. Save this file as DESIGN.md in your project root (sibling to README.md).
2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.
3. Validate or export tokens with the official CLI:
npx @google/design.md lint DESIGN.md npx @google/design.md export --format tailwind DESIGN.md
Developer Access
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/kobbe.io \
-H "x-api-key: ev_your_key"
# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
-H "x-api-key: ev_your_key"
# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
-H "x-api-key: ev_your_key"Extract your own brand kit
Get colors, fonts, voice, and personality from any website in seconds. Open source.