TRIONN | AI-Powered Creative Design & Development Studio in India

Design Specification — TRIONN | AI-Powered Creative Design & Development Studio in India

Overview

This design system was extracted programmatically from the source page. It is built on a dark canvas (#040508), ink text (#000000), a vivid accent (#FF6B50). All type is set in var(--font-familjen), sans-serif. Detected style signatures: gradient-rich / aurora; technical / mono accents.

Logo asset(s): https://trionn.com/images/logo.svg · https://trionn.com/images/awwwards.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(in lab, red, red))
• linear-gradient(#fff 0%,#c3c3c3 100%)
• linear-gradient(#fff 0%,#d2d2d2 100%)
• linear-gradient(#d2d2d2 0%,#fff 100%)

> 1 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: var(--font-familjen) — stack: var(--font-familjen), sans-serif

Font stacks (most used first)

• var(--font-familjen), sans-serif
• var(--font-neue), sans-serif
• var(--font-sans)
• var(--font-mono)
• var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")
• var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)
• Helvetica Neue,Helvetica,Arial,sans-serif
• var(--font-martian), monospace
• neueHaas
• neueHaas Fallback

Derived type scale

Font sizes (by frequency)

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• inset 0 0 0 1000px #d2d2d2
• 0 0 #a0bedc00
• 0 0 12px 3px #a0bedc33

Layout

Container max-width: 768px

Grid columns (largest detected grid): 12

Breakpoints

• 40rem
• 48rem
• 768px
• 64rem
• 80rem
• 90.0625rem
• 96rem
• 125rem

Animation & Motion

Transitions

• opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)
• opacity .4s .15s
• opacity .9s cubic-bezier(.22, 1, .36, 1)

Easing curves

• cubic-bezier(.16,1,.3,1)
• cubic-bezier(.4, 0, 1, 1)
• cubic-bezier(0, 0, .2, 1)
• cubic-bezier(.4, 0, .2, 1)
• cubic-bezier(.4, 0, .2, 1)
• var(--tw-ease,var(--default-transition-timing-function))
• var(--ease-in)
• var(--ease-in-out)

Keyframes

@keyframes arrowPulse { 0%{opacity:.3;transform:scaleY(1)}to{opacity:1;transform:scaleY(1.2)} }
@keyframes shake { 0%,to{transform:translate(0)}20%{transform:translate(-7px)}40%{transform:translate(7px)}60%{transform:translate(-4px)}80%{transform:translate(4px)} }
@keyframes successPulse { 0%{opacity:0;transform:scale(.75)}35%{opacity:1}to{opacity:0;transform:scale(1.08)} }
@keyframes ts-borderPulse { 0%,to{box-shadow:0 0 #a0bedc00}50%{box-shadow:0 0 12px 3px #a0bedc33} }

Animations

• var(--animate-arrowPulse)

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-secondary — sample text: “✦ The TRIONN name Story✦ The TRIONN name Story”

button-primary — sample text: “✦ The TRIONN name Story✦ The TRIONN name Story”

navigation-link

badge

CTA labels found on page

• Start a Project
• more about us

> Page contains canvas/WebGL elements — consider ambient effects layers.

Source Design Tokens (CSS custom properties)

:root {
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --color-black: #272727;
  --color-white: #fff;
  --spacing: .25rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-xl: 36rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;
  --text-xs: .75rem;
  --text-xs--line-height: calc(1 / .75);
  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25 / .875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --tracking-tight: -.025em;
  --tracking-normal: 0em;
  --tracking-widest: .1em;
  --radius-xs: .125rem;
  --radius-sm: .25rem;
  --radius-md: .375rem;
  --radius-lg: .5rem;
  --radius-3xl: 1.5rem;
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --blur-sm: 8px;
  --blur-md: 12px;
  --perspective-midrange: 800px;
  --aspect-video: 16 / 9;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
  --color-cream: #e6e4e2;
  --color-grey-light: #9c9c9c;
  --color-grey-line: #434343;
  --color-cream-line: #d8d8d8;
  --color-dark-font: #434343;
  --color-light-font: #d8d8d8;
  --animate-arrowPulse: arrowPulse 1.8s ease-in-out infinite;
  --size: 320;
  --bg: #040508;
}

Do's and Don'ts

Do

• Do reserve the accent #FF6B50 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #040508; surfaces should stay within the detected neutral ramp.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #040508;
  --color-primary: #FF4B2F;
  --color-accent: #FF6B50;
  --color-surface: #F7F7F7;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #D8D8D8;
  --color-border: #D2D2D2;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #000000;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F7F7F7;
  --color-surface-container: #E8E8E8;
  --color-surface-container-high: #E6E4E2;
  --color-surface-container-highest: #E1E4E7;
  --font-sans: var(--font-familjen), sans-serif;
  --font-size-display: 100px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 28px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 11px;
  --radius-sm: 1px;
  --radius-md: 8px;
  --shadow-sm: 0 0 #a0bedc00;
  --shadow-md: 0 0 12px 3px #a0bedc33;
  --tracking-display: -.06em;
  --tracking-label: .2em;
  --container-max: 768px;
}