Skip to main content

​
Cernio Design Foundations

Created: 2026-03-25 Purpose: Reference document for Stitch / design tool. All page designs are based on this foundation. Rule: The “engineer mindset” design rules in the Handbook are INVALID. This document is authoritative.

​
1. Brand Summary

FieldValue
ProductCernio — AI-powered B2B Buyer Intelligence Platform
CompanyGaduLabs
Tagline”See What Others Can’t”
MetaphorCat’s night vision — AI that finds the right buyer in the dark
Voice & ToneConfident, Clear, Direct, Professional, Expert
PersonalityWarm-trustworthy + modern. Not playful, not corporate-stiff.
CompetitorApollo.io (cold blue/purple) — we differentiate with warm teal/orange
ReferenceNotion (warmth, generous whitespace) + Stripe (professional data presentation, dark sidebar)

​
2. Color Palette — “Night Vision: Teal + Orange”

Concept: Dark teal = night, information chaos. Orange accent = cat’s eyes, moment of discovery, found value. Warm off-white background = illuminated workspace. Easy on the eyes, comfortable for extended use.

​
2.1 Primary Colors

TokenNameHexRGBTailwind EquivalentUsage
--primaryDeep Teal#0D948813,148,136teal-500Links, active states, highlights
--primary-darkNight Teal#134E4A19,78,74teal-900Sidebar, heading emphasis
--primary-darkerAbyss Teal#0F3D3815,61,56—Sidebar gradient dark end
--primary-lightSoft Teal#CCFBF1204,251,241teal-100Teal background tints
--primary-foreground—#FFFFFF255,255,255whiteText on primary
--accentCernio Orange#F97316249,115,22orange-500CTA buttons, important actions
--accent-hoverDeep Orange#EA580C234,88,12orange-600CTA hover
--accent-activeBurnt Orange#C2410C194,65,12orange-700CTA active/pressed
--accent-lightSoft Orange#FFF7ED255,247,237orange-50Orange background tints
--accent-foreground—#FFFFFF255,255,255whiteText on accent

​
2.2 Surfaces (Backgrounds)

TokenNameHexUsage
--backgroundWarm White#FAFAF8Page background (not pure white, slightly warm)
--cardWhite#FFFFFFCards, modals, dropdowns
--mutedWarm Gray#F5F3EFSecondary areas, hover, empty states
--muted-foreground—#78716CText on muted surfaces

​
2.3 Text

TokenHexUsage
--foreground#1C1917Primary text (stone-900, warm black)
--foreground-muted#78716CSecondary text (stone-500)
--foreground-subtle#A8A29EPlaceholder, hint text (stone-400)
--foreground-on-dark#F5F5F4Text on dark backgrounds (stone-100)

​
2.4 Borders & Dividers

TokenHexUsage
--border#E7E5E4Default border (stone-200)
--border-strong#D6D3D1Emphasized border (stone-300)
--ring#0D9488Focus ring (primary teal)

​
2.5 Status Colors

TokenHexTailwindUsage
--success#16A34Agreen-600Success, confirmation, completed
--success-light#F0FDF4green-50Success background
--destructive#DC2626red-600Danger, delete, error
--destructive-light#FEF2F2red-50Error background
--warning#D97706amber-600Warning (not orange — to avoid confusion with accent)
--warning-light#FFFBEBamber-50Warning background
--info#0EA5E9sky-500Information
--info-light#F0F9FFsky-50Information background

​
2.6 FitScore Colors (Natural Harmony!)

FitScore colors naturally align with the palette — no special design needed.
ScoreTokenHexNote
Hot (>=80)--score-hot#EF4444Red — urgent, hot
Warm (>=50)--score-warm#F97316Orange — same as accent! Natural harmony
Cold (<50)--score-cold#0D9488Teal — same as primary! Natural harmony

​
2.7 Chart Colors

TokenHexName
--chart-1#0D9488Teal (primary)
--chart-2#F97316Orange (accent)
--chart-3#8B5CF6Violet
--chart-4#EC4899Pink
--chart-5#06B6D4Cyan

