ORDIN / BRAND SYSTEM 01
Make every screen feel intentional.
Ordin is a calm control layer for content, schedules, and distributed screens. The identity turns structure into a signal: open, precise, and always in motion.
OrdinTHE IDEA
A frame that stays open.
The mark is built from four open corners, a central zone, and two short signal paths. It represents a system that gives every piece of content its place without closing off what comes next.
MARK FAMILY
One mark. Three contexts.
Transparent is the default. Dark is a surface treatment, not the logo itself.
Primary / lightInverse / darkMOTION SYSTEM
The mark comes online.
The flashscreen turns the identity into a small ritual: a thin line draws the open frame, color resolves the signal, and the name arrives last.
LIVE FLASHSCREEN
Review the real startup moment.
Switch between the light marketing surface and the dark workspace surface, then replay the exact line-draw and wordmark transition.
Đây là flashscreen đang được dùng trên route thật.
PATH LAB
Tune the connections.
Use the controls to test endpoint positions before committing a new SVG mark. The editor is a review tool only and does not change the production logo.
static frame: M14 25.6667V14H26M38 14H50V25.6667M50 37.3333V49H38M26 49H14V37.3333 static zone: M26 26H38V37H26V26Z static signal: M38 26H50M14 37H26 animation frame: M35 47V35h26M99 35h26v26M125 99v26H99M61 125H35V99
FLASHSCREEN
The first signal people see.
A full-screen startup moment for the web and desktop shell. The mark draws first, then Ordin resolves as the system comes online.
One place.
Every screen.
Content, schedules, and live screen status in one calm operating layer.
OrdinSyncing screensCOLOR SYSTEM
Signal, not decoration.
Teal marks action and orientation. Neutrals carry the working surface.
#102A2CPrimary wordmark, navigation, dark surfaces#168A87Action, orientation, active signal#65D2C5Dark-surface highlight and live state#F5F6F2Quiet operating field#DCE3DFRules, dividers, structureTYPE & RHYTHM
Quiet hierarchy. Clear action.
Content in the right place.
Use typography to make an operating decision obvious before adding another container.
USAGE
Keep the frame open.
Do
Use transparent marks, thin rules, and teal only where a user needs orientation.
Do not
Put the primary logo in a permanent rounded tile or add gradients to create emphasis.