Source of truth for apps

Build every application with the same Geeks of Cybernet look.

This page documents the brand colours, typography, layout rules, buttons, cards, forms, dashboard patterns, and AI-builder instructions for Geeks of Cybernet websites, portals, dashboards, plugin screens, AI tools, and business applications.

Download CSS Tokens How to Point Apps Here

✓ Same colour system ✓ Same UI rules ✓ Machine-readable JSON

Leads1,248+18%

Projects42Review

Tasks86On Track

Brand DNA

Clean, technical, trustworthy, and growth-focused.

The Geeks of Cybernet design language should feel like a professional Canadian software company: modern, structured, secure, approachable, and easy for business clients to understand.

◈

Developer-led

Use precise layouts, clear hierarchy, and software-style UI patterns.

✓

Client-owned

Communicate clarity, control, transparency, and no hosting lock-ins.

↗

Growth-focused

Use CTAs, lead flow, content cards, and conversion-friendly sections.

⚙

Application-ready

Reuse the same card, form, button, and dashboard patterns in future apps.

Colour System

Use blue for action, navy for trust, and light surfaces for clarity.

Keep the interface bright and clean. Status colours are reserved for real status messages, not decoration.

Primary Blue#0B63F6--blue

Main CTAs, active states, brand highlights

Blue Dark#0955DC--blue-600

Hover, pressed, dark gradient stop

Blue 50#EFF6FF--blue-50

Section tint, icon backgrounds, pills

Blue 100#DBEAFE--blue-100

Stronger light-blue UI fill

Cyan#22D3EE--cyan

Small accent only

Indigo#243CAA--indigo

Secondary accent

Navy#071A42--navy

Headlines and strong labels

Ink#102044--ink

Body text

Muted#62708D--muted

Helper text and descriptions

Light Surface#F8FBFF--light

Application workspace background

Line#D9E6FB--line

Borders and separators

Card#FFFFFF--card

Cards, forms, panels

Success#16A34A--success

Positive status

Warning#F97316--warning

Warning status

Danger#EF4444--danger

Error and destructive actions

Typography

Large confident headings with generous spacing.

Use Inter, Segoe UI, Roboto, Arial, or a similar clean sans-serif. Headings should be bold, slightly tight, and navy. Body copy should be readable and business-friendly.

Recommended type scale

Element	Size	Weight
H1	`clamp(2.5rem, 6vw, 5.35rem)`	900–950
H2	`clamp(2rem, 4vw, 3.35rem)`	900
H3	`1.18rem–1.35rem`	850–900
Body	`1rem`	400
Lead	`1.05rem–1.25rem`	400
Button	`.95rem`	850–900

Core Components

Reusable patterns for websites and applications.

These are the base elements that should appear across future Geeks of Cybernet products and client software interfaces.

Buttons

One strong blue primary action per area. Secondary actions are white with blue borders.

Primary Action Secondary

Badges & Status

Pills are used for tags, categories, active filters, and project status.

WordPressLiveReviewIssue

Cards

White card, light blue border, rounded corners, soft shadow, and a simple blue icon.

⌁

Forms

Labels should stay visible above fields. Use blue focus rings.

Project Name

Project Type

Stats

Use for dashboards, reports, lead-generation metrics, and plugin analytics.

Qualified Leads248+32%

Open Tasks12Due

Errors0Clean

Navigation

Use blue active states, rounded nav items, and clear labels. Avoid vague icons without text.

Application UI Pattern

Use this structure for dashboards, portals, AI tools, and plugin admin screens.

Future applications should feel like they belong to the same product family as the website.

Conversion Rate12.8%Improving

AI Tasks1,094Automated

Reviews4.9Monitor

Activity

Design Tokens

Developer-ready CSS variables.

Applications can import these variables directly or read the JSON file included in this package.

Token table

