FUEiNT

Design kit

Everything the new site is built from. One family, one pomegranate, hard rules, zero radius. Build with these parts and every page will look like it was made on the same day by the same hand.

Colour
Ground
#F3F2F2 — every page starts here
Pomegranate skin
#C0392B — one emphasis, primary action, poster fields
Pomegranate seed
#7A1230 — the secondary background: panel headers, inverted sections
Deep seed
#4B1224 — all body text and rules. Never black
100
200
300
400
500
600
700
800
900

The ramp carries text on tints and pressed states. Body copy in colour uses step 700; the base skin red is for fields, rules and icons.

Type
Display · 104/0.92 · 800 · −0.04em
Complex in. Simple out.
Section head · 56/1.0 · 800 · −0.03em
Five complex problems, five simple wins
Component head · 22/1.2 · 800
A model that knows your business
Lede · 21/1.45 · 400
Bring us the problem that has waited a year in your backlog.
Body · 15/1.6 · 400
Left is where you are today. Right is what lands on your desk. Everything in between is ours to carry.
Label · 11 · 600 · 0.14em · caps
AI-FIRST SOFTWARE STUDIO · COIMBATORE

Archivo at 800 for everything structural, 400 for reading. Hierarchy comes from size and space, never from a third weight.

Rules and grid
4px — section break
Between major sections, and above a heading that starts a new argument.
2px — structure
Column dividers, panel borders, the edge of anything interactive.
1px — repetition
Between rows of the same kind: ledger rows, list items, table lines.

Twelve columns, 48px gutters, 1440px maximum. Content is flush left against the first column and whitespace collects on the right. Never centre a heading or a button label.

Actions
Primary. Solid pomegranate, one per screen region.
Secondary. Outlined, for the reasonable alternative.
Ghost. Navigation inside a section.
LiveNext.jsCase study
Tags. Status, stack, content type.
Input pair. The field and its action share one 2px box, never two.
The ledger row
Where you are today
You have years of documents, tickets and conversations, and every question about them still needs a person to go and read.
What you gain
A model that knows your business
Trained and deployed on your own data, inside your own infrastructure.
PythonPyTorchAWS

The signature component. Where you are on the left in reading weight, what you gain on the right in heading weight. The asymmetry is the message: complex in, simple out. An icon marks the row, never a number.

Panels
Titled panelmeta
Anything interactive lives in one of these: the brief bar, the audit report, a product demo. The header bar is seed, the body is ground.
Interactive panel
2014
Founded as FUiNT on free guest lectures in Tamil Nadu engineering colleges
Poster cell — the full-bleed proof band and the closing statement only
A FUEiNT desk
Photography. Your own room and your own people, grayscale, full-bleed to its cell. Faces turned away or out of focus. Never stock, never a rounded frame, never a shadow.
Voice
Write
  • Open with the gain, in the words the client would use.
  • Say what lands on their desk, and when.
  • Use a number only when you can point to where it came from.
  • Name the person behind the promise — "a senior engineer reads every brief".
  • One idea per sentence. Let the short one land.
Leave out
  • "Harnessing technology for a brighter future."
  • "Cutting-edge", "seamless", "robust", "empowering".
  • Superlatives with no source: best, leading, world-class.
  • Three adjectives where one verb would do.
  • Anything you would not say out loud on a call.