Tancang Pilot & TCIT

The Saigon New Port website gave me the main brand colours and fonts. However, I could not copy everything. Some interface items were made as groups, not reusable components. Some colours also had poor contrast.

My goal was to keep the familiar brand style while building a better system. This allowed each website to grow in its own way.

I kept the parent company’s colours and text styles in a shared library. I also rebuilt common items, such as inputs, menus, cards and buttons, as reusable components.

Each website then had its own local variables. The shared styles kept the same company brand. The local variables gave each website its own look and rules.

For Vietnamese and English, I saved the website text as variables with two language modes. I used a Figma plugin to import a translated CSV file. This updated all text variables at the same time and saved a lot of manual work.

I did not keep every old colour without checking it. I tested text and background colours for good contrast. If a colour passed, I kept it. If it failed, I changed it to a similar colour that was easier to read.

I saved the new colours as clear variables for text, backgrounds and buttons. This helped developers choose the right colour without guessing.

During testing, a gradient title in the browser did not match the Figma design. The developer had copied the CSS code made by Figma.

I checked the CSS and tested it in the browser. The colours were correct, but the 220deg direction was wrong. I changed it to to bottom left, and the gradient matched the design.

It was a small change, but it showed that generated code still needs to be checked. Because I could inspect and edit the CSS myself, the design and development teams solved the issue faster.

The final websites feel related because they use the same fonts, main colours and common components. However, they do not look like copies. Tancang Pilot is light and easy to explore. TCIT uses stronger photos and larger content areas to show the scale of the terminal.

The result has a good balance. Both websites clearly belong to Saigon New Port, but each company has its own style. The new system is also easier for developers to use and update.