Variable	Value	Use
`--blue`	`#0B63F6`	Primary brand action color
`--blue-600`	`#0955DC`	Hover/pressed action color
`--blue-50`	`#EFF6FF`	Light brand background
`--blue-100`	`#DBEAFE`	Stronger light blue fill
`--cyan`	`#22D3EE`	Accent only
`--indigo`	`#243CAA`	Secondary accent
`--navy`	`#071A42`	Headings and high-emphasis text
`--ink`	`#102044`	Body copy
`--muted`	`#62708D`	Helper text
`--light`	`#F8FBFF`	App/screen background
`--line`	`#D9E6FB`	Borders and dividers
`--card`	`#FFFFFF`	Card and panel surface
`--success`	`#16A34A`	Positive status only
`--warning`	`#F97316`	Warning status only
`--danger`	`#EF4444`	Error/destructive status only
`--shadow`	`0 18px 55px rgba(15,40,90,.12)`	Large card shadow
`--shadow-soft`	`0 10px 30px rgba(15,40,90,.08)`	Soft panel shadow
`--radius`	`22px`	Default card radius
`--max`	`1180px`	Marketing page container max width

CSS tokens

:root{
  --goc-blue:#0B63F6;
  --goc-blue-600:#0955DC;
  --goc-blue-50:#EFF6FF;
  --goc-blue-100:#DBEAFE;
  --goc-cyan:#22D3EE;
  --goc-indigo:#243CAA;
  --goc-navy:#071A42;
  --goc-ink:#102044;
  --goc-muted:#62708D;
  --goc-light:#F8FBFF;
  --goc-line:#D9E6FB;
  --goc-card:#FFFFFF;
  --goc-success:#16A34A;
  --goc-warning:#F97316;
  --goc-danger:#EF4444;
  --goc-shadow:0 18px 55px rgba(15,40,90,.12);
  --goc-shadow-soft:0 10px 30px rgba(15,40,90,.08);
  --goc-radius:22px;
  --goc-radius-button:13px;
  --goc-max:1180px;
  --goc-font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

How to point an application to this system

<!-- Option 1: Load the CSS variables -->
<link rel="stylesheet" href="https://your-domain.com/design-system/assets/goc-application-tokens.css">

<!-- Option 2: Fetch the JSON design system -->
<script>
fetch('https://your-domain.com/design-system/assets/goc-design-system-reference.json')
  .then(response => response.json())
  .then(tokens => {{
    window.GeeksOfCybernetDesignSystem = tokens;
    console.log('Loaded Geeks of Cybernet design system', tokens.brand.version);
  }});
</script>

<!-- Option 3: Link to this HTML page as the human/AI reference -->
<link rel="help" href="https://your-domain.com/design-system/design-system.html">

AI Builder Rules

Instructions for AI tools, app builders, and developers.

When you ask an AI tool or developer to build a new screen, include these rules so the result matches Geeks of Cybernet.

Use this instruction block

Use navy headings (#071A42), ink body text (#102044), and muted helper text (#62708D).
Use primary blue (#0B63F6) for main CTAs, active states, icons, and key highlights.
Use light blue backgrounds (#F8FBFF, #EFF6FF) behind sections and dashboard workspaces.
Use white cards with rounded 22px corners, #D9E6FB borders, and soft shadows.
Keep layouts spacious, professional, software-focused, and Canadian business friendly.
Use simple line icons, dashboard cards, form panels, progress steps, and system-status patterns.
Avoid dark cyberpunk themes, neon overload, sharp corners, generic gradients, and random accent colors.
For AI, plugin, portal, dashboard, or admin applications, keep the same topbar/card/button/form system.

Paste-ready prompt

AI design prompt

Build this screen using the Geeks of Cybernet design system. Use a clean white and light-blue software-company layout, primary blue #0B63F6 for CTAs and active states, navy #071A42 for headings, ink #102044 for body text, muted #62708D for helper text, light background #F8FBFF, white cards, #D9E6FB borders, 22px rounded cards, 13px rounded buttons and inputs, soft shadows, visible form labels, and clear dashboard-style UI. Avoid dark cyberpunk styling, random accent colours, sharp corners, clutter, or generic neon effects. The result should feel professional, trustworthy, developer-led, Canadian business friendly, and consistent with Geeks of Cybernet.

Do

Use blue for main actions and active states.
Use rounded white cards on light blue sections.
Keep forms clean, labelled, and easy to scan.
Use dashboard visuals, progress steps, and clean icons.
Keep copy professional, clear, and growth-focused.

Do not

Do not use dark hacker/cyberpunk themes.
Do not add random purple, pink, or neon gradients.
Do not use sharp rectangular cards.
Do not hide labels inside placeholder-only fields.
Do not use status colours as general brand colours.