Brand resources
Webiost Brand System
Canonical visual policy for designers, developers, and AI agents. Cyan is identity; neutrals carry hierarchy while cyan handles primary actions and interactive focus. Outcomes depend on context, consistency, copy, and testing—not on hue myths.
Version 2.0 · Anchor #00D9FF
Brand idea
Webiost is domain-first digital identity: clear, premium, and restrained. Cyan creates recognition and hierarchy. Teal is a controlled technical accent. Signal color activates purchase and search—never decorate every control with it.
Logos
Use the official lowercase webiost wordmark only. Provide clear space equal to the cap height of the mark. Do not stretch, recolor arbitrarily, add icons, or place on busy photography without a solid panel.
Palette
Brand cyan
#00D9FF
Brand hover
#37E6FF
Deep text
#F6FBFF
CTA light
#00D9FF
CTA cyan
#00D9FF
Teal accent
#37E6FF
Semantic tokens
Light and dark maps are explicit—never inverted. Prefer semantic utilities such as bg-canvas, text-content-brand, and bg-cta.
Light mode
| Token | Value | Copy |
|---|---|---|
| --np-canvas | #050B18 | |
| --np-surface | #071426 | |
| --np-surface-subtle | #0A1A31 | |
| --np-surface-raised | #0B1B33 | |
| --np-surface-brand | rgba(0, 217, 255, 0.12) | |
| --np-content-primary | #F6FBFF | |
| --np-content-secondary | #D7E6F3 | |
| --np-content-muted | #9FB3C8 | |
| --np-content-subtle | #7F95AD | |
| --np-content-brand | #00D9FF | |
| --np-content-link | #37E6FF | |
| --np-border-default | rgba(148, 210, 230, 0.18) | |
| --np-border-strong | rgba(0, 217, 255, 0.34) | |
| --np-border-focus | #37E6FF | |
| --np-cta | #00D9FF | |
| --np-cta-hover | #37E6FF | |
| --np-cta-active | #00B8D9 | |
| --np-cta-text | #050B18 | |
| --np-cta-on-brand | #00D9FF | |
| --np-cta-on-brand-hover | #37E6FF | |
| --np-cta-on-brand-active | #00B8D9 | |
| --np-cta-on-brand-text | #050B18 | |
| --np-accent | #37E6FF | |
| --np-status-success | #067647 | |
| --np-status-error | #B42318 | |
| --np-status-warning | #B54708 | |
| --np-status-info | #175CD3 |
Dark mode
| Token | Value | Copy |
|---|---|---|
| --np-canvas | #050B18 | |
| --np-surface | #071426 | |
| --np-surface-subtle | #0A1A31 | |
| --np-surface-raised | #0B1B33 | |
| --np-surface-brand | rgba(0, 217, 255, 0.12) | |
| --np-content-primary | #F6FBFF | |
| --np-content-secondary | #D7E6F3 | |
| --np-content-muted | #9FB3C8 | |
| --np-content-subtle | #7F95AD | |
| --np-content-brand | #00D9FF | |
| --np-content-link | #37E6FF | |
| --np-border-default | rgba(148, 210, 230, 0.18) | |
| --np-border-strong | rgba(0, 217, 255, 0.34) | |
| --np-border-focus | #37E6FF | |
| --np-cta | #00D9FF | |
| --np-cta-hover | #37E6FF | |
| --np-cta-active | #00B8D9 | |
| --np-cta-text | #050B18 | |
| --np-cta-on-brand | #00D9FF | |
| --np-cta-on-brand-hover | #37E6FF | |
| --np-cta-on-brand-active | #00B8D9 | |
| --np-cta-on-brand-text | #050B18 | |
| --np-accent | #37E6FF | |
| --np-status-success | #6CE9A6 | |
| --np-status-error | #FFB4AB | |
| --np-status-warning | #FEC84B | |
| --np-status-info | #84CAFF |
Live components
Examples inherit the active theme. Toggle light/dark from the site theme control.
Buttons
Input & badges
On navy panels
Use cyan signal CTA with deep navy text.
CTA matrix
- Light/neutral:
#00D9FF+ deep navy text (#050B18). - Navy/gradient/dark:
#00D9FF+#050B18text. - Use cyan for primary actions; keep secondary actions outline/neutral.
- One signal CTA per visual cluster; secondary actions stay outline/neutral.
- Cyan for brand and conversion actions across the navy system.
Typography
Manrope
Display / headings · weight 750–800
Inter for body and UI. Default 16px, ~1.6 line-height, 65–72ch reading measure.
example.com · DNS / code uses monospace
Spacing & shape
- 4px base / 8px primary spacing rhythm
- Card radius 16px; featured 20–24px; buttons/inputs 12px
- Main container ~1200px with responsive gutters
Accessibility
- WCAG 2.2 AA: 4.5:1 normal text, 3:1 large text and UI/focus
- Important targets ≥ 44×44px; visible focus-visible rings
- Status always includes text and/or icon — never color alone
- Honor prefers-reduced-motion; support keyboard and zoom/reflow
Do / Don’t
Do
- Map colors to semantic roles
- One signal CTA per cluster
- Use Manrope + Inter consistently
Don’t
- Do not preserve legacy emerald/lime as Webiost identity
- Scatter raw hex through components
- Overload heroes with neon, glass, or generic AI clutter
AI-agent contract
- Treat this page and the Brand System v2.0 policy as authoritative.
- Prefer semantic tokens over raw hex.
- Do not invent Webiost production secrets or operational host details.
- Cyan = brand and conversion action across the navy system.
Version
Webiost Brand System v2.0 · Cyan anchor #00D9FF