​
2.8 Sidebar Colors

TokenHexUsage
--sidebar#134E4ASidebar background
--sidebar-darker#0F3D38Sidebar gradient dark end
--sidebar-foreground#F5F5F4Sidebar text
--sidebar-muted#A8A29ESidebar secondary text
--sidebar-accent#F97316Sidebar active page highlight
--sidebar-accent-bgrgba(249,115,22,0.1)Sidebar active page background
--sidebar-hoverrgba(255,255,255,0.05)Sidebar hover
--sidebar-borderrgba(255,255,255,0.1)Sidebar dividers

​
3. Typography

​
Font Family

UsageFontWeightsWhy
HeadingsPlus Jakarta SansSemiBold (600), Bold (700)Geometric, modern, warm feel
BodyInterRegular (400), Medium (500)Proven readability, cleanest SaaS font
Mono/CodeGeist MonoRegular (400)Already in use, works well

​
Size Scale (Tailwind-compatible)

TokenSizeLine HeightUsage
text-xs12px16pxBadge, label, meta
text-sm14px20pxSecondary text, table cell
text-base16px24pxBody (primary text)
text-lg18px28pxCard title, emphasized text
text-xl20px28pxSection title
text-2xl24px32pxPage title
text-3xl30px36pxHero / large heading
text-4xl36px40pxLanding page hero

​
Weight Usage

Regular (400)  → Body text, descriptions
Medium (500)   → Emphasized body, table headers, labels
SemiBold (600) → Card title, section title
Bold (700)     → Page title, hero

​
4. Spacing & Layout

​
Spacing System (4px grid)

4px  (1)   → Very small gap (icon + text spacing)
8px  (2)   → Small gap (form element spacing)
12px (3)   → Medium-small
16px (4)   → Standard padding (card interior)
20px (5)   → Section gap (small)
24px (6)   → Section gap (standard)
32px (8)   → Large section gap
48px (12)  → Page margins
64px (16)  → Hero section padding

​
General Layout

┌─────────────────────────────────────────────────────┐
│ Sidebar (64px collapsed / 256px expanded)           │
│ ┌─────────────────────────────────────────────────┐ │
│ │ Logo                                            │ │
│ │ ─────────────                                   │ │
│ │ Nav Items                                       │ │
│ │  ● Dashboard                                    │ │
│ │  ● Discovery                                    │ │
│ │  ● Companies                                    │ │
│ │  ● Contacts                                     │ │
│ │  ● Leads                                        │ │
│ │  ● Products                                     │ │
│ │  ● Quotes                                       │ │
│ │ ─────────────                                   │ │
│ │ Tools                                           │ │
│ │  ● Scraper                                      │ │
│ │  ● Batch Ops                                    │ │
│ │ ─────────────                                   │ │
│ │ Admin                                           │ │
│ │  ● Admin Dashboard                              │ │
│ │  ● Segments                                     │ │
│ │ ─────────────                                   │ │
│ │ User + Org Switcher                             │ │
│ │ Theme Toggle                                    │ │
│ └─────────────────────────────────────────────────┘ │
│                                                     │
│ ┌─────────────────────────────────────────────────┐ │
│ │ Header Bar                                      │ │
│ │ Breadcrumb          Cmd+K | Notifications | User│ │
│ ├─────────────────────────────────────────────────┤ │
│ │                                                 │ │
│ │ Page Content                                    │ │
│ │ (max-width: 1440px, center aligned)             │ │
│ │                                                 │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
StateWidthContent
Expanded256pxIcon + text + badge
Collapsed64pxIcon only (tooltip for text)
Mobile0px (overlay)Opens via hamburger, overlay

​
Border Radius

TokenValueUsage
--radius-sm6pxBadge, small label
--radius8pxButton, input, dropdown
--radius-md10pxCard
--radius-lg12pxModal, sheet
--radius-xl16pxLarge hero card

​
Shadow

TokenValueUsage
shadow-sm0 1px 2px rgba(0,0,0,0.05)Card default
shadow0 1px 3px rgba(0,0,0,0.1)Card hover
shadow-md0 4px 6px rgba(0,0,0,0.1)Dropdown, popover
shadow-lg0 10px 15px rgba(0,0,0,0.1)Modal

