Identity at a glance
Gryphin is a visual, AI-powered way to organize work. Our brand is confident, warm, and a little bit playful — we take the craft seriously so the product can feel effortless.
Clarity over cleverness
Every pixel and word earns its place. If it does not help someone make progress, cut it.
Warmth is a feature
Project tools are often cold. Ours is not. Small moments of delight reward the work people are doing.
Momentum by default
The interface is biased toward movement — drags, transitions, subtle parallax — because progress should feel physical.
Trust is non-negotiable
Typography, spacing and contrast hit accessibility minimums without exception. A polished product earns permission to be playful.
The Gryphin mark
A stylized G nested with kanban columns. Use the primary lockup wherever possible. Keep clear space equal to the height of the mark on every side.
GryphinGryphin
Clear space
Maintain clear space equal to the height of the mark on all sides. Never crop, overlay or rotate the logo.
Minimum size
Digital: 24px for the mark, 96px for the full lockup. Print: 8mm and 24mm respectively.
Color use
Use the gradient lockup on white or near-white. Use the all-white wordmark on photography or the Gryphin Dark surface.
- Use the full lockup in primary positions.
- Pair with generous whitespace.
- Use the monogram when space is tight.
- Recolor, stretch or add shadows to the mark.
- Place it on busy photography without a scrim.
- Rebuild the wordmark in a different typeface.
A palette built for focus
Blues signal trust and stability. Orange is our moment of warmth — use it sparingly for celebration, acquisition, and anything worth noticing.
Brand palette
Primary action & identity
Depth, hover states, pressed
Headings & emphasis
Accent, celebrate, signup
Muted accent / gradients
Background tint
Neutral scale (Slate)
Semantic colors
Completed, confirmed, live
Needs attention, review
Destructive, blocked, failure
Neutral callouts, tips
Signature gradients
Clear hierarchy, always
We use the default system/sans stack — Inter where available. Weights do the work of the hierarchy. Keep line-lengths between 50 and 75 characters for long reads.
Modern humanist sans. Weights 400, 500, 600, 700. Falls back to the system UI stack.
Used for tokens, code, keyboard shortcuts. Falls back to ui-monospace, Menlo, Consolas.
- · Line-height 1.5 for body
- · Line-height 1.1–1.2 for display
- · Max 75 characters per line
- · Avoid ALL CAPS except eyebrows
Spacing, grid & radius
We scale on a 4px base. Cards use an 8–12px radius. Pills, chips and avatars go full round. Be consistent — mixed radii make interfaces feel homemade.
Spacing scale (4px base)
Border radius
Our default UI radius is lg (8px). Cards and modals use 2xl (16px).
Elevation & materials
Most of the product is flat. Reserve glass morphism for admin and premium contexts. Never stack more than two elevation levels in the same viewport.
The building blocks
Every UI is composed from these primitives. Match the variant to the intent: default for primary actions, outline for secondary, ghost for tertiary.
Buttons
Variants encode intent. Sizes scale the container, not the type.
Badges & pills
Use sparingly to label state. Never nest badges.
Cards
The canvas of the product. Keep content left-aligned with clear hierarchy.
Board view
Organize tasks in customizable kanban columns.
Glass card
For admin dashboards and premium surfaces.
Feature card
For hero moments and major CTAs.
Form elements
Inputs use a 10px radius, 40px height and focus ring in Gryphin Blue.
Alerts & callouts
One visible alert per viewport. Use icons for scannability.
Avatars, stats & iconography
Lucide is our icon library. 16/20/24px sizes. Stroke width 2.
Motion with purpose
Animation explains change — it should never decorate. Short durations, natural easings, respect reduced-motion preferences.
Motion tokens
Examples
How Gryphin sounds
Confident, concise, human. We talk like a teammate who's already done the work for you — helpful, never condescending, occasionally playful.
Cut every word that is not carrying weight. Aim for short sentences and plain verbs.
Write the way a helpful teammate would talk. Contractions are welcome. Jargon is not.
Prefer "saves 2 hours a week" to "saves time." Real numbers build real trust.
Even in errors. People are usually in the middle of something when they read us.
Downloads & assets
Everything you need to represent Gryphin correctly. For partnerships or press, write to hello@gryphin.app.
