Design system
Styleguide
Every primitive + variant in the design system. Use this page as a visual reference during development and as the Chromatic visual-regression baseline target.
Color tokens
Brand (navy)
Accent (CTA)
Neutrals
Semantic
Typography
Agentic No-Code OSS
Launch services faster
Use case heading
Section headline
Sub-section
Card title
Lead paragraph with a longer line length that exercises wrapping and the line-height token pairing.
Default body text. Symphonica is the leader in Agentic No-Code OSS for telcos.
Secondary body, small.
Caption + metadata line.
Eyebrow text
Cards
Elevated card
Soft shadow on surface-1. Default for content cards.
Bordered card
Subtle border on surface-1. Default for compact UIs.
Subtle card
Flat tint on surface-2. Good for feature grids.
Inverted card
Dark navy surface. Pairs with inverted sections.
Hover lifts
Wrap with href → link-card with motion + shadow bump.
Badges
Links
Body copy with a default link inside. A subtle link reads quieter. And an external link opens safely.
Same content on dark surface — inverted link .
Icons
Custom icon set is placeholder until commissioned — each slot renders a square.
Containers
Section surfaces
surface: default
Surface-1 background
surface: muted
Surface-2 background
surface: inverted
Dark navy background
surface: brand
Brand gradient — hero-weight
Prose (Portable Text target)
Second-level heading
Prose wraps long-form content and styles every nested tag against the design tokens. Symphonica is the anchor entity; canonical mentions get rendered as plain text first, then linked to a glossary term on later reference.
A paragraph with a link, an em, a code span, and a quote below.
"Symphonica cut Tigo's mobile order fallout rate to under 0.3% within 90 days."
List example
- Bulleted item one
- Bulleted item two, with a longer line that forces wrap
- Bulleted item three
Code block
// example.ts
export async function fetchLead(id: string) {
return await fetch('/api/salesforce/lead?id=' + id);
}Last reviewed: 2026-04-23