​
5. Component Styles

​
Buttons

VariantBackgroundTextBorderUsage
Primary--accent (orange)White—Main action (Save, Create, Start Discovery)
Secondary--muted--foreground--borderSecondary action (Cancel, Back)
GhostTransparent--foreground-muted—Tertiary action (Details, More)
Destructive--destructiveWhite—Dangerous action (Delete)
OutlineTransparent--primary--primaryAlternative emphasis (Filter, Edit)
LinkTransparent--primary—Inline link appearance
Important: Primary button = ORANGE. Not teal. Orange = action, teal = information/navigation.

​
Sizes

SizeHeightPadding XFontUsage
sm32px12px14pxInside tables, compact areas
default40px16px14pxStandard button
lg48px24px16pxHero, form submit
icon40x40px——Icon-only button

​
Cards

Default:
  - bg: white
  - border: 1px solid var(--border)
  - radius: 10px (--radius-md)
  - shadow: shadow-sm
  - padding: 24px

Hover (clickable cards):
  - shadow: shadow
  - border-color: var(--border-strong)
  - transition: 150ms ease

Active/Selected:
  - border-color: var(--primary)
  - bg: var(--primary-light) or teal-50/10

​
Badges

TypeBackgroundTextUsage
Default--muted--foreground-mutedGeneral label
Primary--primary/10--primaryTeal emphasis
Accent--accent-light--accentOrange emphasis
Success--success-light--successSuccess
Destructive--destructive-light--destructiveError
FitScore Hot#FEF2F2--score-hotScore >=80
FitScore Warm--accent-light--score-warmScore >=50
FitScore Cold--primary-light--score-coldScore <50

​
Input & Form

Default:
  - bg: white
  - border: 1px solid var(--border)
  - radius: 8px
  - height: 40px
  - padding: 0 12px
  - font: 14px Inter

Focus:
  - border-color: var(--primary)
  - ring: 2px var(--ring) / 20% opacity
  - outline: none

Error:
  - border-color: var(--destructive)
  - ring: 2px var(--destructive) / 20% opacity

Disabled:
  - bg: var(--muted)
  - opacity: 0.6
  - cursor: not-allowed

​
Table

Header:
  - bg: var(--muted)
  - font: 12px Medium, uppercase, letter-spacing 0.05em
  - color: var(--foreground-muted)

Row:
  - border-bottom: 1px solid var(--border)
  - hover: bg var(--muted) / 50%

Selected Row:
  - bg: var(--primary-light) / 30%
  - border-left: 3px solid var(--primary)

​
6. Icons

DecisionValue
LibraryLucide React
Size16px (sm), 20px (default), 24px (lg)
Stroke1.5px (sm), 2px (default)
EmojiFORBIDDEN — SVG icons only

​
7. Animation & Transitions

TypeDurationEasingExample
Hover150mseaseButton, card hover
Expand/Collapse200msease-outSidebar, accordion
Modal200msease-outDialog open
Toast300msease-in-outNotification entry
Skeleton1.5sease-in-outLoading animation
prefers-reduced-motion support is mandatory. Respect users who disable animations.

​
8. Design Guidelines — DO vs DON’T

​
DO

  • Leave generous whitespace (like Notion)
  • Use orange ONLY for action buttons (less is more)
  • Use teal tones for navigation and informational highlights
  • Warm off-white background (not pure white)
  • Emphasize cards — put content in cards, don’t leave pages flat
  • Keep data tables clean, reduce visual noise
  • MAX 2 orange buttons per page (importance hierarchy)
  • Empty states: icon + description + single CTA

​
DON’T

  • Paint everything orange — orange is for primary actions only
  • Place teal + orange side by side (contrast too harsh)
  • Nest cards inside cards — keep it flat
  • Use more than 3 different badge colors on the same row
  • Too many sidebar items (max 10-12 visible, group the rest)
  • Use gradients (except sidebar — prefer flat colors)
  • Overdo shadows — subtle shadow-sm is sufficient

