Keishmer Studio
Design system & brand manual
The single source of truth for how this site looks and reads. Every value here is generated from the tokens the site actually ships, so this page stays in sync with production.
Two themes · EN/ES · Astro + Tailwind v4 + GSAP
01 — Identity
Logo & brandmark
The public mark is the KEISHMER STUDIO wordmark — Unbounded for display, VT323 Mono for the nav — plus the K monogram, the letter K in Unbounded, for tight spaces and the favicon.
Clear space
Keep at least the cap height of the wordmark clear on every side. Nothing crowds the mark.
Minimum size
18px tall for the monogram, 140px wide for the full wordmark. Below that, use the monogram alone.
Never
- Stretch, rotate, or recolor the mark
- Set it on a low-contrast background
- Add shadows, outlines, or gradients to it
- Rebuild it in another typeface
02 — Foundations
Color
Two themes — dark (the baseline) and light — built from the same roles: surfaces, a text ramp and one coral accent. Components use semantic tokens, so every role resolves to the right value in each theme.
How to read the swatches— Each swatch shows the token name, its hex value, and its contrast ratio against the page background. Click any swatch to copy the hex. AA needs 4.5:1 for text; 3:1 is only acceptable for large text and decorative elements.
Semantic tokens
What components actually use. Each role has a dark and a light value; the site follows the system preference and the theme selector in the menu can force either one. Contrast is measured against each theme's page background.
Surfaces
--surface-page--surface-default--surface-panel--surface-elevated--surface-muted--surface-inverse--surface-primary
Text
--text-primary--text-secondary--text-muted--text-subtle--text-accent--text-accent-blue--text-inverse--text-on-primary
Borders
--border-subtle--border-default--border-strong--border-inverse
State
--state-success--state-danger--state-info
Effects (canvas)
--fx-line--fx-particle--fx-glow--fx-scanline--fx-cursor
Primitive palette
The raw values behind the dark theme. Kept for reference and decoration; new UI should reach for the semantic tokens above.
Brand & accent
The coral primary is the single accent. Blue appears only inside the call-to-action glow; pink is a soft tint reserved for highlights.
The only accent. One per view.
Deeper coral for strong hover / pressed states.
Used only in the CTA glow animation.
Soft tint for subtle highlights.
Surfaces
Near-black neutrals. The page always paints black; panels lift with slightly lighter grays.
The page background everywhere.
Image placeholder and quiet panels.
Text
A light ramp for dark surfaces. text-white is the default body voice; white is for icons and the wordmark.
Default body text.
Icons and the wordmark.
Canvas and shader tint.
Dark text on light accents.
Neutral grays
The working scale for borders, muted text, dividers, and secondary surfaces.
State
Feedback for forms and system messages. Never the only signal — always paired with text.
Form validation — success.
Form validation — errors.
Informational messages.
03 — Foundations
Typography
Three voices: Unbounded for display, Albert Sans for body, and VT323 Mono for labels and the wordmark. Size and weight are independent axes.
Families
- Unbounded, sans-serif
Design systems that convert
Display. Headlines, hero, big numbers.
- Albert, sans-serif
Design systems that convert
Body. Paragraphs and long-form text.
- Albert-Italic, sans-serif
Design systems that convert
Body italic. Emphasis within paragraphs.
- VT323 Mono, monospace
Design systems that convert
Labels. Buttons, breadcrumbs, eyebrows, the wordmark — always uppercase with wide tracking.
Mono labels are set uppercase with tracking-widest. Display headlines are uppercase in Unbounded bold.
Scale
- text-xs· 0.75rem / 12pxDesign systems that convert
- text-sm· 0.875rem / 14pxDesign systems that convert
- text-base· 1rem / 16pxDesign systems that convert
- text-lg· 1.125rem / 18pxDesign systems that convert
- text-xl· 1.25rem / 20pxDesign systems that convert
- text-2xl· 1.5rem / 24pxDesign systems that convert
- text-3xl· 1.875rem / 30pxDesign systems that convert
- text-4xl· 2.25rem / 36pxDesign systems that convert
- text-5xl· 3rem / 48pxDesign systems that convert
- text-6xl· 3.75rem / 60pxDesign systems that convert
Weights
Aa
300
Aa
400
Aa
500
Aa
600
Aa
700
Aa
900
04 — Foundations
Spacing
A 4px base scale from Tailwind. Component padding lives between 8 and 32px; section rhythm is larger and consistent.
Scale
- 00px
- 14px
- 28px
- 416px
- 624px
- 832px
- 1248px
- 1664px
- 2080px
- 2496px
Section rhythm
Horizontal padding steps up with the viewport: px-4 → md:px-8 → lg:px-24. Vertical sections open with py-16 → lg:py-20. Content is capped at max-w-6xl.
05 — Foundations
Radius & stroke
Mostly sharp edges. Radius is reserved for chips and pills; borders are thin hairlines.
Radius
- rounded · 0.25rem
- rounded-lg · 0.5rem
- rounded-full · 9999px
Stroke
- 1px
- 2px
Borders lean on opacity through three tokens (border-subtle → default → strong) that flip with the theme. Hairline is the default for dividers and cards.
06 — Foundations
Elevation & shadow
Depth is built with surfaces first and shadows second. The only branded shadow is the coral glow on the primary CTA hover.
Flat by default — surfaces and borders carry hierarchy.
hover:shadow-lg shadow-primary/50 — the coral glow, reserved for the primary action.
drop-shadow on logos over imagery for legibility.
07 — Foundations
Motion
GSAP drives entrances, scroll-scrub, and the featured-projects pin. Everything collapses to no motion under prefers-reduced-motion.
Durations
- duration-300300ms
- duration-500500ms
- duration-700700ms
With prefers-reduced-motion, animations are skipped and content is shown in its final state.
Easings
- powercubic-bezier(0.25, 0.46, 0.45, 0.94)
Micro-interactions and hovers.
- powercubic-bezier(0.215, 0.61, 0.355, 1)
Standard entrances.
- powercubic-bezier(0.645, 0.045, 0.355, 1)
Large panels and the menu overlay.
- powercubic-bezier(0.19, 1, 0.22, 1)
Menu reveal and emphasized entrances.
08 — Foundations
Layout & breakpoints
Tailwind's canonical five breakpoints. Content is centered and capped; the featured-projects rail scrolls horizontally below lg.
| Breakpoints | min-width |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
Sections use mx-auto max-w-6xl as the main measure. The featured carousel swaps to a horizontal scroll-snap rail under lg.
09 — Foundations
Iconography
Inline SVG in the Material Symbols style, always filled with currentColor so icons inherit the color of the text they accompany.
Sizes pair with the type scale: 20px inside buttons, 24px in navigation and lists. Decorative icons are aria-hidden; informative icons carry a label.
10 — Foundations
Effects
The quiet layer: gradients, the marquee, and generative canvas backgrounds.
Gradients
- bg-linear-to-r from-surface-page via-surface-page/50 to-surface-page
- bg-linear-to-t from-surface-page/85 via-surface-page/40 to-surface-page/20
- bg-radial from-surface-page via-surface-page/50 to-surface-page
Tailwind v4 linear and radial gradients (bg-linear-to-*, bg-radial). Used to fade edges and to sit type over imagery.
Canvas backgrounds
BlackHoleBG, CursorParticles, and MeshText render generative visuals. They are decorative and always sit behind content.
Marquee
An infinite scroll of services (ServiceBanner). Pauses on hover and disables under prefers-reduced-motion.
11 — Patterns
Components
The live building blocks, rendered with the same classes the site ships.
Buttons
Form fields
Cards & blocks
When you're ready
Tell us what needs to get clearer
Navigation
Consent & feedback
This site uses privacy-friendly analytics. Accept or decline.
12 — Voice
Voice & terminology
Clear, direct, and confident. The brand is Keishmer Studio; the author is Keishmer Pérez Torres.
Writing rules
- Active voice, short sentences
- Show the work before the adjectives
- No filler or buzzwords
- Design, frontend, branding, and visual art — described plainly
- Spanish and English carry the same meaning, not a literal translation
Terminology
- Keishmer Studio — the public brand
- Keishmer Pérez Torres — the author
- Never invent another studio name in copy or SEO