​
9. Dark Mode Note

Dark mode is NOT designed in this document. Light mode tokens are the source of truth. Dark mode tokens will be derived programmatically:
  • Background: #0C1917 (teal-tinted dark)
  • Card: #1A2B28 (teal-tinted slate)
  • Foreground: #F5F5F4 (stone-100)
  • Primary: #14B8A6 (teal-400 — brighter)
  • Accent: #FB923C (orange-400 — brighter) Detailed dark mode palette will be done in a separate iteration.

​
10. Responsive Strategy

PriorityPlatformApproach
1Desktop (1280px+)Primary design — all features
2Tablet (768-1279px)Sidebar collapsed, layout adjusted
3Mobile (<768px)Sidebar overlay, single column, simplified
Note: Tablet/mobile apps will be separate projects (reduced feature set). Website design includes responsive support but desktop is the priority.

​
11. Page Inventory (Full Product)

All pages are designed as if the product is complete. Pages not yet coded are included. Inactive features can be hidden in the UI (feature flag) but are included in design.

​
Main Pages

#PageRouteDescriptionCurrent Status
1Login/loginEmail/password + magic link + social loginNot built (R1)
2Signup/signupRegistration + organization creationNot built (R1)
3Onboarding/onboarding4-step wizard (profile → product → market → first discovery)Not built (R1)
4Dashboard/dashboardSummary metrics, recent activity, quick actions, chartsNot built (R2)
5Discovery/discoveryAI company discovery — keyword + country + provider + result listExists
6Companies/companiesCompany database — filter, sort, FitScore, segment, exportExists
7Company Detail/companies/[id]Full-page company profile — details, contacts, interactions, scoreExists (modal)
8Contacts/contactsContact directory — search, filter, sort, exportExists
9Contact Detail/contacts/[id]Contact profile — contact info, linked company, notesNot built
10Leads/leadsPipeline — board view + list view toggleExists (list)
11Lead Detail/leads/[id]Lead profile — status, contacts, interactions, tasks, notesExists
12Products/productsProduct portfolio — CRUD, category, priceNot built (R2)
13Quotes/quotesQuote creation/management — select product, price, PDF exportNot built (R3)
14Scraper/scraperFile upload (PDF/Excel/Word) + processing statusExists
15Scraper Review/scraper/reviewResult review + approval + DB pushExists
16Batch Operations/batchBulk operations — cleaner, finder, bulk_fixer, progressNot built (R2)

​
Settings & Management

#PageRouteDescriptionCurrent Status
17Pricing/pricingPlan comparison (Free/Pro/Team/Enterprise)Not built (R1)
18Billing & Usage/settings/billingCredit balance, invoice history, plan management, usage chartNot built (R1)
19Org Settings/settings/orgOrg info + member invite/management + rolesNot built (R1)
20User Profile/settings/profileProfile + preferences + API key (developer)Not built (R1)
21Admin Dashboard/adminMonitoring — usage, cost, activity log, system healthNot built (R2)
22Admin Segments/admin/segmentsSegment CRUD managementExists

​
Marketing (Separate)

#PageRouteDescriptionCurrent Status
23Landing Page/ (public)Showcase — hero, features, testimonial, CTANot built (R2+)
24About/aboutGaduLabs storyNot built (R2+)

​
12. Next Steps

  1. Page briefs → Detailed layout + component list for each page (to be fed to Stitch)
  2. globals.css update → Convert this palette to Tailwind v4 tokens
  3. Sidebar redesign → Collapsible + dark teal + orange active
  4. Font change → Geist → Plus Jakarta Sans (heading) + Inter (body)
  5. Page-by-page design → Briefs to be sent to Stitch

​
13. References

SourcePurpose
Stripe Accessible Color SystemsAccessible color system approach
Stripe Brand ColorsDark sidebar + professional tone reference
Notion Brand ColorsWarm, minimal, content-first approach
Plus Jakarta SansHeading font
Inter FontBody font
SaaS Color Palettes — ProduktoB2B SaaS palette examples